How to clone a JavaScript object including getters and setters?

Question

In a project I'm working on, I need to clone an object to a variable.

I first tried - what seemed to be the most obvious solution - to do var obj2 = obj1, however I soon realized this makes obj2 refer to obj1, so whenever I set a property in obj2, the property is updated in obj1, too. Well, I can't have that.

So, I started searching around for ways to clone a object in JavaScript - I found multiple solutions for this, mainly var obj2 = JSON.parse(JSON.stringify(obj1)) - but that didn't keep all getters and setters I had defined for my object!

The now most obvious solution to me seems to firstly use the JSON trick above to make obj2 have all of obj1's properties, then loop through all of the objects getters and setters and add them back using Object.defineProperty(), but I have yet to find a way to get all getters/setters of an object.

Answer 1

At a practical level it's impossible to 100% accurately clone an object since the getters and setters (and indeed other functions) may be accessing lexically-scoped private variables via closures. Accessing such a method will reference the original object, not the clone.

If (and only if) that's not the case, you can just enumerate over all properties (even non-enumerable ones) found via Object.getOwnPropertyNames() and then for each name simply obtain the individual PropertyDescriptors with Object.getOwnPropertyDescriptor and then pass the resulting field to Object.defineProperty, e.g.:

function shallowClone(obj) {
    var clone = Object.create(Object.getPrototypeOf(obj));

    var props = Object.getOwnPropertyNames(obj);
    props.forEach(function(key) {
        var desc = Object.getOwnPropertyDescriptor(obj, key);
        Object.defineProperty(clone, key, desc);
    });

    return clone;
}

In ES2017 you can do this instead:

function shallowClone(obj) {
    return Object.create(
        Object.getPrototypeOf(obj), 
        Object.getOwnPropertyDescriptors(obj) 
    );
}