Objects

Master JavaScript's most-used data structure: objects. Learn destructuring, the shorthand syntax, Object.keys / values / entries, and immutable updates with spread.

objectdestructuringspreadObject methods

Duration

⏱ About 1.5 hours

Level

📊 Beginner+

Prerequisite

🎯 js-03

OUTCOME

Work with objects fluently in functional, immutable code

What you'll learn

1Create objects with literal and shorthand syntax
2Destructure values out of objects (and arrays)
3Iterate with Object.keys / values / entries
4Update objects immutably with spread

1. Object Basics

javascript

const name = "Alice";
const age = 30;

// Shorthand: key omitted when name matches
const user = { name, age, greet() { return `hi, ${this.name}`; } };

console.log(user.name);        // dot access
console.log(user["age"]);     // bracket access
user.email = "a@example.com"; // add a property
delete user.age;               // remove

2. Destructuring

javascript

const user = { name: "Alice", age: 30, city: "Seoul" };
const { name, age } = user;
console.log(name, age);   // Alice 30

// Rename + default
const { name: fullName, role = "user" } = user;

// Array destructuring
const [first, second, ...rest] = [1, 2, 3, 4, 5];

3. Iterate Over Objects

javascript

Object.keys(user);    // ["name", "age", "city"]
Object.values(user);  // ["Alice", 30, "Seoul"]
Object.entries(user); // [["name","Alice"], ["age",30], ["city","Seoul"]]

for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}

4. Immutable Update

javascript

const updated = { ...user, age: 31 };     // new object, original untouched

const { city, ...withoutCity } = user;     // remove a key

const merged = { ...defaults, ...overrides };

Example code / lecture materials

All lecture materials and example code are openly available on GitHub.

View on GitHub ↗