When I run this code, all objects in the array are the same.
var obj = {
a: { b: 0 }
}
var arr = [];
for(i = 0; i < 10; i++) {
arr.push(obj);
obj.a.b += 5;
}
for(i = 0; i < arr.length; i++) {
document.writeln(arr[i].a.b);
}How can I set the values of the object in the array to the increments? Like:
[
{ a: { b: 5 }},
{ a: { b: 10 }},
{ a: { b: 15 }},
// ...
]
I created a benchmark test for Object.assign vs JSON.stringify for the deep clone.
obj is a reference to an object, so what you are really doing is pushing the same reference to an object over and over again.
You end up with an array of the same reference to an object. if you want an array of different objects, you need to make a copy of the object before pushing it, you can accomplish it by
arr.push({...obj})
or
arr.push(Object.assign({},obj})
arr.push({...obj});arr.push(Object.assign({},obj))Chrome console don't show full object for console.log(obj); but only { a: {...} } - and when you click on "triangle" to show object content chrome console use actual object value.
StackOverflow snipped show full object content immediately on each iteration - but chrome only keep reference to object and look on him deeper only when user click on "triangle" in console.
You should make nested(deep) copy (popular way is for example JSON.parse(JSON.stringify(obj)) but you can find better ways on StackOverflow) of object at current loop iteration and give that deep copy to console.log(copyObj); . For example:
var obj = {
a: {
b: 0
}
}
for (i = 0; i < 10; i++) {
obj.a.b += 5;
console.log('log obj.a.b = ' + obj.a.b);
console.log( JSON.parse(JSON.stringify(obj)) );
}
The arr.push(obj) push only reference to the same object obj to array, use below code to add separate copy of obj (reference to copy to be precise) as new array element:
arr.push( JSON.parse(JSON.stringify(obj)) )
This has to do with value versus reference.
Stackoverflow turns the value of the object into a string before logging. When you then change the value of the object the string doesn't change.
The chrome logs do it a bit different, they log the actual value of the object by looking at a certain point in memory, when you then edit that object the log will also update because it still points to that part of the memory.
If you'd like to also turn it into a string you could use JSON.stringify(obj);
obj.a.b += 5;to the top ofconsole.log's as you did hereJSON.parse(JSON.stringify(obj));to properly get a "snapshot" of the object, by losing the reference to the original one (arrays are objects, in javascript). That said, simply push a new copy of the object to avoid reference issues, like this: jsfiddle.net/m4pqxo1d/4Object.assign({}, obj)is for shallow object copy - in your benchmark you use it for deep copy (which is not good because - for large object you will need to write a lot of code). On stack overflow you can find alternative apprach to object deep copy e.g here stackoverflow.com/q/122102/860099.