What is the most efficient way to deep clone an object in JavaScript?

3 years Ago 4 Min Read 896 Views

Native deep cloning

It’s known as “structured Cloning”, works experimentally at Node 11 and later and will hopefully be available in browsers. This answer has more details.

Fast cloning with data loss – JSON.parse/stringify

If you don’t use  Dates, or functions, Infinity,  RegExps Maps, Sets Blobs File Lists ImageDatas, Maps. A very simple way to deep clone an object using just one liner is:

JSON.parse(JSON.stringify(object))

const a = {
  string: 'string',
  number: 123,
  bool: false,
  nul: null,
  date: new Date(),  // stringified
  undef: undefined,  // lost
  inf: Infinity,  // forced to 'null'
  re: /.*/,  // lost
}
console.log(a);
console.log(typeof a.date);  // Date object
const clone = JSON.parse(JSON.stringify(a));
console.log(clone);
console.log(typeof clone.date);  // result of .toISOString()

For benchmarks, see Corban’s answer

Reliable cloning using a library

Cloning objects is not an easy task due to complex types, circular references, and function. Most libraries that are significant provide a function to copy objects.Do not reinvent the wheelIf you are already using a library check to see if it contains an object cloning function. You can use this example:

Dash –  cloneDeep;can be imported separately using the dash. If you don’t have a library with deep cloning capabilities, clone deep module is your best option.
AngularJS –  angular.copy
jQuery.extend(true, { }, oldObject);only  .clone() elements of DOM.

ES6 (shallow copy)

Note that ES6 has two shallow copy mechanisms. Spread syntax () and  Object.assign() , which copy all of their enumerable property values from one object to the next. Take, for example:

var A1 = {a: "2"};
var A2 = Object.assign({}, A1);
var A3 = {...A1};  // Spread Syntax

Check out this benchmark: http://jsben.ch/#/bWfk9

In my tests that were based on speed, I was successful.

JSON.parse(JSON.stringify(obj))

This is the slowest and most difficult way to deep-clone an object (it’s slower than jQuery.extend, with  deep flag set true to 10-20%).

jQuery.extend performs well when the  deep flag to  false is used (shallow Clone). This is a good option as it includes extra logic for type verification and doesn’t duplicate over undefined properties etc. But, it can also slow you down.

If you understand the structure of your objects or are able to avoid deep-nested arrays, then you can write simple for (var i in obj) loops to clone your object while checking if it property.

Final note: If you are trying to clone a well-known object structure in a hot circuit, you can achieve MUCH MUCH more performance by simply in-lining the Cloning procedure and manually building the object.

JavaScript trace engines can be slow at optimizing for..in  Loops. Checking property could also slow you down.

var clonedObject = {
  knownProp: obj.knownProp,
  ..
}
 
Beware using the  JSON.parse(JSON.stringify(obj)) method on  Date objects - JSON.stringify(new Date()) returns a string representation of the date in ISO format, which JSON.parse() You don'tConvert back into a  Date  objects. For more details, refer to this answer.

Notably, native cloning may not be the best option in Chrome 65. JSPerf suggests that you can perform native cloning to create a new functionality.800xJSON.stringify is more slow than JSON.stringify. Stringify is lightning fast across all of the boards.

Update for ES6

Javascript ES6? Try this native method of cloning and shallow copy.

Object.assign({}, obj);

You can only use variables and not functions if your object has no other objects

var newObject = JSON.parse(JSON.stringify(oldObject));