javascript variable with true AND false value?

Question

I have a global dictionary that stores variables in my web app and noticed something very peculiar. When I attempt to change a boolean (true / false) variable, it appears to do it, but doesn't actually do it.

I re-created the issue with this simple jsfiddle. Using Chrome, launch the DevTools and then click on the "Push Me" button. In the console, you'll see that app['active'] shows {active:true}, but if you expand the dictionary by clicking the triangle to the left, it shows active:false. Huh?

I have a feeling this is some core javascript (jQuery?) concept I'm missing, but any help on:

How to make sure the variable is fully updated, and
Why this is happening

...would be appreciated.

because the console lies - in as much as you have to know what you are looking at - see the blue i - hover over it — Jaromanda X
– Jaromanda X, Commented Feb 1, 2018 at 1:22
Perhaps you should try echoing the variable to the page. Put it in a DIV InnterHTML, or send it to an alert box. — durbnpoisn
– durbnpoisn, Commented Feb 1, 2018 at 1:24
Updated the jsfiddle to put the variable to a <p>, but that doesn't really help me understand what's going on. — elPastor
– elPastor, Commented Feb 1, 2018 at 1:26
The console isn't static with respect to objects - if you want a snapshot of an object, you can (with many objects, but not all) simply console.log(JSON.stringify(yourobjecthere, null, 4)) - — Jaromanda X
– Jaromanda X, Commented Feb 1, 2018 at 1:36

Potato Salad · Accepted Answer · 2018-02-01 01:25:00Z

2

Before you log the variable, its original value was true. That is why the log shows true, but when you expand it, the console shows the updated value.

Try to put the log at the bottom, it will log with the updated value false.

Edit: Since you updated the fiddle, the html element will print true because you assigned the text to it before changing the value to false.

answered Feb 1, 2018 at 1:25

Potato Salad

4,6603 gold badges22 silver badges33 bronze badges

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

Comments

Nima · Accepted Answer · 2018-02-01 01:24:56Z

1

Your code is working as expected, the console log shows that it was set to true when logging, but since you set it to false immediately after, the expansion just shows you the updated value

answered Feb 1, 2018 at 1:24

Nima

1901 silver badge5 bronze badges

1 Comment

elPastor Over a year ago

Ok, that helps, thank you! Will accept this as the answer since it was the first.

user9152616 · Accepted Answer · 2018-02-01 01:53:08Z

0

There is not a standard way of how console.[method] should behave. In Chrome console.log is kind of async. In your case, if you expand the displayed value before clicking the button, and after click the button, then the displayed value will be only { active: true }

Chrome Dev Tools will display in the console the expanded value only when you requested it. That means, the value could have changed at the time you expand the object.

That's why console.log is not considered a reliable way for debugging.

console.log may act differently across Web Browsers (Firefox, Safari, Chrome, ...)

answered Feb 1, 2018 at 1:53

user9152616

Collectives™ on Stack Overflow

javascript variable with true AND false value?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related