Basic12 min read

Object Methods & Utilities

Work with plain objects using built-in static methods, spread, and modern property descriptors.

Object.keys, values, and entries

These static methods convert objects into iterable arrays for mapping and filtering. `Object.entries` pairs well with `Object.fromEntries` to transform object shapes in a functional pipeline.

Remember that only enumerable own properties are included. Prototype chain properties and non-enumerable keys (like most built-in method names) are excluded unless explicitly defined otherwise.

`keys`, `values`, `entries` for iteration
Combine `entries` + `fromEntries` to reshape
Only enumerable own properties

const inverted = Object.fromEntries(
  Object.entries(map).map(([k, v]) => [v, k])
);

Spread, assign, and Cloning

Object spread `{ ...obj }` creates a shallow copy and merges objects left-to-right with later keys overwriting earlier ones. `Object.assign(target, ...sources)` mutates the target — prefer spread for immutable updates.

Shallow copies share nested object references. Use structured cloning (`structuredClone` in modern runtimes) or deep clone libraries when duplicating nested graphs. JSON.parse(JSON.stringify(obj)) drops functions, Dates, and undefined values.

Spread for shallow immutable merge
Shallow copy shares nested refs
Use `structuredClone` for deep copies

const next = { ...state, user: { ...state.user, name: 'Alice' } };

Optional Chaining and Nullish Coalescing

Optional chaining (`?.`) short-circuits property access when the base is nullish, returning `undefined` instead of throwing. Nullish coalescing (`??`) returns the right operand only when the left is `null` or `undefined`, unlike `||` which treats all falsy values as missing.

These operators dramatically reduce defensive `&&` chains in API response handling. Combine them when mapping deeply nested JSON from external services.

`?.` for safe nested access
`??` preserves `0` and `""` unlike `||`
Ideal for API response shaping

const city = user?.address?.city ?? 'Unknown';

Property Descriptors and Freezing

`Object.defineProperty` configures writable, enumerable, and configurable flags plus getters/setters. `Object.freeze` prevents adding, deleting, or modifying properties — use for constant configuration objects.

`Object.seal` allows mutation of existing properties but not adding or removing keys. For runtime immutability in application state, prefer library-enforced patterns (Immer, Redux) over freezing user-facing objects repeatedly.

Descriptors control mutability and enumeration
`freeze` for constant config
Seal allows edits but not add/remove

const CONFIG = Object.freeze({ apiUrl: '/api', timeout: 5000 });

Structured Data Patterns

Use plain objects as records keyed by ID for O(1) lookup: `{ [id]: entity }`. Normalize nested API responses into flat entity maps plus ID arrays for list ordering — the pattern Redux and TanStack Query encourage.

Validate object shapes at boundaries with schema libraries (Zod, Yup) rather than trusting arbitrary keys throughout the codebase. Fail fast at parse time instead of debugging undefined access deep in UI trees.