Objects

An object groups related data and behaviour under one name: a user with a name, email and a login() method; a product with a price and stock count. Objects are the most important data structure in JavaScript — nearly everything you work with, from arrays to DOM elements, is one.

Object literals

const book = {
  title: "Dune",
  author: "Frank Herbert",
  year: 1965,
  available: true,
};

console.log(book);
console.log(book.title, book.year);

{ title: 'Dune', author: 'Frank Herbert', year: 1965, available: true }
Dune 1965

An object is written with braces and contains properties: key: value pairs separated by commas. A trailing comma after the last property is allowed and makes adding new lines cleaner.

Dot vs bracket notation

const user = { name: "Ana", "favourite color": "teal", 2026: "joined" };

console.log(user.name);
console.log(user["name"]);
console.log(user["favourite color"]);
console.log(user[2026]);

const field = "name";
console.log(user[field]);
console.log(user.field);

Ana
Ana
teal
joined
Ana
undefined

Use dot notation normally. Use brackets when the key isn't a valid identifier (spaces, dashes, starting with a digit) or when the key is held in a variable. user.field looks for a property literally called "field".

Adding, changing and deleting

const car = { make: "Volvo", year: 2019 };

car.color = "blue";
car.year = 2021;
delete car.make;

console.log(car);
console.log(car.make);

{ year: 2021, color: 'blue' }
undefined

Objects are dynamic: assigning to a property that doesn't exist creates it. Reading a missing property gives undefined.

Shorthand syntax

When a property's value comes from a variable with the same name, you can write the name once. Keys can also be computed with brackets:

const name = "Lamp";
const price = 30;
const field = "category";

const product = { name, price, [field]: "lighting", [`${field}Id`]: 7 };
console.log(product);

{ name: 'Lamp', price: 30, category: 'lighting', categoryId: 7 }

Methods

A property whose value is a function is called a method. Inside it, this refers to the object (lesson 27):

const account = {
  owner: "Kai",
  balance: 100,
  deposit(amount) {
    this.balance += amount;
    return this.balance;
  },
  describe() {
    return `${this.owner} has $${this.balance}`;
  },
};

account.deposit(50);
console.log(account.describe());

Kai has $150

Nested objects

const company = {
  name: "Acme",
  address: { city: "Lisbon", country: "Portugal" },
  employees: [{ name: "Rui" }, { name: "Ines" }],
};

console.log(company.address.city);
console.log(company.employees[1].name);
console.log(company.ceo?.name ?? "no CEO listed");

Lisbon
Ines
no CEO listed

Chain dots and brackets to reach nested data. Use optional chaining (?.) when a level might be missing.

Checking whether a property exists

const settings = { volume: 0, theme: undefined };

console.log("volume" in settings);
console.log(Object.hasOwn(settings, "theme"));
console.log("language" in settings);
console.log(settings.volume ? "set" : "looks unset!");

true
true
false
looks unset!

A property can exist but hold a falsy value like 0 or undefined. Use in or Object.hasOwn to check existence; don't rely on truthiness.

Objects are compared by reference

const a = { x: 1 };
const b = { x: 1 };
const c = a;

console.log(a === b);
console.log(a === c);
console.log(JSON.stringify(a) === JSON.stringify(b));

false
true
true

Two separately created objects are never equal, even with identical contents — === checks whether they're the same object. Comparing JSON.stringify output is a quick content check for simple data (property order must match).

Try it yourself