JavaScript: How to make a copy of a object?

Question

I am trying to create a copy of object a, without having to manually enter its property's into object b. In this code, b simply refers to a. I want to create a new version of a, so that when I add a property to b, it is not visible through a.

var a = new Object(); // create an empty object
var b = a;             // now b refers to the same object
b.test = 1;            // add a new property to b
alert(a.test);         // => 1: the new property is also visible through a
a === b;               // => true: a and b refer to the same object

`store the value(s) of a in b` should be "assign a reference to the same object to `b`". — RobG, Feb 09 '14 at 20:08
Do you really intend `a` to be a function? Your comment in that line suggests otherwise. — Felix Kling, Feb 09 '14 at 20:28
"b refers to the same object" implies that "add a new property to b" equals "add a new property to a". — , Feb 09 '14 at 20:55

score 7 · Answer 1 · answered Feb 09 '14 at 20:14

7

In plain JavaScript you could do:

var copy = JSON.parse(JSON.stringify(myObj));

See: http://jsfiddle.net/kukiwon/AyKdL/

answered Feb 09 '14 at 20:14

Kukiwon

1,222
12
20

2

This of course doesn't work with functions. – Felix Kling Feb 09 '14 at 20:25
1

@FelixKling, correct, but then the question should be changed. – Kukiwon Feb 09 '14 at 20:27

score 3 · Answer 2 · answered Mar 03 '14 at 05:34

How about using deep copy pattern like below. This is from "Javascript Patterns" of Stoyan Stefanov.

function extendDeep(parent, child) {
    var i,
        toStr = Object.prototype.toString,
        astr = "[object Array]";

    child = child || {};

    for (i in parent) {
        if (parent.hasOwnProperty(i)) {
            if (typeof parent[i] === "object") {
                child[i] = (toStr.call(parent[i]) === astr) ? [] : {};
                extendDeep(parent[i], child[i]);
            } else {
                child[i] = parent[i];
            }
        }
    }
    return child;
}

if (parent.hasOwnProperty(i) && !child.hasOwnProperty(i)) {.... } If you do not want to overwrite the properties was that there — zloctb, Jul 04 '14 at 10:10

score 2 · Accepted Answer · edited May 23 '17 at 11:56

You have to be careful when working with Javascript objects and the equals (=) operator. This operator does not create a copy of the object, but only assigns a reference to the original internal object.

That means that in your case, b does not store the value(s) of a, but after calling

var b = a;

both a and b point to the same object in memory! Therefore, changing any properties of b also changes them for a (again: they're the same object internally).

To create a copy of an object you have to manually copy every property of it:

var a = {};  // create an empty object
a.prop1 = 1; // set a property of this object
var b = {};  // create another empty object
b.prop1 = a.prop1; // copy all properties (in this case: only one) of a to b
b.test = 1;  // add a new property to b
alert(a.test); // => undefined, as .test is only defined for b
a === b; // => false, as a and b are different objects.

An elegant solution to the problem of cloning JS-objects can be found here: How do I correctly clone a JavaScript object?

*"`a` isn't actually an object"* It is! Functions are objects too. — Felix Kling, Feb 09 '14 at 20:27

score 2 · Answer 4 · answered Feb 09 '14 at 20:17

In your example, "a" is just a function object and you are just creating additional pointers.

Just create a new instance of them

var a1 = new a();
var b1 = new a();
a1.test = 1;
b1.test = 2;

a1 != b1

The advantage to using a function as a Class is the utilize object.prototype, inheritance and instance checking. If you want just a data store then just change it to a generic object

var a = {};
var b = {};
a.test = 1;
b.test = 2;

"JavaScript the Good Parts" is an absolute must

http://www.youtube.com/watch?v=hQVTIJBZook

http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742

JavaScript: How to make a copy of a object?

4 Answers4

Linked