JavaScript — Object Properties

Properties store object data

const user = {
    name: "Alice",
    age: 25,
    active: true
};

Here name, age, active are properties.

Reading properties

Dot notation when the name is known:

user.name;    // "Alice"

Bracket notation when it's dynamic:

const property = "age";
user[property];        // 25 ✓
user.property;         // undefined — looks for literal "property"!

The user[key] vs user.key distinction is the #1 practical gotcha.

Adding and changing

Assignment creates or overwrites:

const user = { name: "Alice" };

user.age = 25;         // added
user.age = 26;         // updated

Objects mutate even under const — const locks the binding, not the contents:

const person = { name: "Sam" };
person.name = "Alex";   // valid ✓

Deleting

delete user.age;
user.age;              // undefined afterward

Checking existence

The in operator tests the whole chain:

"name" in user;    // true
"email" in user;   // false

undefined vs missing — they look identical

const user = { name: "Alice", age: undefined };

user.age;     // undefined
user.email;   // undefined  ← but email doesn't EXIST

Distinguish with in, or restrict to own properties:

Object.hasOwn(user, "age");       // true
Object.hasOwn(user, "toString");  // false — inherited, not own

Dynamic keys in action

const key = "score";
const player = { score: 10 };

player[key] = 20;      // updates via variable
player.score;          // 20

Essential when processing API data whose field names arrive at runtime.

Shorthand & destructuring extras

Same-name shorthand:

const name = "Alice", age = 25;
const user = { name, age };

Rename while destructuring:

const { name: userName } = user;   // local var userName

Defaults for possibly-missing fields:

const { name, age = 18 } = user;   // age defaults to 18 if absent

The inspection trio

const user = { name: "Alice", age: 25 };

Object.keys(user);     // ["name", "age"]
Object.values(user);   // ["Alice", 25]
Object.entries(user);  // [["name","Alice"], ["age",25]]

Entries power the best object loop:

for (const [key, value] of Object.entries(user)) {
    console.log(key, value);
}

Freezing and sealing

const settings = { theme: "dark" };

Object.freeze(settings);    // no add/change/delete
settings.theme = "light";   // silently ignored (throws in strict mode)
settings.theme;             // "dark"

Object.seal(user);          // existing props editable,
user.age = 1;               // but NO additions/deletions
delete user.name;           // ignored

Method	change existing	add	delete
freeze	✗	✗	✗
seal	✓	✗	✗

Both are shallow — nested objects stay mutable.

Descriptors (awareness)

Every property has metadata:

Object.getOwnPropertyDescriptor(user, "name");
// { value: "Alice", writable: true, enumerable: true, configurable: true }

writable/enumerable/configurable explain why some properties resist loops or deletion.

Common mistakes: obj[key] written as obj.key; confusing in (chain) with hasOwn (own only); expecting deep-freeze from Object.freeze.

Mini Practice

1. Five-property object; read one each way (dot + bracket).
2. Use a variable as a key to update a score.
3. Add → modify → delete a property, logging between steps.
4. Compare "x" in obj vs Object.hasOwn(obj, "x") on an inherited method.
5. Loop entries pairs; print aligned key : value.
6. Freeze an object and attempt every mutation type.

Next: methods →