JS Objects

JavaScript Objects: Properties, Methods, and Safe Access

A JavaScript object is an unordered collection of key-value pairs that models real-world entities such as users, products, or configuration records. Keys are strings (or Symbols), and values can be any data type, including arrays and functions.

Reading, Updating, and Deleting Properties

You can read or set object properties in two ways:

• Dot notation (user.name): Clean and readable when the property name is a fixed valid identifier.
• Bracket notation (user[key]): Required when the key comes from a variable or contains spaces or hyphens like "first-name".

Use delete obj.prop to remove a key completely, and use Object.keys(), Object.values(), or Object.entries() to loop over properties cleanly.

Modern ES6+ Object Features

ES6 added property shorthand, concise method syntax, computed keys, and ES2020 added optional chaining (?.) to prevent crashes on missing nested fields.

const field = "role";
const name = "Nadia";

const member = {
  name, // Shorthand for name: name
  [field]: "editor",
  profile: { city: "Dhaka" },
  describe() {
    return `${this.name} (${this.role})`;
  },
};

console.log(member.describe());
console.log("City:", member.profile?.city);
console.log("Missing phone:", member.contact?.phone ?? "Not provided");

Common Mistakes to Avoid

• Reading properties on undefined: Writing user.address.zip throws a TypeError if address is missing. Use user.address?.zip instead.
• Mutating objects with Object.assign(target, source) by mistake: Passing an existing object as the first argument mutates it. Use { ...objA, ...objB } to create a fresh object.
• Using arrow functions for object methods that rely on this: Arrow functions do not bind their own this, so this.name will be undefined.

Frequently Asked Questions

How do I check if an object has its own property?

Use the modern static method Object.hasOwn(obj, "key"). It is safer than obj.hasOwnProperty("key") because it works even on null-prototype objects.

How do I merge two objects without changing the originals?

Use object spread syntax: const merged = { ...defaults, ...overrides };. Properties in overrides replace matching keys from defaults.

Can an object property key be a number?

Keys in plain objects are converted to strings automatically, so obj[1] and obj["1"] refer to the exact same property.