How many high-frequency interview questions have you stepped on that are simple and easy to step on the front end of the web?

01 Preface

As the market changes, the form and content of front-end interviews have undergone tremendous changes. In the past, at the front end of the interview, as long as you memorized stereotyped essays, you could handle it. Recently, more students go to interviews, and they will basically encounter written test questions. When communicating with the interviewer, they always ask some scene questions and logic questions.

Then I will also summarize for you the recent high-frequency interview questions that are simple and easy to step on!

02 The following code prints the result?

• Mainly examine var definition variable characteristics and asynchronous code

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

Result: A total of 5 times are output, and the value is 5 each time.

reason:

1. Because the setTimeout function is used in the loop to create five asynchronous tasks and put them in the event queue for execution.

2. When these tasks are executed, they all access the same variable i. Since the variables declared by var here are global variables, these five asynchronous codes share the same variable i.

3. When the loop ends, the value of variable i is 5, so when these asynchronous tasks are executed, they will all access and output the final value of variable i, which is 5.

• Investigate the existence of block-level scope for let-defined variables

for(let i = 0;i<5;i++){ 
    setTimeout(()=>{ 
        console.log(i)
    },0) 
 }

Result: A total of 5 times are output, and the values ​​are 0, 1, 2, 3 , and 4 respectively .

reason:

1. Because the variable i is declared with the let keyword in the loop, this will create a block scope.

2. For each loop iteration, a new variable i is created and bound to the corresponding loop iteration.

3. When the setTimeout function is executed, they can all access the variable i in their own iteration. Therefore, the value of i in the first asynchronous task is 0, the value of i in the second asynchronous task is 1, and so on. Each asynchronous task can only access the variable i in its iteration, so the sequential output results are 0, 1, 2, 3, 4.

The above two code blocks define variables with different keywords, resulting in completely different results. Although the changes are small, they are easily overlooked by interviewers. Recently, many students have stepped into this trap!

• Examining Variable Hoisting (Pre-parsing)

console.log(x); 
var x = 1;
function x() {}

Result: output fucntion x(){}

reason:

Before the js code is executed, the code will be pre-parsed, which is the so-called variable promotion.

Two parts will be pre-parsed, one is the variable defined by var, which only promotes the variable, but not the value; the other is the function defined by the declarative method, which will promote the entire function.

Then according to the above description, the process of pre-parsing at this time is as follows:

1. First upgrade the x variable defined by var, there is a sentence var x at the top of the code, and the value of x is undefined at this time;

2. Then upgrade the declarative function, because the function name is the same as x, so it is equivalent to assigning this function to the x variable.

The execution of console.log(x) will print the fucntion x(){} function only after the pre-parsing is completed.

Although there are only 3 lines of code, don't ignore them, the simpler the code, the easier it is to fall into the trap!

• Check this pointing

var name = "window";
var person = {
    name: "person",
    sayName: function () {
        console.log(this.name);
    },
};

function sayName() {
    var sss = person.sayName;
    sss();
    person.sayName(); //结果2是'person'
    (b = person.sayName)(); //3.结果是'window'
}
sayName();

Result: window, person, window.

reason:

1. Output window for the first time, because in this function, this points to the global object window. The variable sss stores a reference to the function person.sayName, and when the sss() call is called as a normal function, this will point to the global object.

2. Output person for the second time, because in this function, this points to the object person. By using the object method to call the sayName function, then this in the function points to the object that calls the function, that is, this in the function points to the person.

3. Output window for the third time, because in this function, this points to the object window. Because person.sayName is assigned to the variable b, and then the self-invocation of the function is executed. The self-invocation is to call b as a normal function, so this in the function points to window.

In general, the this keyword in a JavaScript function depends on the calling method of the function. If you understand the calling method of the function clearly, the execution results of these codes will be so easy~

03 Epilogue

That’s all for this article, I hope it will be helpful to friends who are interviewing or will be interviewing soon, looking forward to more similar interviews? You can leave a message to give your thoughts and suggestions!

make learning fun

Make programming easier