Why does alert(); run before console.log();

Question

How My Question is Different From Others

I am using ES6 syntax. The other questions I looked at uses ES5 syntax.

The Question

Answer 1

console.log("Hello!");
setTimeout(() => alert("Hi!"), 0);

Basically: console.log() is being called first, technically.^† However, the browser actually repainting itself or the console updating also takes a moment. Before it can update itself though, alert() has already triggered, which says "stop everything before I'm confirmed". So the message to console.log is sent, but the visual confirmation isn't in time.

Wrapping something in a 0 second setTimeout is an old trick of telling JavaScript "hey call me immediately after everything is finished running & updating."

---

† You can verify this by doing something like console.log(new Date().toString()); before the alert dialog, then waiting a few minutes before closing the alert. Notice it logs the time when you first ran it, not the time it is now.

Answer 2

Check test below, which will return from function on 999 cycle of for loop before window.alert function fires. In my case I did not see window.alert. This is because actually alert runs after loop of console.log's functions.

// Test function
const test = (br) => {
  for (let i = 0; i < 1000; i++) {
    console.log(i);
    // If br true and cycle #999 - return before
    // loop end and window.alert exec
    if(br && i === 999) return;
  }
  window.alert('Hello World!');
};

// Test
test(true);