Function scope declaration using var

When a variable is declared using var, it is automatically added to the nearest context. In a function, the closest context is the local context of the function

    function add(num1,num2){
        var sum = num1+num2;
        return sum;
    }
    let result = add(10.20); //  30
    console.log(sum);  Error: sum is not a valid variableHere add() defines a local variable sum, which holds the result of the addition operation. This value is returned as the value of the function, but sum is not accessible outside the function if the above keyword is omittedvarSum becomes accessible after add() is called. The followingfunction add(num1,num2){
        sum = num1+num2;
        return sum;
    }
    let result = add(10.20); //  30
    console.log(sum);  / / 30
    
Copy the code

Var declarations are carried to the top of a function or scope, before all code in the scope. This phenomenon is called variable promotion. Promotion lets code in the same scope use variables without considering whether they have been declared

2. Use the block-level scope declaration for lets

The let keyword is similar to var, but let is block-level scoped by the nearest pair of curly braces {}. In other words, if blocks, while blocks, function blocks, and even individual blocks are also scoped for let declaration variables.

    if(true) {let a = 10;
    }
    console.log(a); // Error A not defined
    
    while() {let b=10;
    }
    console.log(a); // Error b is not defined
    
    function foo(){
        let c = 10;
    };
    console.log(c); // Error c is not defined, this is not strange, var declaration will also report this error
    
    {
        let d = 20;
    }
    console.log(d); // Error d is not defined
Copy the code

Difference between let and VAR

Let and var variables in the same scope cannot be declared twice. Var variables that are declared twice are ignored, while let variables that are declared twice are thrown an error

Variable promotion and function promotion What is Hosting? Javascript code is precompiled by the browser engine before execution, during which variable and function declarations are promoted to the top of the corresponding scopeCopy the code

Variable ascension

Such as:varVariable ascensionconsole.log(a);
    var a = 3; The structure of the precompiled code is as follows:var a; // Raise the declaration of variable A to the top, the assignment logic does not improve
    console.log(a); // undefined
    a = 3; // Perform the assignment
Copy the code

Function increase

console.log(foo1); // [Function: foo1]
foo1(); // foo1 
console.log(foo2); // undefined 
foo2(); // TypeError: foo2 is not a function function

// Function declaration
foo1 () {
    console.log("foo1")};// Function expression
var foo2 = function () { 
    console.log("foo2")};Copy the code

That is, function promotion only improves the function declaration, not the function expression. Here’s another quick example:

var a = 1; 
function foo() { 
    a = 10; 
    console.log(a);/ / 10
    return;
    function a() {}
 } 
foo(); 
console.log(a);/ / 1The code above is precompiled to look like this (only inside foo) :var a= 1;// define a global variable a;
function foo(){ Function a(){} = function a(){} = function a(){
// var a = function() {}; The final form is as follows
    var a = function(){}; // Define and assign the local variable a
    a = 10; // Changing the value of local variable A does not affect global variable A
    conosle.log(a); // Output the value of local variable A: 10;
    return
}
foo();
console.log(a); // Outputs the value of the global variable A, 1
Copy the code

Priority of function promotion and variable promotion

console.log(a); // f a() {console.log(10)} 
console.log(a()); // undefined 
var a = 3; 
function a() { 
    console.log(10) / / 10
} 
console.log(a) / / 3
a = 6; 
console.log(a()); //a is not a function;The code block above is precompiled to look like this:var a = funtion () { 
    console.log(10)}var a; 
console.log(a); // f a() {console.log(10)} 
console.log(a()); // undefined
a = 3; 
console.log(a) / / 3
a = 6;
console.log(a()); //a() is not a function;
Copy the code

This shows that function promotion has a higher priority than variable promotion and is not covered by variable declaration, but is covered by variable assignment.