CODEWITHSUNDEEP
console
Gibran Shah
Gibran Shah

Reputation: 383

Is console.log asynchronous?

I had an incident in my Angular 6 application the other day involving some code that looked like this:

console.log('before:', value);
this.changeValue(value);
console.log('after:', value);

changeValue() modifies value in some way. I expected to see the unmodified value in the console before the call to changeValue() then the modified value after. Instead I saw the modified value before and after.

I guess it proved that my changeValue() function worked, but it also indicated to me that console.log() is asynchronous--that is, it doesn't print out the value to the console right away; it waits for a bit... and when it finally does print the value, it's the value as it is at that moment. In other words, the first call to console.log() above waited until after the call to changeValue() before printing, and when it did, the value had already changed.

So am I correct in inferring that console.log() is asynchronous. If so, why is that? It causes a lot of confusion when debugging.

Upvotes: 0

Views: 1015

Answers (1)

grawity_u1686
grawity_u1686

Reputation: 16237

No, console.log() is synchronous. It's actually your changeValue() function that doesn't work the way you think.

First, JavaScript doesn't pass variables by reference, but by pointer to object (as do many other languages). So although the variable value inside your function and the variable value in the outer scope both hold the same object, they are still separate variables. Mutatin the object affects both variables, but direct assignments to one variable do not affect the other. For example, this obviously wouldn't work:

function changeValue(x) { x = 123; }

Second, in JavaScript the shorthand assignment a += b does not mutate the existing object stored in a. Instead it works exactly like a = a + b and assigns a new object to the variable. As mentioned above, this only affects the variable inside the function, but doesn't affect the one outside, so your changes are lost after the function returns.

More examples:

function willwork(obj) { obj.foo = "bar"; }
function willwork(obj) { obj["foo"] = 1234; }
function willwork(obj) { obj.push("foo"); }

function wontwork(obj) { obj = "foo"; }
function wontwork(obj) { obj += 123; }
function wontwork(obj) { obj = obj + 123; }

Upvotes: 1

Related Questions