🗂️ Object Literals and Properties

What Are Objects?

Think of an object as a driver's license. A single card groups together your name, address, birth date, and photo — each fact clearly labeled. In JavaScript, an object stores a collection of key–value pairs: each key is the label, and each value is the associated data. Values can be anything — strings, numbers, arrays, functions, or even other objects.

Notice how address is itself an object nested inside person. This ability to nest — objects inside objects, arrays inside objects, objects inside arrays — is what lets a handful of simple rules describe almost any real-world data.

Creating Objects

As with houses, there are several ways to build an object. The object literal — a pair of curly braces — is by far the most common and the one you'll use daily.

Object literal notation (the go-to)

// Empty object, ready to fill
const emptyObject = {};

// Object with properties
const person = {
    firstName: 'John',
    lastName: 'Smith',
    age: 30,
    isStudent: false
};

// Objects can nest other objects and arrays
const employee = {
    id: 1001,
    name: 'Sarah Johnson',
    position: 'Software Engineer',
    contact: {
        email: 'sarah@company.com',
        phone: '555-0123',
        office: 'Building A, Room 302'
    },
    skills: ['JavaScript', 'React', 'Node.js']
};

Other ways (good to recognize)

// Object constructor — verbose; the literal above is preferred
const car = new Object();
car.make = 'Toyota';
car.model = 'Camry';
car.year = 2022;

// Object.create() — makes a new object with a given prototype (advanced)
const prototypeObject = {
    greet() {
        return `Hello, I'm ${this.name}`;
    }
};
const alice = Object.create(prototypeObject);
alice.name = 'Alice';
console.log(alice.greet()); // "Hello, I'm Alice"

Dot vs Bracket Access

Reading a property is like reaching into a labeled compartment of a toolbox. JavaScript gives you two syntaxes — and knowing exactly when bracket notation is required saves real debugging time.

const user = {
    name: 'John Doe',
    age: 25,
    'favorite color': 'blue',   // key with a space
    123: 'numeric key'
};

// Dot notation — clean and preferred for normal names
console.log(user.name);        // 'John Doe'
console.log(user.age);         // 25

// Bracket notation — REQUIRED when the key has spaces or is numeric
console.log(user['favorite color']);  // 'blue'
console.log(user[123]);               // 'numeric key'

// Bracket notation is also REQUIRED for dynamic (variable) keys
const propertyName = 'age';
console.log(user[propertyName]);      // 25  — reads the "age" property
console.log(user.propertyName);       // undefined — looks for a literal "propertyName" key!

Reaching into nested objects

const company = {
    name: 'Tech Corp',
    address: {
        street: '123 Silicon Valley',
        city: 'San Francisco'
    }
};

console.log(company.address.city);          // 'San Francisco'
console.log(company['address']['street']);  // '123 Silicon Valley'

// Optional chaining (?.) safely handles a missing branch — no crash
console.log(company.address?.zip);          // undefined (no error)
console.log(company.ceo?.name);             // undefined (ceo doesn't exist)

Adding, Modifying & Deleting Properties

Objects are mutable: you can change them freely after creation, even when declared with const. (The const locks the binding — the object it points to — not the object's contents.)

const car = { make: 'Honda', model: 'Civic' };

// Adding new properties
car.year = 2023;
car['color'] = 'red';
console.log(car);   // { make: 'Honda', model: 'Civic', year: 2023, color: 'red' }

// Modifying existing properties
car.color = 'blue';
car['year'] = 2024;

// Deleting a property
delete car.color;
console.log(car);   // { make: 'Honda', model: 'Civic', year: 2024 }

// Checking whether a property exists
console.log('make' in car);                  // true
console.log('color' in car);                 // false
console.log(Object.hasOwn(car, 'model'));    // true (modern; replaces hasOwnProperty)

Methods & the this Keyword

A method is simply a function stored as an object property — an action the object can perform. Inside a method, the keyword this refers to the object the method was called on, letting the method read and update its own object's data.

const calculator = {
    brand: 'Casio',
    model: 'FX-991',

    // Full function-expression syntax
    add: function (a, b) {
        return a + b;
    },

    // ES6 shorthand method syntax (preferred)
    subtract(a, b) {
        return a - b;
    },

    // A method using `this` to read its own properties
    describe() {
        return `${this.brand} ${this.model} Calculator`;
    }
};

console.log(calculator.add(5, 3));       // 8
console.log(calculator.subtract(10, 4)); // 6
console.log(calculator.describe());      // "Casio FX-991 Calculator"

A richer example: a user object that computes

const user = {
    firstName: 'Jane',
    lastName: 'Smith',
    birthYear: 1990,

    getFullName() {
        return `${this.firstName} ${this.lastName}`;
    },

    calculateAge() {
        const currentYear = new Date().getFullYear();
        return currentYear - this.birthYear;
    },

    // Methods can call other methods via `this`
    canVote() {
        return this.calculateAge() >= 18;
    }
};

console.log(user.getFullName());  // "Jane Smith"
console.log(user.calculateAge()); // e.g. 36 in 2026
console.log(user.canVote());      // true

Iterating Over Objects

Sometimes you need to walk through every property — to display it, transform it, or count it. There are four main tools, and the modern Object.entries() is usually the most convenient.

const student = {
    name: 'Alex Johnson',
    age: 20,
    grade: 'A'
};

// 1. for...in — loops over the keys
for (const key in student) {
    console.log(`${key}: ${student[key]}`);
}

// 2. Object.keys() — an array of the keys
console.log(Object.keys(student));   // ['name', 'age', 'grade']

// 3. Object.values() — an array of the values
console.log(Object.values(student)); // ['Alex Johnson', 20, 'A']

// 4. Object.entries() — an array of [key, value] pairs (great with destructuring)
Object.entries(student).forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
});

Practical: object → URL query string

const params = { search: 'javascript', page: 2, sort: 'relevance' };

const queryString = Object.entries(params)
    .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
    .join('&');

console.log(queryString); // "search=javascript&page=2&sort=relevance"

Practical: an object as a lookup dictionary

// Count how often each word appears — object as a frequency map
function countWords(text) {
    const frequency = {};
    for (const word of text.toLowerCase().split(/\s+/)) {
        frequency[word] = (frequency[word] || 0) + 1;
    }
    return frequency;
}

console.log(countWords('hello world hello javascript world'));
// { hello: 2, world: 2, javascript: 1 }

Destructuring & Spread

Two ES6 features make working with objects dramatically cleaner. You'll see them in nearly every modern codebase, especially React.

Destructuring — pull properties into variables

const user = { name: 'John', age: 30, email: 'john@example.com' };

// Extract several properties in one line
const { name, email } = user;
console.log(name, email);   // "John" "john@example.com"

// Rename while destructuring, and set defaults for missing keys
const { name: userName, role = 'guest' } = user;
console.log(userName, role); // "John" "guest"

Spread — copy and merge objects

// Merge defaults with overrides — later keys win
const defaults  = { color: 'blue', size: 'medium' };
const userPrefs = { color: 'red' };
const finalSettings = { ...defaults, ...userPrefs };
console.log(finalSettings); // { color: 'red', size: 'medium' }

// Make a shallow copy without touching the original
const copy = { ...user, age: 31 };   // copy has age 31; user is untouched

Computed property names

// Use a variable's value as the KEY, with [ ] around it
const propName = 'dynamicKey';
const obj = {
    [propName]: 'value',
    [`${propName}2`]: 'another value'
};
console.log(obj); // { dynamicKey: 'value', dynamicKey2: 'another value' }

Practice & Quiz

const book = {
    title: 'JavaScript: The Good Parts',
    author: 'Douglas Crockford',
    totalPages: 176,
    currentPage: 0,

    readPages(pages) {
        this.currentPage = Math.min(this.currentPage + pages, this.totalPages);
        return this.getProgress();
    },

    getProgress() {
        const percentage = (this.currentPage / this.totalPages) * 100;
        return `${percentage.toFixed(1)}% complete`;
    },

    isFinished() {
        return this.currentPage === this.totalPages;
    }
};

console.log(book.readPages(88)); // "50.0% complete"

const bankAccount = {
    accountNumber: '123456789',
    balance: 1000,

    deposit(amount) {
        if (amount > 0) {
            this.balance += amount;
            return `Deposited $${amount}. New balance: $${this.balance}`;
        }
        return 'Invalid deposit amount';
    },

    withdraw(amount) {
        if (amount > 0 && amount <= this.balance) {
            this.balance -= amount;
            return `Withdrew $${amount}. New balance: $${this.balance}`;
        }
        return 'Invalid amount or insufficient funds';
    },

    checkBalance() {
        return `Current balance: $${this.balance}`;
    }
};

console.log(bankAccount.deposit(500));  // "Deposited $500. New balance: $1500"
console.log(bankAccount.withdraw(200)); // "Withdrew $200. New balance: $1300"

const studentGrades = {
    name: 'Alice Johnson',
    grades: [],

    addGrade(subject, score) {
        this.grades.push({ subject, score });
    },

    getAverage() {
        if (this.grades.length === 0) return 0;
        const sum = this.grades.reduce((total, g) => total + g.score, 0);
        return sum / this.grades.length;
    },

    getLetterGrade() {
        const avg = this.getAverage();
        if (avg >= 90) return 'A';
        if (avg >= 80) return 'B';
        if (avg >= 70) return 'C';
        if (avg >= 60) return 'D';
        return 'F';
    }
};

studentGrades.addGrade('Math', 92);
studentGrades.addGrade('Science', 85);
console.log(studentGrades.getAverage());     // 88.5
console.log(studentGrades.getLetterGrade()); // "B"

Best Practices & Pitfalls

✅ Do

• Declare objects with const — you can still mutate properties; the reference stays fixed
• Choose clear, descriptive property names (createdAt, not d)
• Use destructuring to pull out the few properties you need
• Use the shorthand method syntax and guard deep reads with optional chaining ?.

❌ Don't

• Use an arrow function as a method that relies on this
• Add properties to built-in objects you don't own (like Object.prototype)
• Assume { ...obj } deep-copies — nested objects are still shared
• Reach into a.b.c without checking that b exists first

Summary

📚 Additional Resources

• MDN — Working with objects
• MDN — Object reference
• MDN — Destructuring assignment

🚀 What's Next?

You can now store data in arrays and objects. Next you'll learn the elegant, functional way to transform that data — the trio every JavaScript developer uses constantly: Array Methods (map, filter, reduce).