I heard you want to interview for front-end?

Golden Three Silver Four Season, the front-end has been a hot field in recent years, and the atmosphere is particularly strong. My friend Xiaowei has been interviewing like crazy recently, and has met many interesting interviewers and interesting interview questions. I’m here to help. Let me paraphrase this troublemaking boy.

The following is a story from a friend of mine, it’s really not me.

for (var i = 0; i < 5; i++) {
  console.log(i);
}

"Xiaowei, tell me what these lines of code will output?"

When the interviewer typed these lines of code in Sublime, I was a little confused. Clam? Isn't this the simplest loop? Is there a trap? I thought about it. This seems to be very similar to the closure question I saw. Did the interviewer not finish writing it? It's poisonous.

"It should output 0 to 4 directly...", I said weakly.

"Yes, don't be nervous. There are no traps in this question. I just write it casually."

(Excuse me? Interviewer, are you here to make fun of me? I'm scared to death! )

"Then what are you looking at the output of these lines of code?"

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000 * i);}

Um, what the hell, why is it not the closure question I have memorized so many times? Let me think. setTimeout will delay execution, so when console.log is executed, i has actually become 5. Yes, that's it. How can it be so difficult for me to do something so simple?

"It should start to output a 5, and then output a 5 every second, a total of 5 5s."

"Yes, how should it be changed to output 0 to 4? "

Finally I'm familiar with it. Just add a closure and it's solved. It's stable!

for (var i = 0; i < 5; i++) {
  (function(i) {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
}

"Very good, can you tell me what will happen if I delete this i?"

for (var i = 0; i < 5; i++) {
  (function() {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
}

"In this case, there is no internal reference to i. In fact, it will It becomes output 5. "

"Very good, let me change it for you and see what the output will be?"

for (var i = 0; i < 5; i++) {
  setTimeout((function(i) {
    console.log(i);
  })(i), i * 1000);
}

Huh? What the hell, what is going on, let me think about it. Here an immediate execution function is passed to setTimeout. Well, setTimeout can accept functions or strings as parameters, so what is the immediate execution function here? It should be undefined, which is equivalent to:

setTimeout(undefined, ...);

And the immediate execution function will execute immediately, so it should be Output immediately.

"It should output 0 to 4 immediately."

"Oh, not bad. The last question, do you know Promise?"

"It's okay. ..."

"OK, then try this question."

setTimeout(function() {
  console.log(1)
}, 0);
new Promise(function executor(resolve) {
  console.log(2);
  for( var i=0 ; i<10000 ; i++ ) {
    i == 9999 && resolve();
  }
  console.log(3);
}).then(function() {
  console.log(4);
});
console.log(5);

WTF! ! ! ! I want to be quiet!

This question should examine the running mechanism of my JavaScript. Let me sort out my thoughts.

First encounter a setTimeout, so a timer will be set first, and after the timer ends, the function will be passed to the task queue, so 1 will definitely not be output at first.

Then there is a Promise, the function inside is executed directly, so it should output 2 3 directly.

Then, the then of Promise should be placed at the end of the current tick, but still in the current tick.

Therefore, 5 should be output first, and then 4.

Finally, the next tick is 1.

“2 3 5 4 1”

“Okay, let’s wait for the next round of interviews.”

So easy! Mom no longer has to worry about my interviews.