A simple way to clone a JavaScript object is by creating a new instance of the original object...pretty simple right? All you have to do is something like so:

var myObj = { FirstName : 'John', LastName : 'Doe' };

var myNewObj = myObj;

Wrong ! This will create a reference type object that can (and more than likely will) drive you crazy...for example, if you did what I did above, then when you change a value in myNewObj, the same property will be updated with the new value in myObj. Yikes!

Part 1

The best way to create a cloned copy of an object is by using the "constructor()" method. Once you do this you can iterate through the original object's properties and then assign them to the newly created object.

The following method illustrates this concept. Please note that there is an additional parameter that specifies whether or not the cloning is to be done on properties that are objects in and of themselves. If a deep clone is being requested, then the method simply recursively calls itself and walks all the way down the object stack.

function clone (obj, deep) {
  var objectClone = new obj.constructor();
  for (var property in obj)
    if (!deep)
      objectClone[property] = obj[property];
    else if (typeof obj[property] == 'object')
      objectClone[property] = obj[property].clone(deep);
    else
      objectClone[property] = obj[property];
  return objectClone;
}

You can call this method like so:

var myObj = { FirstName : 'John', LastName : 'Doe' };

var myNewObj = clone(myObj, false);

It's worth nothing that the key to making this work is the new obj.constuctor() statement. This creates a new JavaScript object that is no longer a reference to the original object, but that will be constructed the exact same.

Part 2

Now, if you're feeling really ambitious, then you can modify the method a bit by getting rid of the "obj" parameter, and then associating the method with the grand-daddy of 'em all: JavaScript base "Object" class...see below:

function clone (deep) {
  var objectClone = new this.constructor();
  for (var property in this)
    if (!deep)
      objectClone[property] = this[property];
    else if (typeof this[property] == 'object')
      objectClone[property] = this[property].clone(deep);
    else
      objectClone[property] = this[property];
  return objectClone;
}

Object.prototype.clone =  clone;

Notice the method now uses the "this" keyword (i.e. var objectClone = new this.constructor(), this[property], etc). This is because the method will now be available for any JavaScript object...pretty cool eh.

You can use this prototype like so:

var myObj = { FirstName : 'John', LastName : 'Doe' };

var myNewObj = myObj.clone(false);

Happy coding!!