Last Updated: February 25, 2016
·
905
· 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.

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.

Security insights from Cside