Objects and arrays

Primitives represent single values. Real programs need to group related values together. JavaScript does this with objects and arrays.

Objects store key-value pairs

An object is a collection of properties, each with a key and a value:

const user = {
  name: "Ada",
  age: 36,
  email: "ada@example.com",
};

Keys are strings (or symbols). When you write name: "Ada", the key is actually "name" — a string. Values can be any type, including other objects or functions.

Accessing properties

Use dot notation when the key is a valid identifier:

user.name;   // "Ada"
user.age;    // 36

Use bracket notation when the key is dynamic, contains special characters, or is stored in a variable:

const key = "email";
user[key];           // "ada@example.com"

user["first name"];  // works for keys with spaces

If a property does not exist, accessing it returns undefined rather than throwing an error:

user.phone;  // undefined

Adding, updating, and deleting properties

Objects are mutable. You can add, change, or remove properties at any time:

user.role = "admin";       // add a new property
user.age = 37;             // update an existing property
delete user.email;         // remove a property

Checking whether a property exists

The in operator checks for the existence of a property:

"name" in user;    // true
"phone" in user;   // false

Checking against undefined also works but is less precise — a property could intentionally hold undefined as its value:

user.name !== undefined;  // true
user.phone !== undefined; // false

Object methods

When a property holds a function, it is called a method:

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

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

The this keyword inside a method refers to the object the method belongs to. this has more nuance than this example shows — it is covered in detail in the objects and prototypes unit.

Nested objects

Objects can contain other objects:

const company = {
  name: "Example Corp",
  address: {
    street: "123 Main St",
    city: "Portland",
    state: "OR",
  },
  employees: [
    { name: "Ada", role: "Engineer" },
    { name: "Grace", role: "Manager" },
  ],
};

Access nested values by chaining dot or bracket notation:

company.address.city;           // "Portland"
company.employees[0].name;      // "Ada"

Arrays hold ordered lists

An array is an ordered collection accessed by numeric index, starting at zero:

const colors = ["red", "green", "blue"];

colors[0];  // "red"
colors[2];  // "blue"
colors.length; // 3

Arrays are actually objects under the hood — they just have special syntax and a rich set of built-in methods.

Common array operations

Add and remove elements:

const items = [1, 2, 3];

items.push(4);       // adds to the end: [1, 2, 3, 4]
items.pop();         // removes from the end: [1, 2, 3]
items.unshift(0);    // adds to the start: [0, 1, 2, 3]
items.shift();       // removes from the start: [1, 2, 3]

Check for inclusion:

items.includes(2);   // true
items.includes(99);  // false

Find the index of a value:

items.indexOf(2);    // 1
items.indexOf(99);   // -1 (not found)

Accessing elements with .at() (ES2022)

The .at() method provides a cleaner way to access elements by index, especially for negative indices:

const fruits = ["apple", "banana", "cherry"];

fruits.at(0);    // "apple" — same as fruits[0]
fruits.at(-1);   // "cherry" — last element
fruits.at(-2);   // "banana" — second to last

Before .at(), accessing the last element required fruits[fruits.length - 1]. With .at(), you use fruits.at(-1).

Arrays can hold mixed types

JavaScript arrays are not homogeneous. They can hold any mix of values:

const mixed = [1, "two", true, null, { key: "value" }];

This is valid but usually a sign that the data is not well structured. In practice, most arrays hold objects of the same shape or primitives of the same type.

What to carry forward

• objects hold named properties accessed with dot or bracket notation
• objects are mutable — properties can be added, changed, or removed at any time
• methods are functions stored as object properties
• arrays hold ordered lists accessed by numeric index starting at 0
• arrays are objects with extra methods for adding, removing, and searching
• both objects and arrays are reference types, not primitive values

Objects and arrays are the raw material that every other data operation works on. The next lesson covers the operators you use to work with these values.