Cloning an object in JavaScript

The below first logs 0, and then logs 1. How do I store a copy of the object, rather than a reference to it?

debug.log(vi.details.segment);
vi.nextSegment = vi.details;
vi.nextSegment.segment++;
debug.log(vi.details.segment);

To clone an object in jQuery:

var vi.nextSegment = jQuery.extend({}, vi.details);

NOTE: The above is a shallow copy: any nested objects or arrays will be copied by reference - meaning any changes you make to vi.nextSegment.obj[prop] will be reflected in vi.details.obj[prop]. If you want a completely new object which is completely separate from the original, you will need to do a deep copy (pass true as the first parameter):

var vi.nextSegment = jQuery.extend(true, {}, vi.details);

To read up more on extend, see here.

Take a look at the post: What is the most efficient way to clone a javascript object

As per John Resig's answer:

// Shallow copy
var newObject = jQuery.extend({}, oldObject);

// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);

More information can be found in the jQuery documentation.

This worked better for me cloning an object using jQuery "parseJSON()" and "JSON.stringify()"

$.ajax({
  url: 'ajax/test.html',
  dataType: 'json',
  success: function(data) {
    var objY = $.parseJSON(JSON.stringify(data));
    var objX = $.parseJSON(JSON.stringify(data));
  }
});

Cloning data object in objX & objY are two different object, you do no have to mess up with the "by reference" problem

Gracias!

Another way to clone object is

newObj = JSON.parse(JSON.stringify(oldObj));

But be careful if it's contains dates. JSON.parse will return date.toString() instead of date in that case.

Cloning an object in JavaScript

Related

Recent Posts