Deeply explore the implicit variable declaration in JS

Time:2019-10-8

Two days ago, after a lot of in-depth discussions among netizens, I finally had a relatively explanatory general logic. Then I carefully studied the relevant points, and incidentally studied the implicit variables in js.

  • The implicit variables mentioned in the following articles refer to variables that are not defined with var, let, const and other keywords.
  • The var variables mentioned in the following articles refer to variables defined with VaR declarations.

When we encounter implicit variables, when we go to Baidu, we will see such a sentence: implicit variables are global variables and implicit variables are global variables in functions, but var variables are local variables in functions. So let’s see the difference between implicit variables and VaR variables in detail. Let’s explore the area of implicit variables and VaR variables through some codes. Farewell.

1. The difference between implicit variable and VaR variable

Code 1:

Var variables:

console.log(a);//undefined
var a = 100;

Code 2:

Implicit variables:

console.log(a);//Uncaught ReferenceError: a is not defined
a = 100;

Looking at the above code, we find that VaR variable a has an elevation of variable declaration, that is, code 1 corresponds to the following code:

var a;
console.log(a);
a = 100;

This is the same as the VaR variable we have known before. The promotion of variable declaration or that of variable declaration will not change. If you want to know more about variable promotion here, you can take a look at this article. Then let’s continue to look at code 2. Implicit variables will report errors when printing variable a in front. Can we guess if there is no variable escalation in implicit variables? Of course, it seems that no one has ever said that implicit variables have declaration escalation before. Maybe I would like to think that implicit variables are global variables and there is declaration escalation. Then we continue to see if the implicit variables declared in the code block are the same as the implicit variables globally defined above, and there is no declaration escalation.

Code 3:

The var variable in the function:

console.log(a);//Uncaught ReferenceError: a is not defined
function b() {
    console.log(a);//undefined
    var a = 100;
}
b(); 

Code 4:

Implicit variables in functions:

console.log(a);//Uncaught ReferenceError: a is not defined
function b() {
	console.log(a);//Uncaught ReferenceError: a is not defined
	a = 100;
}
b();

Let’s look at code 3 and code 4 above. We find that code 3 errors on the first line, because the variables defined by VaR in the function are local variables, which are not accessible globally. Then we annotate the first line and run it again. We find that the print of a on the third line is undefined, which proves that VaR variables have been upgraded in the variable declaration in the function. Let’s look at code 4, which defines an implicit variable in a function, and then the first line will report an error. A is undefined. Then we annotate the first line and run it again. We find that the third line is undefined. Does this mean that implicit variables do not have variable declarations to enhance this operation? In other words, implicit variables are similar to functions in terms of declaration and definition? Together, only by executing this line of code can we refer to access this variable. Here we recommend an article on the life cycle of a variable, which can be read carefully. Then we will look at the VaR variable and the implicit variable defined in the code block:

Code 5:

The var variable in the code block:

console.log(a);//undefined
{
	console.log(a);//undefined
	var a = 100;
}

Code 6:

Implicit variables in code blocks:

console.log(a);//Uncaught ReferenceError: a is not defined
{
	console.log(a);//Uncaught ReferenceError: a is not defined
	a = 100;
}

Then let’s look at the VaR variable in the code block, where there is a declaration escalation, and then there is no declaration escalation for the implicit variable, so the access above will be wrong.

  • Conclusion: Based on the above series of explorations, we can basically conclude that implicit variables do not have variable declaration promotion.

2. Function declaration promotion in code block

After exploring the implicit variables above, let’s take a look at the function declaration enhancement in the code block:

Code 7:

console.log(a);//undefined
{
	function a(){};
	console.log(a);//ƒ a(){}
}
console.log(a);//ƒ a(){}

Looking at the above code, we all know that function is the “first-class citizen” in js, and the priority is the highest. In the above code, whether the function has been promoted to the outside of block scope? If I say that it has been promoted, you will find an error when you call it from the outside of block scope. A is not a method:

a();//Uncaught TypeError: a is not a function
{
	function a(){};
}

Then before that, I came to the conclusion that the function declaration promotion did not upgrade the function to the outermost level. So we should ask that the print a on it is undefined. Why is not the error a undefined? According to the description of Mr. Ruan Yifeng’s article, we can draw a conclusion:

 

  • Functions defined within a block scope are promoted to the top in the block scope, and then declare a variable with the same name at the outermost level, similar to var, with the default value undefined.

3. The existence of implicit variables and functions with the same name in code blocks

Then let’s go back and see what happens when there are implicit variables and functions with the same name in the code block:

First, let’s look at the code above. At this point, if we print a and B on the outermost layer, you will find that it is undefined:

Code 8:

console.log(a,b);//undefined undefined
{
	console.log(a);//ƒ a() {}
	function a() {};
	a = 50;
	console.log(a);//50
}
console.log(a);//ƒ a() {}
{
	console.log(b);//ƒ b() {}
	b = 50;
	function b() {};
	console.log(b);//50
}
console.log(b);//50

If we look at the above code, you will find that the front print a and B are undefined. By exploring the implicit variables and function declarations, we can know that both a and B are defined by function declarations. Besides, we can see from the side that vscode has a function to see who defines the variables. Let’s see:

At this time, we find that the top a and B functions are defined by vscode. According to our research above, since there is no elevation of variable declaration in implicit variables, it can only be defined by function. Then we can confirm this by exploring functions. At the same time, with the results of vscode analysis, we can confirm this point. First, we can determine the outermost global. A and B are defined by functions. Then let’s go on and see that the initial print undefined for a and B is OK.

Then let’s look at the result of the sixteenth row printing on the above picture. Why is the a method? By debugging the lines in line with my previous article, you will find that the A in the code block is actually restricted to the block scope and not the global variable. In fact, a = 50 is not an implicit variable, because a has been defined by the function, then a = 50, that is, before. Defined variables are assigned, so at this point

A = 50 is not an implicit variable, and then assigns a value to the previously defined a, prints it to 50 in the code block, and then prints the result of block scope as method a. Through the step-by-step debugging of the code, you will find that the global a, only when the code of method a is executed, will the value of block scope assignment be synchronized to the global.

Step 1: At this point, the global a is undefined, and at this time a is defined as a function in the code block:

 

Step 2: At this point, we find a block scope, because the function in the code block is ahead of time. At this time, the value of a in the code block is a method, and the global a is undefined. It’s no problem.

 

Step 3: At this point, we will find that when the code of function a is finished, both a in block scope and a in global scope become a method. That is to say, to synchronize the value of a in block scope to the whole, the code must be executed to the next line of defining a method. Otherwise, the value of a in code block will not synchronize to the outside of code block.

 

Step 4: At this point, we will find that a in block scope becomes 50, and the global a method is still a method. According to the conclusion of the previous step, if we execute method a again after a = 50 line of code, a = 50 will be synchronized to the global one. At this time, we will verify that this is true.

Then out of the block scope, you will find that printing a is method a, and then you will not wonder why printing result is method a, because a in the block scope is not synchronized to the global, while B printing 50, because a line of B method is executed after B = 50 to synchronize B to the global. Here we will also understand why the two codes just changed the location of the function to print the results completely different, and then read the article if there are any errors or bad writing, but also please correct, I will immediately make changes.

Recommended Today

Chinese NLP processing method to do list

Chinese natural language processing flow Acquisition corpus Corpus is language material. Corpus is the content of linguistic research. Corpus is the basic unit of corpus. Therefore, people simply use the text as a substitute, and take the context in the text as a substitute of the context in the real world. We call a text […]