Last Updated: February 25, 2016
·
597
· sjimenez77

Most elegant way to clone a JavaScript object

I found the best way to clone any JavaScript object in this stackoverflow answer. This function is very useful when you are inserting nodes into DOM or removing them dynamically:

function clone(obj) {
    // Handle the 3 simple types, and null or undefined
    if (null == obj || "object" != typeof obj) return obj;

    // Handle Date
    if (obj instanceof Date) {
        var copy = new Date();
        copy.setTime(obj.getTime());
        return copy;
    }

    // Handle Array
    if (obj instanceof Array) {
        var copy = [];
        for (var i = 0, len = obj.length; i < len; i++) {
            copy[i] = clone(obj[i]);
        }
        return copy;
    }

    // Handle Object
    if (obj instanceof Object) {
        var copy = {};
        for (var attr in obj) {
            if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
        }
        return copy;
    }

    throw new Error("Unable to copy obj! Its type isn't supported.");
}

The author explains that when he had to implement general deep copying he ended up compromising by assuming that he would only need to copy a plain Object, Array, Date, String, Number, or Boolean. The last 3 types are immutable, so he could perform a shallow copy and not worry about it changing. He further assumed that any elements contained in Object or Array would also be one of the 6 simple types in that list.