Create Object in Object

Question

I'm confuse the way how Google Chrome developer tool console is displaying if the (A) is the actual object created in the loop, why are the (B) contains 3 objects?

Does it means (A) will contain 3 objects?

Demo: https://jsfiddle.net/LygmkgLm/

var test={}
for(var i=0;i<3;i++){
  test[i]={}
  test[i].y="111"
console.log("test",test)
}

Hover or click on the [i] in the console next to the output and you will know why. — Felix Kling
– Felix Kling, Commented Sep 25, 2015 at 5:32
This question is similar to: Why does the JS console show an element as present in an array, if that element is absent at the time of the console log call?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — dumbass
– dumbass, Commented Dec 26, 2024 at 22:55

Niels Keurentjes · Accepted Answer · 2015-09-25 05:32:11Z

4

You're misinterpreting the console output. It correctly and and as expected shows the increasing contents of the object within the loop, hence the 1, 2 and 3 members in the output. At the end however the variable 'test' is the fully filled object, and when you expand the first line it shows the contents at the time of expansion. Being the fully filled object with 3 children.

Your confusion arises from the fact that the logging does not store the state of the object at logging time.

answered Sep 25, 2015 at 5:32

Niels Keurentjes

42.1k9 gold badges103 silver badges138 bronze badges

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

2 Comments

Anand G Over a year ago

You explained it simply, though tried hard to put my words simple in answer. :) But I was trying to explain same point.

James Lei Over a year ago

Yeah, your explanation makes it easier to digest. It felt like a realtime logging but is simply more like a simulator, that's really efficient.

Anand G · Accepted Answer · 2015-09-25 05:40:31Z

Chrome console shows the final object in console. It shows whatever the values have gone through the object. So in console first it will show you

test Object {0: Object}

But when you extend, it will have three object which has passed through it.

test Object {0: Object}0: Object1: Object2: Object__proto__: Object

One thing to note that, at first iteration of the loop, you may see three object in console but only one object i.e.

test Object {0: Object}

is actually accessible. If you want to check actual state of object in each iteration, you have to clone it like below

var newObject = jQuery.extend(true, {}, test);

Here is the fiddle which will give you an idea of my points https://jsfiddle.net/qtdurtzc/

Collectives™ on Stack Overflow

Create Object in Object

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related