CODEWITHSUNDEEP
javascriptcopyclone
user970727
user970727

Reputation: 1957

Javascript - How to clone an object?

I am confused. I create a copy from myObjOne, than i delete an entry from myObjOne and JS delete the entry in my copy(myObjTwo) too? But why?

  myObjOne = {};
  myObjOne['name'] = 'xxx';
  myObjOne['id'] = 'yyy';
  myObjOne['plz'] = 'zzz';  

  // clone
  myObjTwo = myObjOne;

  // remove something
  delete myObjOne['name'];

  console.dir(myObjTwo);

example http://jsbin.com/itixes/edit#javascript,html

Upvotes: 19

Views: 36895

Answers (8)

Allan Mwesigwa
Allan Mwesigwa

Reputation: 1298

With ES6, use the spread operator.

myObjTwo = {...myObjOne}

The spread operator in es6 is just an ellipsis. It creates a copy of the original, even if the original is destroyed

Upvotes: 2

Pablo
Pablo

Reputation: 2549

You can use Object.assign() but be aware of browser support.

More info here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign.

Example:

myObjTwo = Object.assign({}, myObjOne);

Upvotes: 1

Dinesh
Dinesh

Reputation: 1134

Simple.

var clone=function(o){
      var n= {}.toString.apply(o)=="[object Array]" ? []:{};
      for(i in o)
         n[i]= typeof o[i]=='object' ? clone(o[i]):o[i];
      return n;
 };

Usage:

var x={a:{d:34},b:33};
var y=clone(x);  // clones 'x'

Upvotes: 0

Nicu Surdu
Nicu Surdu

Reputation: 8341

You can use jQuery like so:

var myObjTwo = jQuery.extend(true, {}, myObjOne);

The first argument indicates that we want to make a deep copy of myObjOne.

Upvotes: 16

Narendra Yadala
Narendra Yadala

Reputation: 9664

Update: Removing Object.create as a method of cloning as indicated in comments.

  myObjTwo = myObjOne;

does not clone. It simply copies the reference.

If you want to clone, you can use JSON.parse and JSON.stringify

var x = {a:{b:{c:{'d':'e'}}}};
var y = JSON.parse(JSON.stringify(x));  //y is a clone of x
console.log(y.a.b.c.d); //prints e
console.log(y === x); //prints false

Warning: As Raynos mentioned in comments, this JSON based clone does not retain methods of the input object in the output object. This solution is good enough if your object does not contain any methods. Methods are properties of a object that are functions. If var obj = {add : function(a,b){return a+b;}} then add is a method of obj.

If you need a solution that supports copying of methods, then go through these SO answers (as pointed out by musefan, Matt and Ranhiru Cooray)

I would suggest How do I correctly clone a JavaScript object?

Upvotes: 24

RobG
RobG

Reputation: 147513

Lots of advice on how to make a copy not only of the object and it's properties, but of all the objects referenced by its properties. Here's a version that clones the object without copying it and so that the clone inherits all properties added later except for those shadowed by own properties of the clone:

var cloneOf = (function() {
  function F(){}
  return function(o) {
    F.prototype = o;
    return new F();
  }
}());

Some may recognise the pattern. An example:

var base = {foo:'foo', bar:'bar'};
var baseClone = cloneOf(base);
alert(baseClone.foo);  // foo

Upvotes: 2

funkybro
funkybro

Reputation: 8671

Your line myObjTwo = myObjOne does not clone myObjOne, it just creates a duplicate reference to the same object!

The actual answer is to use a clone function, perhaps from a library such as underscore.js. But really, it looks like you have some reading and learning to do about the concept of objects and pointers in Javascript.

Upvotes: 0

musefan
musefan

Reputation: 48445

That is not how you clone, that is simply storing the same original object in an extra variable. Maybe this answer will help you

Upvotes: 4

Related Questions