Copying with spread

Learn to make shallow copies of arrays and objects with spread.

Shallow copy

Spread lets you take a shallow copy of an array or object. const copy = [...original] produces a new array; const copy = { ...original } produces a new object. Top-level values are independent; changing the copy does not affect the original.

This is ideal for immutable updates: you build a derived copy without touching the existing data. React and similar libraries rely on this pattern.

The nested caveat

Shallow copy only copies the first level. Nested objects or arrays are shared by reference. After const copy = { ...original }, writing copy.items.push(3) also changes original.items; both point to the same array.

When you need a deep copy, you use a method like structuredClone(original). Spread gives you a fast and readable shallow copy; that is enough most of the time.

Exercise Mutate the copy, not the original

Create an array called numbers (for example [1, 2, 3]). Use spread to make an independent copy called numbersCopy. Add a new item to the copy with numbersCopy.push(4). Then log both numbers and numbersCopy separately with console.log so you can see the original is unchanged.

Show example solution

const numbers = [1, 2, 3];
const numbersCopy = [...numbers];
numbersCopy.push(4);
console.log(numbers);
console.log(numbersCopy);

Test yourself

What does shallow copy not copy?
```
const original = { items: [1, 2] };
const copy = { ...original };
```
- Nested objects stay as references
- All nested structures are deep-copied
- Only the first property is copied
- The original object is deleted
Show answer

Nested objects stay as references — Correct. Shallow copy only copies the top level; nested structures are shared.

Shallow copy of an object

const original = { theme: "light" };
const copy = ____;
console.log(copy);

Show answer

const original = { theme: "light" };
const copy = {...original};
console.log(copy);

Match the copying concepts

shallow copy

Top-level copy, nested shared
[...arr]

Array copy
{...obj}

Object copy

Next lesson: Spread in function calls

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies