What is the most efficient way to clone a JavaScript object? I've seen obj = eval(uneval(o)); being used, but that's non-standard and only supported by Firefox.

I've done things like obj = JSON.parse(JSON.stringify(o)); but question the efficiency.

I've also seen recursive copying functions with various flaws.
I'm surprised no canonical solution exists.

javascript object clone 

Nov 17

2 Answers

Native deep cloning

It's called "structured cloning", works experimentally in Node 11 and later, and hopefully will land in browsers. See this answer for more details.

Fast cloning with data loss - JSON.parse/stringify

If you do not use Dates, functions, undefined, Infinity, RegExps, Maps, Sets, Blobs, FileLists, ImageDatas, sparse Arrays, Typed Arrays or other complex types within your object, a very simple one-liner to deep clone an object 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()

Reliable cloning using a library

Since cloning objects is not trivial (complex types, circular references, function, etc.), most major libraries provide functions to clone objects. Don't reinvent the wheel - if you're already using a library, check if it has an object cloning function. For example,

  • lodash - cloneDeep; can be imported separately via the lodash.clonedeep module and is probably your best choice if you're not already using a library that provides a deep cloning function
  • AngularJS - angular.copy
  • jQuery - jQuery.extend(true, { }, oldObject); .clone() only clones DOM elements
  • just library - just-clone; Part of a library of zero-dependency npm modules that do just do one thing. Guilt-free utilities for every occasion.

ES6 (shallow copy)

For completeness, note that ES6 offers two shallow copy mechanisms: Object.assign() and the spread syntax. which copies values of all enumerable own properties from one object to another. For example:

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

answered Dec 31


Snippet 1 (jQuery method)

This method use jQuery extend function which merge the contents of two or more objects together. This is the most reliable deep clone method without data loss or corruption.

let newObject = $.extend(true,{}, oldObject);

Note

$.extend({}, oldObject) returns a shallow copy object and can’t be used. The first argument “true” force a recursive merge (known as Deep copy)

Note

Not to be confused with jQuery.clone() as this function works with DOM elements only

Snippet 2 (JSON)

This is the quickest way to deep clone objects that do NOT have functions, Date variables, or other complex types such as ImageDatas, Blobs, FileLists, Maps, etc.

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

Snippet 4 (ES6 Shallow Clone)

Since deep clone JavaScript object natively can be difficult or has poor performance. If you don’t mind a shallow copy, here is an ES6 code snippet that can do the trick in one line.

let newObject = Object.assign({}, oldObject);

answered Dec 31


Login and Submit Your Answer
Browse other questions tagged  javascript  object  clone or ask your own question.