Lesson 77 min read

Objects

Key-value pairs that let you model anything in the real world

Objects — The Building Blocks of Everything

If arrays are like a row of lockers (numbered 0, 1, 2...), objects are like a hash map — a filing cabinet with labeled drawers. Each drawer has a name (the key) and something inside (the value).

Objects let you group related data together. A player in a game isn't just a name or just a score — it's both, plus a level, an inventory, and more. Objects let you bundle all of that into one neat package.

Almost everything in JavaScript is an object under the hood — arrays, functions, dates, even errors. Understanding objects is the key to understanding JavaScript itself.

Creating & Accessing Objects

// Creating an object
let player = {
  name: "Luna",
  level: 12,
  health: 95,
  isAlive: true,
  inventory: ["sword", "shield", "potion"]
};

// Accessing properties — two ways:
console.log(player.name);        // "Luna" (dot notation)
console.log(player["level"]);    // 12 (bracket notation)

// Bracket notation is required for:
// 1. Dynamic keys (from variables)
let key = "health";
console.log(player[key]);        // 95

// 2. Keys with spaces or special characters
let weird = { "full name": "Luna Star" };
console.log(weird["full name"]); // "Luna Star"

// Adding new properties
player.score = 2500;
console.log(player.score); // 2500

// Deleting properties
delete player.isAlive;
console.log(player.isAlive); // undefined

Output

Luna
12
95
Luna Star
2500
undefined

Methods — When Objects Can Do Things

A method is just a function stored as a property of an object. It's what lets objects not only hold data but also do things. When you call console.log(), you're calling the log method on the console object!

Inside a method, the keyword this refers to the object the method belongs to. It's how the method knows which object's data to use.

Methods, Computed Properties & Shorthand

let dog = {
  name: "Pixel",
  breed: "Corgi",
  energy: 100,
  // Method — shorthand syntax
  bark() {
    console.log(`${this.name} says: Woof!`);
  },
  play() {
    this.energy -= 20;
    console.log(`${this.name} played! Energy: ${this.energy}`);
  }
};

dog.bark();  // "Pixel says: Woof!"
dog.play();  // "Pixel played! Energy: 80"
dog.play();  // "Pixel played! Energy: 60"

// Computed property names
let field = "color";
let shirt = { [field]: "blue", size: "M" };
console.log(shirt.color); // "blue"

// Shorthand: when variable name matches key name
let x = 10, y = 20;
let point = { x, y }; // same as { x: x, y: y }
console.log(point);    // { x: 10, y: 20 }

Output

Pixel says: Woof!
Pixel played! Energy: 80
Pixel played! Energy: 60
blue
{ x: 10, y: 20 }

Destructuring, Spread & Useful Methods

Just like arrays, objects support destructuring (pulling out properties into variables) and the spread operator (copying/merging objects).

Three super useful static methods live on Object itself:

Object.keys(obj) — returns an array of all key names
Object.values(obj) — returns an array of all values
Object.entries(obj) — returns an array of [key, value] pairs (great for looping!)

Destructuring, Spread & Object.keys/values/entries

let movie = { title: "Inception", year: 2010, rating: 8.8 };

// Destructuring — pull out properties
let { title, year } = movie;
console.log(title); // "Inception"
console.log(year);  // 2010

// Rename while destructuring
let { rating: score } = movie;
console.log(score); // 8.8

// Default values
let { director = "Unknown" } = movie;
console.log(director); // "Unknown" (movie has no 'director' key)

// Spread — copy and merge objects
let base = { a: 1, b: 2 };
let extra = { b: 99, c: 3 };
let merged = { ...base, ...extra };
console.log(merged); // { a: 1, b: 99, c: 3 } (later values win!)

// Object.keys, values, entries
let pet = { name: "Mochi", type: "cat", age: 3 };
console.log(Object.keys(pet));    // ["name", "type", "age"]
console.log(Object.values(pet));  // ["Mochi", "cat", 3]

// Loop over entries
for (let [key, value] of Object.entries(pet)) {
  console.log(`${key}: ${value}`);
}

Output

Inception
2010
8.8
Unknown
{ a: 1, b: 99, c: 3 }
["name", "type", "age"]
["Mochi", "cat", 3]
name: Mochi
type: cat
age: 3

Note: When you spread-merge objects with { ...a, ...b }, the LAST one wins for duplicate keys. Think of it like painting: the second coat of paint covers the first. This is a super common pattern for updating settings — { ...defaults, ...userPreferences }.

Quick check

How do you access a property when the key is stored in a variable?

Hash FunctionsData Structure

Collisions, load factor, probing

→

Sets vs MapsData Structure

Use cases and tradeoffs

→

Dictionaries & SetsPython

Look things up by name instead of by number

→

Collections FrameworkJava

List, Set, Map — the power tools of Java

→

← Arrays Functions →