How to Copy Arrays of Objects vs. Arrays of Primitives in TypeScript

Need to copy an array in TypeScript? Spread syntax ([...items]) or map() creates a new array, but the result is shallow. Primitive values are copied into the new array; objects inside it still share references unless you copy those objects too. Choose the approach based on what you need to change.

Copying Arrays of Primitives

When copying arrays of primitive values, both the.map() method and the spread operator create shallow copies of the array, meaning the new array contains the same primitive values, but is a distinct array in memory.

Using the Spread Operator

const numbers: number[] = [1, 2, 3, 4, 5];
const copyWithSpread = [...numbers];

console.log(copyWithSpread); // [1, 2, 3, 4, 5]

// Modifying the copied array does not affect the original
copyWithSpread[0] = 10;
console.log(copyWithSpread); // [10, 2, 3, 4, 5]
console.log(numbers);        // [1, 2, 3, 4, 5] (remains unchanged)

Using the.map() Method

const numbers: number[] = [1, 2, 3, 4, 5];
const copyWithMap = numbers.map(num => num);

console.log(copyWithMap); // [1, 2, 3, 4, 5]

// Modifying the copied array does not affect the original
copyWithMap[0] = 10;
console.log(copyWithMap); // [10, 2, 3, 4, 5]
console.log(numbers);     // [1, 2, 3, 4, 5] (remains unchanged)

In both cases, the original array remains unchanged after modifying the copied array, as primitive values are copied by value.

Copying Arrays of Objects

When copying arrays of objects, using the spread operator or the.map() method can create shallow copies of the array. However, the objects themselves are still referenced, meaning changes to the objects in the copied array will affect the original objects.

Using the Spread Operator

interface Item {
  id: number;
  name: string;
}

const items: Item[] = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' }
];

const copyWithSpread = [...items];

console.log(copyWithSpread);
// [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }]

// Modifying an object in the copied array affects the original object
copyWithSpread[0].name = 'Updated Item 1';
console.log(copyWithSpread[0].name); // 'Updated Item 1'
console.log(items[0].name);          // 'Updated Item 1' (changed because 'copyWithSpread' holds a reference to the original object)

Using the.map() Method

If you need to edit each object without changing the original, map() can create a new top-level object for each item. The example below copies one object level; nested objects remain shared.

interface Item {
  id: number;
  name: string;
}

const items: Item[] = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' }
];

const copyWithMap = items.map(item => ({ ...item }));

console.log(copyWithMap);
// [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }]

// Modifying an object in the copied array does not affect the original object
copyWithMap[0].name = 'Updated Item 1';
console.log(copyWithMap[0].name); // 'Updated Item 1'
console.log(items[0].name);       // 'Item 1' (remains unchanged)

Here map() creates a new array and the inner spread creates a new top-level object for each item. Changes to top-level properties on a copied item do not affect the original. Nested objects are still shared, so this is not a deep copy.

Conclusion

Spread syntax and map() both produce a new array. With objects, both approaches share item references unless you map each item to a new object. An inner spread copies only that object level, not nested objects. For independent nested data, choose a cloning approach that matches your data types and verify it with a nested-object test. We'd love to hear from you! Reach us via Twitter, Linkedin, or send us a message.