Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

A good interview question is not easily difficult to the applicant, and can be based on the answer of the applicant to examine the depth of their skills. This is a good interview question. And there are things that we seem to know, but we don’t seem to know if we dig deeper. After a few years of front-end JavaScript development, when someone asks a question, experience seems to give the answer, but if they dig deeper or give examples, I’m usually left scratching my head. So today I want to take a closer look at some of the difficulties in JavaScript.

In case of variable promotion

As translated, variable promotion means that the variable and function declaration will move to the top of the code at the physical level, but it’s not really moving the code to the top, it’s optimizing it at compile time.

  • The answer is when and how to access declared variables in your application.
  • It is worth noting that Hosting is mentioned herevarThe word is related tolet 和 constIt’s a little different

So what is variable promotion?

function aFunc(){
    console.log(`I'm a function`);
}

aFunc()
Copy the code

There should be no confusion. Declare a function aFunc and call it aFunc

aFunc()
function aFunc(){
    console.log(`I'm a function`);
}
Copy the code

However, this is different, because the function is called without declaring the function and the code is run without any error, and the normal operation is due to the collieries

function anotherFunc(){
    var aVar = "I'm a var";
    console.log(aVar);
}

anotherFunc();
Copy the code
function anotherFunc(){
    aVar = "I'm a var";
    var aVar;
    console.log(aVar);
}

anotherFunc();
Copy the code

This code assigns a value to a variable before we declare it, and then prints it. We’re going to declare a variable until there’s no var and this variable is a global variable.

var aVar = "I'm a var";
function anotherFunc(){
    var aVar;
    console.log(aVar);
}

anotherFunc();
Copy the code

You might think that the output aVar here is undefined because

How to implement variable promotion

Execution Context

  • Build (compile)
  • To perform (execution)

It goes through two phases: compile and execute, first the compile phase, then the execute phase. Because today’s discussion is only about compile,

At compile time, the JavaScript engine examines the function and creates a space in memory for all variables and function declarations. Once the compile phase is complete, you can actually run your code during the subsequent execution phase. So you can see why when you run code, variables and function declarations work even after you access or call them. The JavaScript engine already stores them in memory for you, but there are some special cases, as shown in the following example

function imNotSure(){
    console.log(tellMe);
    var tellMe = "Doesn't matter"
}

imNotSure()
Copy the code

If you haven’t learned how to apply in case of variable promotion, it might raise a ReferenceError: TellMe is not defined this anomaly, if you have learned, may guess Doesnt matter actually the final result may make you unexpectedly is undefined this is why? Let me explain it to you.

Var tellMe = “Doesn’t matter” is divided into 2 steps, the first step is to declare the variable var tellMe and the second step is to assign the variable tellMe = “Doesn’t matter”, The variable promotion is only for var tellMe variable declarations, so the above code can be executed. You can imagine this.

function imNotSure(){
		var tellMe
    console.log(tellMe);
    tellMe = "Doesn't matter"
}
Copy the code
doesThisWork();

var doesThisWork = function(){
    console.log("does this work")}Copy the code

How can an exception be thrown

TypeError: doesThisWork is not a function
Copy the code

Where does var doesThisWork declare a variable, where does var doesThisWork declare a variable, The variable declaration defaults to undefined and then calls undefined because undefined is not a function so if you call it as a function it will raise TypeError.

Let’s take a look at one more example, and once again think about the output of console.log

function imNotSure(num){
    console.log(num);
    var num = 3;
}

imNotSure(10)
Copy the code

Maybe you said undefined, but the correct answer is 10, not undefined. To explain, let’s use variable promotion to transform the following code

function imNotSure(num){
  	var num;
    console.log(num);
    num = 3;
}
Copy the code

In fact, if you look closely, you can see that the function has an extra parameter num, so the above function can be regarded as

function imNotSure(num){
  	var num = 10;
  	var num;
    console.log(num);
    num = 3;
}
Copy the code

Var num = 10 = ‘0’; var num = 10 = ‘0’; var num = 10 = ‘0’

function imNotSure(num){
  	var num;
  	var num;
  	num = 10;
    console.log(num);
    num = 3;
}
Copy the code

I think you get the idea here.