Cloning objects in Javascript

Question

I try to create a simple example in order to see what is the problem of cloning in JS and what function I can use in order to make it work properly. I try to use an example that I have an object l with some variables and assign this object to k (l=k) expecting that when I will type l.age and k.age I will see something different in order to see how the cloning is working. However, when I test these 2 calls in console I can't see any problem, both of them have the same value. Is there anything I make wrong in order to see the cloning issue in JS?

Here what I try to do. I try to have an object l:

<script>
    var l = {
        firstName : "John",
        lastName  : "Doe",
        age       : 50,
        eyeColor  : "blue"
    };

    k = l;
</script>

My problem is not only I try to use a cloning method however I try to understand the problem on hand first before I go a step forward on how to solve it using an efficient cloning method.

possible duplicate of [What is the most efficient way to clone an object?](http://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-clone-an-object) — blgt, Jul 06 '15 at 10:01
Before this is closed, `k=l` is just assign `l` to `k`, not cloning. As the `=` notation only clones when source type is primitive types. — fuyushimoya, Jul 06 '15 at 10:02
this is not a duplicate question. OP wants to **see** the cloning issue. Check my answer below, which addresses the question properly. — Mi_Onim, Jul 06 '15 at 10:29

score 0 · Answer 1 · answered Jul 06 '15 at 09:58

0

Here you are:

var l = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

var clone = {};
for (var name in l) {
  clone[name] = l[name];
}
alert(clone.firstName);

Hope this helps.

answered Jul 06 '15 at 09:58

hungndv

2,121
2
19
20

Be sure to consciously decide if you only want to clone "own" properties. – Ted Nyberg Jul 06 '15 at 10:02
Note that `for ..in` also iterates over non-property fields of object prototype. – TaoPR Jul 06 '15 at 10:03

score 0 · Accepted Answer · answered Jul 06 '15 at 10:06

0

When you assign 'l' to 'k', it assigns a reference to 'l'. Now, 'l' and 'k' points to the same object. To see the cloning issue, change a property of object 'l' e.g.

l.age = 60;

Now, if you try to log the value of k.age in console, you will see that it prints 60, but not 50. If the object was properly cloned, you would expect it to print 50.

answered Jul 06 '15 at 10:06

Mi_Onim

412
2
12

Thank you. You understood what I try to test before I use a cloning method efficiently. However my problem is that I can't run an example in order to understand the problem of cloning. I have the code as I have in question. I run it in Chrome and using the console in inspect element I type first l.age and k.age and I take back 50 in console after that I type l.age = 60; and after that if I type k.age I take 60. What am I doing wrong and I can't see the problem or wrong cloning? Please if it is possible can you provide a full example? – Demi Kalia Jul 06 '15 at 10:17
You mean that if the cloning was right I would expect that the k.age will not have any affection of the change in l.age change value? – Demi Kalia Jul 06 '15 at 10:22
let me ask you a question. From you understanding of cloning, what do you expect to see the result of **k.age** after assigning **l.age = 60** – Mi_Onim Jul 06 '15 at 10:23
yes, now you understood. If cloning is done right, changing the value of l would not affect k. – Mi_Onim Jul 06 '15 at 10:24

Cloning objects in Javascript

2 Answers2