JS Objects

JavaScript Objects: Properties, Methods, & Computed Keys

Objects are collections of key-value pairs (properties and methods). Keys are strings or Symbols, and values can be any JavaScript data type, including primitive values, arrays, nested objects, or functions (methods).

Object Architecture

flowchart LR
    Obj["User Object"] --> Prop1["Property: id (101)"]
    Obj --> Prop2["Property: username ('alex')"]
    Obj --> Method1["Method: getFullName()"]
    Obj --> Computed["Computed Key: ['role_' + id]"]

Access & Mutation Methods Comparison

Practical Code Example

// Demonstrating Object Literals, Methods, and Utility Methods

const dynamicRoleKey = "user_role";

const userProfile = {
  id: 501,
  firstName: "Maksudur",
  lastName: "Rahman",
  // Computed property key
  [dynamicRoleKey]: "Lead Architect",
  
  // Method definition shorthand
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
};

// Accessing properties
console.log(`Full Name: ${userProfile.getFullName()}`);
console.log(`Role (Bracket Access): ${userProfile[dynamicRoleKey]}`);

// Adding and deleting properties
userProfile.lastLogin = new Date().toISOString();
delete userProfile.lastName; // Delete property

// Object Utility Inspections
console.log("Keys:", Object.keys(userProfile));
console.log("Values:", Object.values(userProfile));
console.log("Entries:", Object.entries(userProfile));

// Merging Objects with Object.assign() or Spread
const defaultPermissions = { canEdit: true, canDelete: false };
const mergedUser = { ...userProfile, ...defaultPermissions };
console.log("Merged User Profile:", mergedUser);

Best Practices & Gotchas

• Use Method Shorthand: Use methodName() {} instead of methodName: function() {} inside object literals.
• Beware this in Object Methods: Arrow functions inside objects do NOT bind this to the object instance; they inherit this from the outer scope.
• Use hasOwnProperty() or Object.hasOwn(): Check if a property exists directly on the object rather than its prototype chain using Object.hasOwn(obj, "prop").

Self-Check Challenge

Write an object car with properties brand, model, and a method getSpecs() returning "Brand Model". Explain what happens if getSpecs is written as an arrow function.