Objects

An object groups related values under names. In { name: "Coco", age: 3 }, pet.name gives "Coco" and pet.age gives 3.

Values with labels

An array is good for a list of similar things in order. Many things in the world are better described by a set of labelled facts: a pet has a name, a kind and an age; a product has a title, a price and a stock count. An object stores exactly that. It is a collection of properties, and each property is a key (the label) paired with a value.

const pet = {
  name: "Coco",
  kind: "cat",
  age: 3,
};
console.log(pet.name);        // Coco
console.log(pet["kind"]);     // cat
console.log(pet.age + 1);     // 4

An object is written in curly braces, with each property as key: value and commas between them. A trailing comma after the last property is allowed. To read a property, write the object, a dot and the key: pet.name. The other form uses square brackets and a string, pet["kind"]. Brackets are needed when the key is stored in a variable, as in pet[field], or when it contains a space. Reading a key that does not exist gives undefined.

Changing and adding properties

Assign to a property to change it, and assign to a new key to add one. As with arrays, this works even when the object was declared with const, because the variable still points to the same object.

const player = { name: "Sam", score: 0 };
player.score += 10;
player.level = 2;
console.log(`${player.name} ${player.score} ${player.level}`);   // Sam 10 2
delete player.level;
console.log(player.level);   // undefined

Lists of objects

Arrays and objects combine naturally. An array of objects is how most programs hold records: a shopping basket, a class list, a set of search results. You loop over the array and read the properties you need from each object.

const basket = [
  { item: "pen", price: 2 },
  { item: "book", price: 12 },
  { item: "bag", price: 25 },
];
let total = 0;
for (const line of basket) {
  total += line.price;
}
console.log("Total:", total);   // Total: 39

Values inside an object can be anything, including arrays and other objects. const user = { name: "Ana", tags: ["admin", "editor"] }; lets you write user.tags[0] to reach "admin". Read such chains from left to right: start at user, go to its tags property, then take index 0.

Methods and the keys of an object

A property whose value is a function is called a method. You have been calling methods all along: console.log is the log method of the console object, and Math.round is the round method of Math. Inside a method, the keyword this refers to the object the method was called on, so a method can read its own object's properties. Finally, Object.keys(pet) gives an array of the keys, here ["name", "kind", "age"], which is useful for looping over every property.

const counter = {
  count: 0,
  add() {
    this.count++;
  },
};
counter.add();
counter.add();
console.log(counter.count);   // 2

Worked example. A book record { title: "Notes", pages: 120, read: 45 } can report progress with Math.round(book.read / book.pages * 100), which is 38, meaning 38 percent. Naming the values pages and read makes the formula readable in a way that b[1] / b[0] never would.

Array or object?

A quick test decides which one to use. If the values are the same kind of thing and their order matters, such as the scores of a class or the steps of a recipe, use an array and reach them by position. If the values are different facts about one thing, such as the name, price and stock of a product, use an object and reach them by name. Most real data mixes the two: an array of products, where each product is an object. When you print an object in the practice box you will see it in a compact form such as {"name":"Coco","age":3}; reading single properties gives cleaner output.