JavaScript Objects

Understanding the Heart of JavaScript

2026-02-01

Explanation

What Are Objects?

Objects are collections of key-value pairs. Think of an object like a filing cabinet - each drawer (key) has a label and contains something (value).

const filingCabinet = {
    taxes: '2024 returns',
    contracts: ['Client A', 'Client B'],
    insurance: { provider: 'Acme', policy: '12345' }
};

Key Concepts

Properties: Key-value pairs stored in the object
Methods: Functions stored as object properties
Dot Notation: object.property
Bracket Notation: object['property']
Reference Type: Objects are passed by reference, not copied

Why This Matters

Everything in JavaScript is an object (or behaves like one):

Arrays are objects
Functions are objects
DOM elements are objects
API responses are objects

Demonstration

Example 1: Object Basics

// Creating objects
const user = {
    name: 'Arthur',
    age: 30,
    email: 'arthur@bigpoppacode.com',
    isAdmin: true
};

// Accessing properties
console.log(user.name);       // 'Arthur' (dot notation)
console.log(user['email']);   // 'arthur@bigpoppacode.com' (bracket notation)

// Dynamic property access
const key = 'age';
console.log(user[key]);       // 30

// Modifying properties
user.age = 31;
user['city'] = 'New York';    // Adding new property

// Deleting properties
delete user.isAdmin;

// Check if property exists
console.log('name' in user);           // true
console.log(user.hasOwnProperty('age')); // true

Example 2: Object Methods

const calculator = {
    value: 0,

    add(n) {
        this.value += n;
        return this; // Enable chaining
    },

    subtract(n) {
        this.value -= n;
        return this;
    },

    multiply(n) {
        this.value *= n;
        return this;
    },

    reset() {
        this.value = 0;
        return this;
    },

    getResult() {
        return this.value;
    }
};

// Method chaining
const result = calculator
    .add(10)
    .multiply(2)
    .subtract(5)
    .getResult();

console.log(result); // 15

Example 3: Object Manipulation

const person = { name: 'Arthur', age: 30 };

// Object.keys - get all keys
console.log(Object.keys(person)); // ['name', 'age']

// Object.values - get all values
console.log(Object.values(person)); // ['Arthur', 30]

// Object.entries - get key-value pairs
console.log(Object.entries(person)); // [['name', 'Arthur'], ['age', 30]]

// Object.assign - merge objects
const defaults = { theme: 'dark', lang: 'en' };
const userPrefs = { theme: 'light' };
const settings = Object.assign({}, defaults, userPrefs);
console.log(settings); // { theme: 'light', lang: 'en' }

// Spread operator (modern way)
const merged = { ...defaults, ...userPrefs };
console.log(merged); // { theme: 'light', lang: 'en' }

// Object.freeze - make immutable
const config = Object.freeze({ apiKey: 'secret' });
config.apiKey = 'hacked'; // Silently fails
console.log(config.apiKey); // 'secret'

Key Takeaways:

Use dot notation for known properties
Use bracket notation for dynamic access
Object.keys/values/entries for iteration
Spread operator for merging objects

Imitation

Challenge 1: Deep Clone

Task: Create a function that deep clones an object (handles nested objects).

const original = { a: 1, b: { c: 2 } };
const clone = deepClone(original);
clone.b.c = 99;
console.log(original.b.c); // Should still be 2

Solution

// Simple version (works for JSON-safe objects)
const deepClone = obj => JSON.parse(JSON.stringify(obj));

// Recursive version (handles more cases)
const deepClone = obj => {
    if (obj === null || typeof obj !== 'object') return obj;
    if (Array.isArray(obj)) return obj.map(deepClone);

    return Object.fromEntries(
        Object.entries(obj).map(([key, val]) => [key, deepClone(val)])
    );
};

Challenge 2: Object Diff

Task: Create a function that finds differences between two objects.

const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { a: 1, b: 5, d: 4 };
diff(obj1, obj2);
// { changed: { b: { from: 2, to: 5 } }, added: { d: 4 }, removed: { c: 3 } }

Solution

const diff = (obj1, obj2) => {
    const result = { changed: {}, added: {}, removed: {} };

    // Check for changed and removed
    for (const key in obj1) {
        if (!(key in obj2)) {
            result.removed[key] = obj1[key];
        } else if (obj1[key] !== obj2[key]) {
            result.changed[key] = { from: obj1[key], to: obj2[key] };
        }
    }

    // Check for added
    for (const key in obj2) {
        if (!(key in obj1)) {
            result.added[key] = obj2[key];
        }
    }

    return result;
};

Practice

Exercise 1: User Manager

Difficulty: Beginner

Create an object with methods to manage users:

addUser(name, email) - Add a user
getUser(id) - Get user by ID
updateUser(id, updates) - Update user properties
deleteUser(id) - Remove a user
listUsers() - Get all users

Exercise 2: Nested Property Access

Difficulty: Intermediate

Create a function that safely accesses nested properties:

const obj = { a: { b: { c: 1 } } };
get(obj, 'a.b.c');     // 1
get(obj, 'a.b.d');     // undefined
get(obj, 'x.y.z', 0);  // 0 (default value)

Summary

What you learned:

Object creation and property access
Methods and this keyword
Object.keys, values, entries for iteration
Merging, cloning, and freezing objects

Next Steps:

Read: JavaScript Loops
Practice: Convert arrays of data to objects
Build: Create a simple state management system