Why is my while loop getting logged this way?

Question

Why is my while loop getting logged this way? Is it because the internal workings of V8 and SpiderMonkey differ?

var counter = 0;
while (counter <= 10) {
    console.log(counter);
    counter++;
}

Note: Try the above code in a Chrome and a Firefox console.

These are the results I got while executing the above code.

In Chrome:

In Firefox:

Why are the logged results different? What's going on here?

The title of your question is vague and will be difficult for others to find (and help contribute answers to). Consider rewording your question to define what the "it" is, while also moving your guess from the title to the body of the question. It's also better to copy & paste vs. link to external images. — ives, Mar 08 '20 at 16:38
But The Context here needs to be explained with the Image. Sorry though I'm new to Stackoverflow! — GiftedGeek, Mar 08 '20 at 16:41
@GiftedGeek just wanted to let you know that you can copy an image into the clipboard and then just paste it right into the question itself, as is displayed now after the question was edited. That is the preferred method, so people don't have to navigate away from the question and then back in order to understand it. — Stephen M Irving, Mar 09 '20 at 03:27

Stephen M Irving · Accepted Answer · 2020-03-15T18:31:19.317

Yes, the internal workings differ. I believe the difference you are noticing here is actually because in WebKit browsers, like Chrome and Safari, console.log is asynchronous, whereas in Firefox (and Node.js) it is strictly synchronous.

I first read about this in the book Async JavaScript by Trevor Burnham. You can find the relevant section of the book by going to this Google Books search link for Async JavaScript and the relevant page should be the first response at the top.

WebKit's console.log has surprised many a developer by behaving asynchronously.

To help understand what is going on, try simply entering this into the console:

var counter = 0
while (counter <= 10) { counter ++ }

You will see that this will naturally return the value of 10 by itself. This is just the final value of counter at the end of the while loop. So, because console.log is synchronous in Firefox, the console.log statements start at the same time that the return value for the while loop, 10, is returned. Because it is asynchronous in Chrome, the while loop's return value waits to return until all the console.log invocations are complete. The difference in the synchronous nature of console.log between Chrome and Firefox is changing whether this value is returned at the same time or after all the console.log calls. That is the essence of the difference you noticed.

If you are still confused, I recommend reading up on the concept of asynchronous code. It is an intermediate-level concept, so it is OK if you are just starting out and you don't fully grasp it yet. The book quoted above is a great resource, but you can start learning the basics on the Mozilla Developer Network. Here are some resources for you from MDN that serve as primers on asynchronous programming:

Awesome, Thanks Stephen for clearing this out for me, appreciate it! Now i know a little more about JS Engines. BTW JavaScript is FUN! Gonna dig more deeper!!! — GiftedGeek, Mar 08 '20 at 19:42
Happy to help @GiftedGeek! You're right, JavaScript *is* fun. It is a language with a ton of interesting features, and it is getting better all the time. Glad I could be of assistance in nudging you along the path in your JavaScript journey. — Stephen M Irving, Mar 08 '20 at 22:28

Why is my while loop getting logged this way?

1 Answers1