Javascript object assignment's strange behavior

Question

I am new to javascript (new to programming overall, really). And I encountered this behavior of for/in loop that I don't quite understand. The following pieces of code were run with $node command in console.

code_0:

var result = {};
var list = ['A', 'B', 'C'];

for(var index in list){
    var id = list[index];
    result[id] = {};
    result[id]['name'] = id;
}

console.log(result);

result_0:

{ A: { name: 'A' }, B: { name: 'B' }, C: { name: 'C' } }

code_1:

var result = {};
var list = ['A', 'B', 'C'];
var INIT = {'a': 0, 'b': 0, 'c': 0,}

for(var index in list){
    var id = list[index];
    result[id] = INIT;
    result[id]['name'] = id;
}

console.log(result);

result_1:

{ A: { a: 0, b: 0, c: 0, name: 'C' },
  B: { a: 0, b: 0, c: 0, name: 'C' },
  C: { a: 0, b: 0, c: 0, name: 'C' } }

I can understand why code_0 would give result_0. But result_1 is what I don't understand. I expected result_1 to be:

{ A: { a: 0, b: 0, c: 0, name: 'A' },
  B: { a: 0, b: 0, c: 0, name: 'B' },
  C: { a: 0, b: 0, c: 0, name: 'C' } }

What's the difference between code_0 and code_1? Why would code_1 give result_1?

EDIT: * Add tags related to the question. * Change title. (Title used to be about for/in loops)

You're assigning the same object to A, B and C, so naturally they'll show the same data. — user1106925
– user1106925, Commented Dec 31, 2015 at 4:09

jfriend00 · Accepted Answer · 2015-12-31 04:25:41Z

6

Objects are assigned by reference (not by copy) in Javascript. This is a common point of confusing and learning when first getting up to speed in Javascript.

In your code_1 block, this line of code:

result[id] = INIT;

is assigning a reference to the exact same object in every iteration of your loop, thus they all point to the same object and will all have the same properties (since they are all the same object). So, any further changes to result[id] are really just changes to INIT which is the same object that all the slots in result are using so they all appear to change at once.

In Javascript, if you want a separate copy of an object in each assignment, then you have to create a new object before assigning. In the latest browsers, you can use Object.assign() to copy enumerable properties from one object to another.

Using Object.assign(), here's one way around the issue that makes a copy of the object before assigning it:

var result = {};
var list = ['A', 'B', 'C'];
var INIT = {'a': 0, 'b': 0, 'c': 0,}

for(var index in list){
    var id = list[index];
    // make a new object that is a copy of INIT
    var obj = Object.assign({}, INIT);
    obj.name = id;
    // put that new object into result[id]
    result[id] = obj;
}

console.log(result);

For older browsers, there's a polyfill for Object.assign() here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Here's a little simpler example:

 var items = {a:1, b:2, c:3};

 var list1 = items;
 var list2 = items;

 list1.a = 10;
 console.log(items);               // {a:10, b:2, c:3}
 console.log(list1);               // {a:10, b:2, c:3}
 console.log(list2);               // {a:10, b:2, c:3}
 console.log(list1 === items);     // true, they are the same object
 console.log(list2 === items);     // true, they are the same object

You can see that all three variables show the same values because they all point to the exact same object so modifying the object via any one of the three variables make the exact same change.

edited Dec 31, 2015 at 4:25

answered Dec 31, 2015 at 4:09

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

markasoftware Over a year ago

but the id that he is assigning to name is not from INIT. Are you saying that when he adds the name property to the object, it's actually getting added to INIT (because it's a reference)? Or am I understanding something wrong?

jfriend00 Over a year ago

@Markasoftware - INIT is the same object in every assignment so he's just doing INIT.name = id which just overwrites the previous id assignment and then doing result[id] = INIT; which just puts the same object into every result.

Collectives™ on Stack Overflow

Javascript object assignment's strange behavior

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related