Working with Nested Data

Real-world data is rarely flat. It almost always arrives as complex, nested structures. Whether you are dealing with a response from a web API, reading a JSON configuration file, or structuring the state of an application, you will encounter data that is several levels deep. An object is a collection of properties, and those properties can themselves be objects or arrays.

In this lesson, we will explore how to access, traverse, and reshape nested data, as well as the common pitfalls you will encounter along the way.

Reading and Writing Nested Objects

You can access properties deep inside an object by chaining dot notation together. The engine will evaluate the chain from left to right, reaching deeper into the object with every dot.

const user = { name: 'Alice', address: { city: 'Tokyo', zip: '100-0001' } };
console.log(user.address.city);

Tokyo

Modifying a nested property works the exact same way. You simply assign a new value to the deep path. It’s important to remember that this alters the original object in place.

const user = { name: 'Bob', settings: { theme: 'light' } };
user.settings.theme = 'dark';
console.log(user.settings.theme);

dark

You can also use destructuring to unpack deeply nested properties in a single line. A property can be unpacked from an object and assigned to a variable with a different name, which is exceptionally useful when pulling specific data out of a massive API response.

const user = { name: 'Alice', contact: { email: '[email protected]' } };
const { contact: { email } } = user;
console.log(email);

[email protected]

Arrays of Objects

Arrays can contain objects, forming an array of objects. This is the shape of essentially all real data fetched from a database. Instead of a single user, you usually have a list of hundreds.

const users = [
  { name: 'Alice', role: 'admin' },
  { name: 'Bob', role: 'user' }
];
console.log(users[0].name);
console.log(users[1].role);

Alice
user

When working with arrays of objects, you will frequently use array methods like map(). The map() method creates a new array populated with the results of calling a provided function on every element in the calling array. This makes it trivial to extract a specific property from an array of objects, or reshape the data entirely into a format that a UI component might expect.

const users = [{ name: 'Alice' }, { name: 'Bob' }, { name: 'Charlie' }];
const names = users.map(u => u.name);
console.log(names);

[ 'Alice', 'Bob', 'Charlie' ]

The Reference Trap

One of the most notorious pitfalls in JavaScript involves how it handles object memory. Two distinct objects are never equal, even if they have the exact same properties. When you copy an object or an array, you must be careful: JavaScript uses references for objects.

Why does the language do this? Because objects can be massive. If JavaScript passed objects by value (creating a full clone every time you assigned a variable), the language would grind to a halt under the memory and CPU overhead. Instead, it just hands over a tiny pointer to the same underlying memory address.

This creates the shallow copy trap.

const original = { counts: [10, 20] };
const clone = { ...original };
clone.counts.push(30);
console.log(original.counts.length);

3

Because the spread operator (...) only performs a shallow copy, the top-level object is duplicated, but the nested counts array is not. Both original.counts and clone.counts point to the exact same array in memory. When you mutate the array through the clone variable, the original variable instantly reflects the change because they are the same array.

If you truly need a completely isolated duplicate, you must perform a deep clone (e.g., using structuredClone()), which travels all the way down the nested tree and duplicates every inner object and array it encounters.

const a = { address: { city: 'Paris' } };
const b = { ...a };