Objects and Properties

Objects are JavaScript's primary way to group named data — a user profile, API response, configuration object, or React component props all map naturally to { key: value } shape. Unlike arrays, property order was historically messy; modern engines preserve insertion order for string keys. Understanding reference sharing and property descriptors separates junior debugging from senior root-cause analysis.

Object literals and property access

Dot notation (user.name) works when the key is a valid identifier. Bracket notation (user["name"]) is required for dynamic keys, keys with spaces, or keys stored in variables. Accessing a missing property returns undefined — not an error — which is why optional chaining (?.) became essential for nested API JSON.

Sangam
Sangam M.
true
undefined

Adding, updating, and removing properties

Objects are mutable by default. Assignment to a new key creates the property; assignment to an existing key overwrites the value. delete removes a property from the object (and affects hasOwn checks). For configuration merges, spread or Object.assign copy enumerable own properties into a new object — patterns you will use daily in API mappers.

{ host: 'localhost', port: 4001, debug: true }
false
{ host: 'localhost', port: 4001, timeout: 5000 }

Methods — functions as properties

When a function is stored on an object, it is called a method. Methods often use this to refer to the object they were called on — the binding rules for this are subtle and covered more in prototypes and classes. For now, know that obj.greet() and const fn = obj.greet; fn() can behave differently because this depends on call site, not where the function was defined.

1
2
0

Object static methods — keys, values, entries

Object.keys returns own enumerable string keys. Object.values returns the corresponding values. Object.entries returns [key, value] pairs — ideal for for...of loops and converting objects to Map. These methods ignore inherited prototype properties, which is usually what you want for plain data records.

['alice', 'bob', 'carol']
[92, 88, 95]
alice: 92
bob: 88
carol: 95
true
false

Computed property names

The example below demonstrates "Computed property names" in runnable form. Read the comment lines first — they map each step to the mental model from earlier sections, then trace execution top to bottom as the engine would.

42
admin

Objects are the default record type in JavaScript APIs — HTTP JSON, configuration, and state snapshots. Prefer plain objects for data transfer; reach for classes when you need instanceof checks and shared methods. Always distinguish missing keys (undefined) from intentionally cleared values (null) in your domain model.

1. 1Use dot for fixed keys; brackets for dynamic or special keys
2. 2Missing properties return undefined — plan for optional data
3. 3Object.entries powers loops over records and API maps
4. 4Methods use this — binding depends on how you call them
5. 5Next lesson: destructuring, spread, and rest