0

I was experimenting with JavaScript and I ended up with this snippet:

var num = new Number(20);

function f(n) {
n["foo"] = "bar";   
} 

// the printed object has a "foo" property.
console.log(num, f(num));

I never thought the printed object would have the foo property added to it in the f(num) call, because f(num) comes after the num in my console.log (I am using Chrome).

But that happened and my immediate thought was that console.log was sort of running all the arguments and printing out the results or something, so I went over to MDN's documentation for console.log, but there wasn't anything about that.

Then I stumbled upon this StackOverflow question.

The second and third questions say that console.log is a little late when used with objects, but in that case, the printed object in the following snippet should have had a foo property as well (since it is a Number object), it doesn't: 

var num = new Number(20);

function f(n) {
n["foo"] = "bar";   
} 

// no "foo" property
console.log(num);
f(num);


The accepted answer to the question I mentioned pretty much says what the second and third answer say, except, it also states that the behavior is console or browser dependent. So, how do different browsers treat this sort of thing nowadays (that question is from 6 years ago) ? Is console.log asynchronous for extremely large objects only ? And the original question, why does the num in my first example get printed out with a foo property ?

doubleOrt
  • 2,407
  • 1
  • 14
  • 34
  • Apparently `console.log()` is "sort-of" asynchronous in Chrome. Similar issue occurred the other day: https://stackoverflow.com/questions/47046935 – Obsidian Age Nov 01 '17 at 20:25
  • That question hasn't been answered either, it is sort of demoralizing. But, if it is asynchronous, then when is it asynchronous ? As I have shown in the second example, it is not asynchronous where it is supposed to be (according to an answer to a question I linked to). – doubleOrt Nov 01 '17 at 20:31
  • @Taurus It's not really asynchronous, but inspecting objects might be done asynchronously. See [here](https://stackoverflow.com/a/23392650/1048572) for details. – Bergi Nov 01 '17 at 22:17

1 Answers1

2
// the printed object has a "foo" property.
console.log(num, f(num));

This behavior is not specific to console.log. All of the arguments to a function are evaluated (in order) before the function starts running. Since f(num) is an argument to console.log, it is called before console.log gets a chance to look at num.

In essence, what's going on is:

var arg1 = num;
var arg2 = f(num); // modifies num in place, so arg1 changes as well
console.log(arg1, arg2);
  • Great! It is thid subtle and important pieces of information that I am after. Exactly what I was looking for. – doubleOrt Nov 01 '17 at 21:30
  • Now that I think of it, it feels really natural, I wouldn't have been confused if I were thinking of "console.log" as a normal function. Actually, it is a longer story than that as well. – doubleOrt Nov 01 '17 at 21:33