Objects

While arrays store ordered lists, objects store structured data with meaningful names. A user, a product, a blog post — these are all naturally represented as objects.

Creating Objects

const user = {
  name: "Alice",
  age: 25,
  isAdmin: false,
  city: "London",
};

// Access properties with dot notation
console.log(user.name);   // "Alice"
console.log(user.age);    // 25

// Or bracket notation (useful for dynamic keys)
const key = "city";
console.log(user[key]);   // "London"

Adding and Updating Properties

const product = {
  name: "Headphones",
  price: 79.99,
};

// Update an existing property
product.price = 69.99;

// Add a new property
product.inStock = true;

console.log(product);
// { name: "Headphones", price: 69.99, inStock: true }

Methods

Properties that are functions are called methods:

const calculator = {
  add: function(a, b) {
    return a + b;
  },
  subtract: (a, b) => a - b,   // arrow function shorthand
};

console.log(calculator.add(3, 5));       // 8
console.log(calculator.subtract(10, 4)); // 6

Inside a regular method, this refers to the object:

const counter = {
  count: 0,
  increment() {
    this.count++;
  },
  reset() {
    this.count = 0;
  },
};

counter.increment();
counter.increment();
console.log(counter.count);   // 2

Destructuring

Destructuring lets you extract properties into variables in one step:

const user = { name: "Alice", age: 25, city: "London" };

// Instead of:
const name = user.name;
const age = user.age;

// Use destructuring:
const { name, age, city } = user;
console.log(name);   // "Alice"
console.log(age);    // 25

You can rename variables and set defaults:

const { name: fullName, age = 18, role = "user" } = user;
console.log(fullName);   // "Alice"
console.log(role);       // "user" (default value)

Destructuring works in function parameters too:

function greet({ name, age }) {
  return `Hi ${name}, you are ${age} years old.`;
}

console.log(greet({ name: "Bob", age: 30 }));
// "Hi Bob, you are 30 years old."

Spread Operator

The spread operator (...) copies properties from one object into another:

const defaults = { theme: "light", language: "en", fontSize: 16 };
const userSettings = { theme: "dark", fontSize: 18 };

// Merge objects — later properties override earlier ones
const settings = { ...defaults, ...userSettings };
console.log(settings);
// { theme: "dark", language: "en", fontSize: 18 }

Spread is also great for creating a modified copy without mutating the original:

const user = { name: "Alice", age: 25 };
const olderUser = { ...user, age: 26 };

console.log(user);       // { name: "Alice", age: 25 }   — unchanged
console.log(olderUser);  // { name: "Alice", age: 26 }

Object.keys, Object.values, Object.entries

const scores = { Alice: 88, Bob: 72, Charlie: 95 };

Object.keys(scores);
// ["Alice", "Bob", "Charlie"]

Object.values(scores);
// [88, 72, 95]

Object.entries(scores);
// [["Alice", 88], ["Bob", 72], ["Charlie", 95]]

// Loop over entries
Object.entries(scores).forEach(([name, score]) => {
  console.log(`${name}: ${score}`);
});

Arrays of Objects

One of the most common patterns: an array where each item is an object:

const products = [
  { id: 1, name: "Laptop", price: 999 },
  { id: 2, name: "Mouse", price: 25 },
  { id: 3, name: "Keyboard", price: 75 },
];

// Find a product
const laptop = products.find((p) => p.name === "Laptop");
console.log(laptop.price);   // 999

// Get all names
const names = products.map((p) => p.name);
console.log(names);   // ["Laptop", "Mouse", "Keyboard"]

// Filter by price
const affordable = products.filter((p) => p.price < 100);
console.log(affordable.length);   // 2

Try It Yourself