I've made this jsfiddle and I can't explain why the following doesn't result in an array of 5 objects all with different id properties:

var arr = ["1", "2", "3", "4", "5"];
var clone = {"id": "0", "name":"Matthew"};
var arrObj = [];

var idArr = [];

while((a=arr.pop()) != null){ 
    clone.id = a;
    console.log(clone);
    arrObj.push(clone);
}

console.log(arrObj);

What I end up getting is the following in my console:

Object {id: "5", name: "Matthew"} (index):28
Object {id: "4", name: "Matthew"} (index):28
Object {id: "3", name: "Matthew"} (index):28
Object {id: "2", name: "Matthew"} (index):28
Object {id: "1", name: "Matthew"} (index):28

[Object, Object, Object, Object, Object]

When I open each of the 5 cloned objects they all have an "id" value of "1"

Why is this?

I've made this jsfiddle and I can't explain why the following doesn't result in an array of 5 objects all with different id properties:

var arr = ["1", "2", "3", "4", "5"];
var clone = {"id": "0", "name":"Matthew"};
var arrObj = [];

var idArr = [];

while((a=arr.pop()) != null){ 
    clone.id = a;
    console.log(clone);
    arrObj.push(clone);
}

console.log(arrObj);

What I end up getting is the following in my console:

Object {id: "5", name: "Matthew"} (index):28
Object {id: "4", name: "Matthew"} (index):28
Object {id: "3", name: "Matthew"} (index):28
Object {id: "2", name: "Matthew"} (index):28
Object {id: "1", name: "Matthew"} (index):28

[Object, Object, Object, Object, Object]

When I open each of the 5 cloned objects they all have an "id" value of "1"

Why is this?

• javascript
• arrays
• object
• while-loop

• 1 Objects are passed by reference, You're referring to the same object, again and again. You need to clone it. stackoverflow./questions/122102/… – elclanrs Commented Mar 8, 2014 at 1:11
• possible duplicate of Add values to an array – Felix Kling Commented Mar 8, 2014 at 1:29
• Good thread you referenced! I would have never found my answer though because that article has such a vague title and tags. Besides, this question address the caveats of referencing objects outside a loop and assigning values to them in the way described above. Brings a different perspective to a similar question, but not exactly a duplicate. – ganicus Commented Mar 8, 2014 at 2:30

3 Answers 3

clone is an object. In javascript, Objects are passed by reference, so you are not passing a different object in each index.

Here is something that will work

while((a=arr.pop()) != null){
    var clone = {"id": a, "name":"Matthew"};
    clone.id = a;
    arrObj.push(clone);
}

console.log(arrObj); 

Result:

Array [
    Object {id: "5", name: "Matthew"}
    Object {id: "4", name: "Matthew"}
    Object {id: "3", name: "Matthew"}
    Object {id: "2", name: "Matthew"}
    Object {id: "1", name: "Matthew"}
]

Objects in JS are assigned by reference. You need to duplicate it, with something like jQuery.extend.

var arr = ["1", "2", "3", "4", "5"];
var clone = {"id": "0", "name":"Matthew"};
var arrObj = [];

var idArr = [];

while((a=arr.pop()) != null){ 
    clone = $.extend({}, clone);
    clone.id = a;
    console.log(clone);
    arrObj.push(clone);
}

console.log(arrObj);

If your clone does not contain any function you can do this

while((a=arr.pop()) != null){
    clone = JSON.parse(JSON.stringify(clone));
    clone.id = a;
    console.log(clone);
    arrObj.push(clone);
}