Skip to content

JavaScript Objects

Objects as key-value collections, property access, destructuring, and the spread operator.

What you'll learn

  • Creating objects with object literal syntax
  • Dot notation vs bracket notation for property access
  • Methods, computed keys, and shorthand property names
  • Destructuring and the spread operator for objects
  • Shallow copy vs deep copy and why it matters

Concept

What Is an Object?

An object is a collection of key-value pairs where the keys are strings (or Symbols) and the values can be anything — primitives, arrays, functions, or other objects.

const player = {
  name: "Ada",
  level: 12,
  inventory: ["sword", "shield"],
  attack() {
    return this.level * 5;
  },
};

Accessing Properties

// Dot notation — use when the key is a valid identifier
player.name;     // "Ada"

// Bracket notation — use when the key is dynamic or not a valid identifier
const key = "level";
player[key];     // 12
player["inven" + "tory"]; // ["sword", "shield"]

Methods and this

A method is a function stored as a property. Inside a regular method, this refers to the object the method was called on:

player.attack(); // 60 — this.level is 12

Shorthand and Computed Keys

const name = "Ada";
const level = 12;
const p = { name, level }; // shorthand — same as { name: name, level: level }

const dynamicKey = "score";
const obj = { [dynamicKey]: 100 }; // { score: 100 }

Destructuring

const { name, level } = player; // name="Ada", level=12
const { name: playerName } = player; // rename: playerName="Ada"

Spread and Merging

const defaults = { theme: "light", fontSize: 14 };
const userPrefs = { fontSize: 18 };
const merged = { ...defaults, ...userPrefs }; // { theme: "light", fontSize: 18 }

Shallow vs Deep Copy

The spread operator creates a shallow copy — nested objects are still shared by reference:

const original = { stats: { hp: 100 } };
const copy = { ...original };
copy.stats.hp = 0;
console.log(original.stats.hp); // 0 — shared nested object!

For a deep copy, use structuredClone(original) (available in modern browsers and Node.js 17+).

Example

              // Build a user profile object
const user = {
  id: 101,
  name: "Ada Lovelace",
  role: "admin",
  permissions: ["read", "write", "delete"],
  isActive: true,
};

// Destructure the fields you need
const { name, role } = user;
console.log(`${name} is an ${role}`);

// Merge with new settings using spread
const withSettings = {
  ...user,
  settings: { theme: "dark", notifications: true },
};
console.log(withSettings.settings.theme);

// Iterate over keys and values
for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}

// Shallow copy pitfall
const copy = { ...user };
copy.permissions.push("super");
console.log(user.permissions); // ["read", "write", "delete", "super"] — shared!

// Deep copy with structuredClone
const deep = structuredClone(user);
deep.permissions.pop();
console.log(user.permissions); // unchanged after deep clone edit

This demonstrates destructuring, spread merging, Object.entries iteration, the shallow-copy pitfall with nested arrays, and a safe deep copy with structuredClone.

Try it

  • JSON Formatter

    Objects are JSON-like — paste and format them to inspect structure.

  • JSON Tree Viewer

    Browse deeply nested objects in a collapsible tree.

Common mistakes

The mistake

Using a shallow copy and accidentally mutating nested data

The fix

Spread ({ ...obj }) only copies one level. Nested objects and arrays are still shared. Use structuredClone(obj) for a true deep copy.

The mistake

Using dot notation with a dynamic or special-character key

The fix

Dot notation only works with valid identifier keys. Use bracket notation (obj[key]) when the key is a variable or contains special characters.

Related Resources

Related Tools

Related Cheatsheets

Practice JavaScript Objects

2 exercises

Practice JavaScript Objects

Look up unfamiliar terms

A beginner-friendly glossary explains jargon in plain English — variables, functions, DOM, Promise, and more.

View glossary

Build real projects

Apply what you learned by building guided projects with starter code and solutions.

View projects

Decode error messages

Plain-English explanations of common errors — what they mean, why they happen, and how to fix them.

View errors