Get full access
Quiz

What are the different ways to copy an object or an array?

Topics
JavaScript
Edit on GitHub

TL;DR

To copy an object or an array in JavaScript, you can use several methods. For shallow copies, you can use the spread operator (...) or Object.assign(). For deep copies, you can use the built-in structuredClone(), JSON.parse(JSON.stringify()), or libraries like Lodash's _.cloneDeep().

// Shallow copy of an array
const originalArray = [1, 2, 3];
const shallowCopyArray = [...originalArray];
console.log(shallowCopyArray); // [1, 2, 3]


// Shallow copy of an object
const originalObject = { a: 1, b: 2 };
const shallowCopyObject = { ...originalObject };
console.log(shallowCopyObject); // { a: 1, b: 2 }


// Deep copy using JSON methods
const deepCopyObject = JSON.parse(JSON.stringify(originalObject));
console.log(deepCopyObject); // { a: 1, b: 2 }

Different ways to copy an object or an array

Shallow copy

Using the spread operator

The spread operator (...) is a concise way to create a shallow copy of an array or an object.

// Shallow copy of an array
const originalArray = [1, 2, 3];
const shallowCopyArray = [...originalArray];
console.log(shallowCopyArray); // [1, 2, 3]


// Shallow copy of an object
const originalObject = { a: 1, b: 2 };
const shallowCopyObject = { ...originalObject };
console.log(shallowCopyObject); // { a: 1, b: 2 }

Using Object.assign()

Object.assign() can also be used to create a shallow copy of an object.

const originalObject = { a: 1, b: 2 };
const shallowCopyObject = Object.assign({}, originalObject);
console.log(shallowCopyObject); // { a: 1, b: 2 }

Deep copy

Using structuredClone()

structuredClone() is a built-in function (Baseline across modern browsers and available in Node.js 17+) that creates a deep copy. It handles nested objects, arrays, Date, Map, Set, and circular references, but it cannot clone functions or DOM nodes (those throw a DataCloneError).

const originalObject = { a: 1, b: { c: 2 } };
const deepCopyObject = structuredClone(originalObject);
console.log(deepCopyObject); // { a: 1, b: { c: 2 } }

Using JSON.parse(JSON.stringify())

This method is a simple way to create a deep copy of an object or an array. However, it has limitations, such as not handling functions, undefined, or circular references.

const originalObject = { a: 1, b: { c: 2 } };
const deepCopyObject = JSON.parse(JSON.stringify(originalObject));
console.log(deepCopyObject); // { a: 1, b: { c: 2 } }

Using Lodash's _.cloneDeep()

Lodash is a popular utility library that provides a _.cloneDeep() method for deep copying objects and arrays.

const _ = require('lodash');
const originalObject = { a: 1, b: { c: 2 } };
const deepCopyObject = _.cloneDeep(originalObject); // { a: 1, b: { c: 2 } }

Other methods

Using recursion

For custom deep copy logic, you can implement a recursive function.

function deepCopy(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }


  if (Array.isArray(obj)) {
    return obj.map((item) => deepCopy(item));
  }


  const copy = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  return copy;
}


const originalObject = { a: 1, b: { c: 2 } };
const deepCopyObject = deepCopy(originalObject);
console.log(deepCopyObject); // { a: 1, b: { c: 2 } }

Further reading

Edit on GitHub