Updating JSON object in setTimeout Issue

Question

var state = {
  item1 : {
    text : "hi hi"
  }
}

var i = 5;

function test() {
  state.item1.text = i;
  console.log(state)
  i--
  if (i >= 0) {
    setTimeout(test, 1000);
  }
}

test();

There is a very weird issue where when updating this json object it does not show the correct value. Any help is much appreciated. If I were to console log console.log(state.item1) it would print the correct value. But console.log(state) shows the incorrect value.

Codepen Example http://codepen.io/chrisburgin95/pen/xEzvWz

What do you think is the "correct value" and what are you seeing? The output in the Codepen looks correct to me. — user94559, Oct 13 '16 at 18:37

score 2 · Answer 1 · answered Oct 13 '16 at 18:38

console.log() does not store a copy of the object. Instead, when you expand nested properties, it will read the current value of each property.

Since your code mutates the same object, expanding the logged objects after all of the timeouts fire will show the final value.

score 2 · Answer 2 · edited May 23 '17 at 12:06

Objects in Javascript are passed by reference. When the item is printed to the console, you will see the object in its current state, rather than the state it was in when it was printed out. If you were to expand the object in the console, you would see that the text value for state.item1 is 0 for each item logged.

This answer has some good conversation on this subject: Javascript by reference vs. by value

Updating JSON object in setTimeout Issue

2 Answers2