Object Basics and Destructuring

Objects are the fundamental data structure of JavaScript — every value that is not a primitive is an object. An object is a collection of key-value pairs called properties, where keys are strings (or Symbols) and values can be anything. Understanding objects deeply — how to create, read, update, delete, and iterate their properties — is the foundation of all JavaScript programming. In this lesson you will master object literals, property shorthand, computed keys, destructuring, and the essential Object.* utility methods.

Object Creation and Property Access #

Object Destructuring Patterns #

Object.* Utility Methods #

Basic Example #

// ── Property shorthand and computed keys ──────────────────────────────────
const name = 'Alice';
const age  = 30;
const user = { name, age, role: 'admin' };   // { name: 'Alice', age: 30, role: 'admin' }

const field  = 'email';
const config = {
    [field]:              'alice@example.com',
    [`${field}Verified`]: true,
};
console.log(config);   // { email: 'alice@example.com', emailVerified: true }

// ── Reading and writing ───────────────────────────────────────────────────
const product = { id: 1, name: 'Widget', price: 9.99 };
console.log(product.name);        // 'Widget'
console.log(product['price']);    // 9.99
console.log(product?.meta?.sku);  // undefined — no crash

product.inStock = true;   // add
product.price   = 11.99;  // update
delete product.id;        // remove

// ── Destructuring ─────────────────────────────────────────────────────────
const { name: productName, price = 0, category = 'general' } = product;
console.log(productName, price, category);   // 'Widget' 11.99 'general'

// ── Rest properties ───────────────────────────────────────────────────────
const { id: userId, ...profile } = { id: 42, name: 'Bob', age: 25, email: 'b@b.com' };
console.log(userId);   // 42
console.log(profile);  // { name: 'Bob', age: 25, email: 'b@b.com' }

// ── Nested destructuring ──────────────────────────────────────────────────
const response = {
    status: 200,
    data: { user: { name: 'Carol', address: { city: 'London' } } }
};
const { data: { user: { name: cName, address: { city } } } } = response;
console.log(cName, city);   // 'Carol' 'London'

// ── Object.entries + for...of ─────────────────────────────────────────────
const scores = { alice: 95, bob: 82, carol: 88 };
for (const [student, score] of Object.entries(scores)) {
    const grade = score >= 90 ? 'A' : score >= 80 ? 'B' : 'C';
    console.log(`${student}: ${score} (${grade})`);
}

// ── Transform via entries + fromEntries ───────────────────────────────────
const prices  = { widget: 9.99, gadget: 49.00, doohickey: 4.99 };
const withTax = Object.fromEntries(
    Object.entries(prices).map(([k, v]) => [k, +(v * 1.08).toFixed(2)])
);
console.log(withTax);   // { widget: 10.79, gadget: 52.92, doohickey: 5.39 }

// ── Immutable spread merge ────────────────────────────────────────────────
const defaults = { theme: 'light', lang: 'en', fontSize: 16 };
const saved    = { theme: 'dark', fontSize: 18 };
const settings = { ...defaults, ...saved };   // saved values win
console.log(settings);  // { theme: 'dark', lang: 'en', fontSize: 18 }

How It Works #

Step 1 — Objects Are Reference Types #

Assigning an object to a variable stores a reference (memory address), not a copy. const b = a means both variables point to the same object — modifying b.name changes a.name too. Use spread { ...a } for a shallow copy.

Step 2 — Destructuring Matches by Key Name #

Object destructuring assigns by key name, not position. { name: userName } reads the name key but stores it in a variable named userName. Defaults activate only when the value is undefined — not for null, 0, or false.

Step 3 — Spread Merges Shallowly — Last Wins #

{ ...defaults, ...saved } copies all properties into a new object. When the same key appears in both, the right-most value wins. This is the standard pattern for applying user settings over defaults.

Step 4 — Object.entries Enables Array Pipelines on Objects #

Object.entries(obj) converts an object to an array of [key, value] pairs. Process with any array method. Object.fromEntries() converts back. This round-trip lets you filter, map, and sort object properties cleanly.

Step 5 — Computed Keys Enable Dynamic Objects #

[expr]: value evaluates expr at runtime and uses its string value as the key. This powers patterns like building form state ({ [fieldName]: fieldValue }) and grouped lookup structures.

Real-World Example: Settings Manager #

// settings-manager.js

const DEFAULTS = Object.freeze({
    theme:    'light',
    language: 'en',
    fontSize: 16,
    autoSave: true,
});

function createSettingsManager(saved = {}) {
    let current = { ...DEFAULTS, ...saved };

    return {
        get(key)         { return key ? current[key] : { ...current }; },
        set(key, value)  { current = { ...current, [key]: value }; },
        reset(key)       { current = key ? { ...current, [key]: DEFAULTS[key] } : { ...DEFAULTS }; },
        export()         { return JSON.stringify(current); },
        diff() {
            return Object.fromEntries(
                Object.entries(current).filter(([k, v]) => v !== DEFAULTS[k])
            );
        },
    };
}

const mgr = createSettingsManager({ theme: 'dark', fontSize: 18 });
console.log(mgr.get('theme'));    // 'dark'
console.log(mgr.get('language')); // 'en'
console.log(mgr.diff());          // { theme: 'dark', fontSize: 18 }

mgr.set('language', 'fr');
console.log(mgr.diff());          // { theme: 'dark', fontSize: 18, language: 'fr' }

mgr.reset('theme');
console.log(mgr.get('theme'));    // 'light'

Common Mistakes #

Mistake 1 — Destructuring null/undefined #

❌ Wrong:

const { name } = getUser();   // TypeError if getUser() returns null

✅ Correct:

const { name } = getUser() ?? {};

Mistake 2 — Mutating a shared object reference #

❌ Wrong:

const b = a;   b.x = 99;   // a.x is now 99!

✅ Correct:

const b = { ...a };   b.x = 99;   // a unchanged

Mistake 3 — for…in including inherited properties #

❌ Wrong:

for (const key in obj) { }   // may include prototype properties

✅ Correct:

for (const [key, val] of Object.entries(obj)) { }   // own props only

▶ Try It Yourself

Quick Reference #