A brief talk about JavaScript variable promotion

Preface

In ECMAScript6, let and const keywords are added to declare variables. In front-end interviews, I am often asked about the differences between let, const and var, which involves knowledge points such as variable promotion and temporary dead zone. Let’s take a look at what variable promotion and temporary dead zone are.

1. What variables are promoted?

Let's first look at the description of variable promotion in MDN:

Hoisting is considered an understanding of how the execution context (specifically the creation and execution phases) works in JavaScript. The term hoisting was not found in JavaScript documents prior to the ECMAScript® 2015 Language Specification.
In the literal sense of the concept, "variable promotion" means that the declaration of variables and functions will be moved to the beginning of the code at the physical level, but this is not accurate. In fact, the location of variable and function declarations in the code does not move, but is placed in memory during the compilation phase.

In layman's terms, variable hoisting refers to the behavior of the JavaScript engine lifting the variable declaration part and the function declaration part to the beginning of the code during the execution of JavaScript code. When a variable is hoisted, its default value is set to undefined. It is precisely because of the variable promotion feature of JavaScript that many codes are not very intuitive, which is also a design flaw of JavaScript. Although ECMAScript6 has avoided this design flaw by introducing block-level scope and using the let and const keywords, variable promotion will continue to exist for a long time because JavaScript needs to be backward compatible.

Before ECMAScript6, JS engines used the var keyword to declare variables. In the var era, no matter where the variable declaration is written, it will eventually be brought to the top of the scope. The following declares a num variable in the global scope and prints it before declaring it:

console.log(num) 
var num = 1

This will output undefined because the variable declaration is hoisted, which is equivalent to:

var num
console.log(num)
num = 1

As you can see, num as a global variable will be promoted to the top of the global scope.

In addition, there is also variable promotion in the function scope:

function getNum() {
  console.log(num) 
  var num = 1  
}
getNum()

This will also output undefined because variable declarations inside a function are hoisted to the top of the function scope. It is equivalent to:

function getNum() {
  var num 
  console.log(num) 
  num = 1  
}
getNum()

In addition to variable promotion, functions are also promoted. There are two forms of declaration for named functions in JavaScript:

//Function declaration:
function foo () {}
//Variable declaration: 
var fn = function () {}

When declaring a function in variable form, it will be hoisted just like ordinary variables, but the function declaration will be hoisted to the front of the scope, and the declaration content will be hoisted to the top as well. as follows:

fn()
var fn = function () {
	console.log(1)  
}
// Output: Uncaught TypeError: fn is not a function

foo()
function foo () {
	console.log(2)
}
// Output: 2

As you can see, when fn is declared in variable form and executed before it, an error message will be reported that fn is not a function, because fn is just a variable at this time and has not been assigned to a function, so the fn method cannot be executed.

2. Why is there variable promotion?

Variable hoisting is closely related to the JavaScript compilation process: JavaScript, like other languages, goes through compilation and execution phases. During this short compilation phase, the JS engine collects all variable declarations and makes them effective in advance. The remaining statements will not take effect until the execution phase or when a specific statement is executed. This is the mechanism behind variable hoisting.

So why does variable promotion exist in JavaScript?

First, let’s start with the scope. Scope refers to the area in a program where a variable is defined, which determines the life cycle of the variable. In layman's terms, scope is the accessible range of variables and functions, that is, scope controls the visibility and life cycle of variables and functions.

Before ES6, there were two types of scopes:

• Objects in the global scope are accessible from anywhere in the code, and their lifecycle accompanies the lifecycle of the page.
• Function scope refers to variables or functions defined inside a function, and the defined variables or functions can only be accessed inside the function. After the function is executed, the variables defined inside the function will be destroyed.

In contrast, other languages ​​generally support block-level scope. A block scope is a piece of code wrapped in a pair of curly braces, such as a function, a judgment statement, a loop statement, or even a single {} can be considered a block scope (note that the {} in an object declaration is not a block scope). Simply put, if a language supports block-level scope, the variables defined inside the code block cannot be accessed outside the code block, and the variables defined in the code block will be destroyed after the code in the code block is executed.

Before ES6, block-level scope was not supported. Without block-level scope, the fastest and simplest design is to uniformly promote variables within the scope. However, this also directly leads to the fact that no matter where the variables in the function are declared, they will be extracted into the variable environment of the execution context during the compilation phase. Therefore, these variables can be accessed anywhere in the entire function body. This is variable promotion in JavaScript.

There are two benefits of using variable promotion:

(1) Improve performance

Before the JS code is executed, syntax checking and precompilation are performed, and this operation is only performed once. This is done to improve performance. Without this step, the variable (function) must be parsed again before each code execution. This is unnecessary because the code of the variable (function) will not change, and parsing it once is enough.

During the parsing process, precompiled code is also generated for the function. During precompilation, the variables declared and functions created are counted, and the function codes are compressed to remove comments, unnecessary spaces, etc. The advantage of this is that each time a function is executed, stack space can be directly allocated for the function (no need to parse it again to get which variables are declared and which functions are created in the code), and because of code compression, code execution is also faster.

(2) Better fault tolerance

Variable promotion can improve the fault tolerance of JS to a certain extent. See the following code:

a = 1;
var a;
console.log(a); // 1

If there is no variable promotion, these two lines of code will report an error, but because of variable promotion, this code can be executed normally.

Although this can be avoided during development, sometimes the code is complex and the variable may be used first and defined later due to inadvertent use, and the code will run normally due to the existence of variable promotion. Of course, during the development process, try to avoid using variables first and then declaring them.

Summarize:

• Declaration hoisting during parsing and precompilation can improve performance by allowing functions to pre-allocate stack space for variables when executing;
• Declaration hoisting can also improve the fault tolerance of JS code, so that some non-standard code can be executed normally.

3. Problems caused by variable promotion

Due to the existence of variable promotion, using JavaScript to write code with the same logic as other languages ​​may lead to different execution results. There are mainly two situations.

(1) Variables are overwritten

Let’s look at the following code:

var name = "JavaScript"
function showName(){
  console.log(name);
  if(0){
   var name = "CSS"
  }
}
showName()

Here, undefined is output instead of "JavaScript". Why?

First, when the showName function call is just executed, the execution context of the showName function is created. After that, the JavaScript engine starts executing the code inside the showName function. The first thing executed is:

console.log(name);

The variable name is needed to execute this code. There are two name variables in the code: one in the global execution context, whose value is JavaScript; the other in the execution context of the showName function. Since if(0) is never true, the value of name is CSS. So which one should I use? Variables in the function execution context should be used first. Because during the function execution process, JavaScript will first search for variables in the current execution context. Due to the existence of variable hoisting, the current execution context contains the variable name in if(0), whose value is undefined, so the obtained value of name is undefined.
The output here is different from other languages ​​that support block-level scope. For example, C language outputs global variables, so it is easy to cause misunderstanding here.

(2) The variable is not destroyed

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

When similar code is implemented in most other languages, i is destroyed after the for loop ends, but in the JavaScript code, the value of i is not destroyed, so the final printout is 5. This is also caused by variable promotion. When creating the execution context, the variable i has been promoted, so when the for loop ends, the variable i is not destroyed.

4. Disable variable hoisting

To solve the above problems, ES6 introduced the let and const keywords, allowing JavaScript to have block-level scope like other languages. There is no variable promotion for let and const. Let's use let to declare variables:

console.log(num) 
let num = 1

// Output: Uncaught ReferenceError: num is not defined

If you change it to const declaration, the result will be the same - the variables declared with let and const will have their declaration take effect at the same time as the execution of the specific code.

The variable promotion mechanism can lead to many misoperations: variables that are forgotten to be declared cannot be clearly detected during the development phase, but are hidden in the code as undefined. In order to reduce runtime errors and prevent undefined from causing unpredictable problems, ES6 specifically imposes a strong constraint on being unavailable before declaration. However, there is a difference between let and const. Variables declared using the let keyword can be changed, while the values ​​of variables declared using const cannot be changed.

Let's take a look at how ES6 solves the above problem through block-level scope:

function fn() {
  var num = 1;
  if (true) {
    var num = 2;  
    console.log(num); // 2
  }
  console.log(num); // 2
}
fn()

In this code, the variable num is defined in two places, at the top of the function block and inside the if. Since the scope of var is the entire function, the following execution context will be generated during the compilation phase:

It can be seen from the variable environment of the execution context that only one variable num is generated in the end, and all assignment operations to num in the function body will directly change the value of num in the variable environment. So the final output of the above code is 2. For the code with the same logic, the final output value of other languages ​​should be 1, because the declaration in if should not affect the variables outside the block.

Let's replace the var keyword with the let keyword and see the effect:

function fn() {
  let num = 1;
  if (true) {
    let num = 2;  
    console.log(num); // 2
  }
  console.log(num); // 1
}
fn()

Executing this code will produce the expected output. This is because the let keyword supports block-level scope, so the JavaScript engine does not store the variables declared by let in if into the variable environment during the compilation phase. This means that the keywords declared by let in if will not be promoted to be visible to the entire function. So the value printed inside the if block is 2, and after jumping out of the block, the value printed is 1. This is in line with our habits: variables declared in a block do not affect variables outside the block.

5. How does JS support block-level scope?

So the question is, how does ES6 support both the variable promotion feature and the block-level scope? Let's look at the reason from the perspective of execution context.

The JavaScript engine implements function-level scope through variable environment. So how does ES6 support block-level scope based on function-level scope? Let’s look at the following code first:

function fn(){
    var a = 1
    let b = 2
    {
      let b = 3
      var c = 4
      let d = 5
      console.log(a)
      console.log(b)
      console.log(d)
    }
    console.log(b) 
    console.log(c)
}   
fn()

When this code is executed, the JavaScript engine compiles it and creates an execution context before executing the code sequentially. The let keyword creates a block scope, so how does the let keyword affect the execution context?

(1) Create an execution context

The created execution context is shown in the figure:

From the above figure, we can see that:

• Variables declared with var will be stored in the variable environment during the compilation phase.
• Variables declared with let will be stored in the lexical environment during the compilation phase.
• Inside a function scope, variables declared with let are not stored in the lexical environment.

(2) Execution code

When the code block is executed, the value of a in the variable environment has been set to 1, and the value of b in the lexical environment has been set to 2. The execution context of the function is as shown in the figure:

It can be seen that when entering the scope block of a function, the variables declared by let in the scope block will be stored in a separate area of ​​the lexical environment. The variables in this area do not affect the variables outside the scope block. For example, if variable b is declared outside the scope and variable b is also declared inside the scope block, when execution enters the scope, they all exist independently.

In fact, a stack structure is maintained inside the lexical environment. The bottom of the stack is the outermost variable of the function. After entering a scope block, the variables inside the scope block will be pushed to the top of the stack; when the scope execution is completed, the information of the scope will be popped from the top of the stack. This is the structure of the lexical environment. The variables here refer to those declared by let or const.

Next, when console.log(a) in the scope block is executed, the value of variable a needs to be searched in the lexical environment and the variable environment. The search method is: search downward along the top of the lexical environment stack. If it is found in a block in the lexical environment, it is directly returned to the JavaScript engine. If it is not found, it continues to search in the variable environment. This way the variable lookup is done:

When the scope block is executed, the variables defined inside it will be popped from the top of the lexical environment stack, and the final execution context is as shown in the figure:

Block-level scope is implemented through the stack structure of the lexical environment, and variable hoisting is implemented through the variable environment. By combining the two, the JavaScript engine supports both variable hoisting and block-level scope.

6. Temporary Dead Zone

Finally, let's take a look at the concept of temporary dead zone:

var name = 'JavaScript';
{
	name = 'CSS';
	let name;
}

// Output: Uncaught ReferenceError: Cannot access 'name' before initialization

ES6 stipulates: If let and const exist in a block, the variables declared by these two keywords in this block form a closed scope from the beginning. If you try to use such a variable before declaring it, you will get an error. This area where an error is reported is a temporary dead zone. The area above line 4 of the code above is the temporary dead zone.

If you want to successfully reference the global name variable, you need to remove the let declaration:

var name = 'JavaScript';
{
	name = 'CSS';
}

At this point the program will run normally. In fact, this does not mean that the engine is not aware of the existence of the name variable. On the contrary, it is aware of it, and it clearly knows that name is declared in the current block using let. That is why it adds a temporary dead zone limit to this variable. Once you remove the let keyword, it has no effect.

In fact, this is the essence of the temporary dead zone: when the control flow of the program is instantiated in a new scope, the variables declared with let or const in this scope will be created in the scope first, but at this time they have not been lexically bound, so they cannot be accessed. If they are accessed, an error will be thrown. Therefore, the time between when the running process enters the scope to create a variable and when the variable can be accessed is called the temporary dead zone.

Before the appearance of let and const keywords, the typeof operator was 100% safe. Now it can also cause temporary dead zones. Introducing public modules with the import keyword and creating classes with new class can also cause temporary dead zones. The reason is that variables are declared before they are used.

typeof a // Uncaught ReferenceError: a is not defined
let a = 1

As you can see, an error occurs when using the typeof keyword before declaring a. This is caused by a temporary dead zone.

Summarize

This is the end of this article on JavaScript variable promotion. For more relevant content on JavaScript variable promotion, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!