Detailed explanation of the difference between var and let in JavaScript

variable

ECMAScriptVariables are loose types, meaningVariables can hold any type of data, each variable is nothing more than a named placeholder used to hold any value. existJavaScriptThere are 3 keywords that can declare variables:var、constandlet,invarexistECMAScriptAll versions ofconstandletOnly inECMAScript 6Used in later versions

var keywords

If we want to define variables, we can usevarOperators (note herevarAlso a keyword ~), followed by a variable name

var message;

This line of code will define a name calledmessagevariables forSave any type of value，If not initialized, the default is undefined。ECMAScriptImplement variable initialization, so you can define the variable and set its value at the same time

var message = "hi";

Through the above code we can understand,messageIt is defined as a variable that holds the string value hi. Initializing a variable like this will not identify it as a string type, this is just a simple assignment.We can not only change the saved value, but also change the type of value.

var message = "hi"
message = 100 ;

Through the above code we can see,messageIt is first defined as a variable used to save the string value hi, and then rewritten to save the value 100. Although it is not recommended to change the type of the variable's saved value, this one isECMAScriptinIt's very effective

var declaration scope

When we define a function variable, we usually consider their scope,usevarThe variable defined by the operator will become a local variable of the function containing it, for examplevarDefining a variable inside a function meansOnce this area is out, this definition is invalid

<script>
function test() {
    var message = "hi";
}
test();
(message);
</script>

From the above code we can see,messageVariables are used inside functionsvarThe function name is definedtest(), calling it will create this variable and assign it a value. After the call is finished, this variable will be destroyed, so the code aboveThe penultimate line will report a syntax errorIf we want to solve this problem,messageDefine it as a global variable

<script>
function test() {
    message = "hi";
}
test();
(message);
</script>

After removing the previous var operator,messageAt onceBecome a global variable,usJust call the function test() once, you can define this variable, andAccess outside the function

Pay attention! ! !

We can omit it thoughvarOperators to define global variables, but this is not recommended.Global variables defined in local scope are difficult to maintain and will also cause us some confusion, because we can't be sure of thisvarIs it intentional? If you assign a value to an undeclared variable like this, it will cause it to be thrownReferenceError

If we need to define multiple variables, we can separate each variable with commas in a statement (and optional initialization)

<script>
    var message = "hi";
    found = false;
    age = 29;
</script>

Here we define 3 initialization variables, becauseECMAScriptyesLoose type, soVariables initialized with different data types can be declared in one statement, inserting newlines and space indentation is not a necessity (because it is not Python~)

Tips

existStrict modeNext, the name cannot be defined asevalandargumentsvariables,Otherwise, it will cause syntax errors

var declaration promotion

We're usingvarWhen the following code will not report an error, becauseVariables declared with this keyword will automatically be promoted to the top of the function scope

<script>
    function foo() {
        (age);
        var age = 26;
    }
    foo();
</script>

The reason why this code does not report an error is becauseECMAScriptIt has already solved it for us~ (it will automatically adjust the reading order itself), this is what it is calledpromote, which is to pull all variable declarations to the top of the function scope, and in addition,There is no problem using var to declare the same variable repeatedly

let statement

letandvarThe function ofletThe scope declared is the block scope, andvarThe scope of the declaration is the function scope

<script>
   if(true){
       var name = "Matt"
       (name);  //Matt
   }
   (name);    //Matt
   if(true){
       let age = 26 ;
       (age)   //26
   }
   (age)        //ReferenceError
</script>

Here,ageThe reason why variables cannot be inifThe outside of the block is referenced becauseIts scope is limited to the inside of the block, and the block scope is a subset of the function's effect, therefore applicable tovarThe scope oflet

letalsoRedundant declarations are not allowed in the same block scope, this will also report an error

var name ;
var name ;
let age ;
let age ;    //SyntaxError Identifier age has been declared

certainly,JavaScriptThe engine records the identifier used for variable declaration and its block scope.Therefore, nesting the same identifier will not report an error, because there is no repeated declaration in the same block

<script>
    var name = "Nicholas";
    (name);        // Nicholas
    if (true) {
        var name = "Matt";
        (name);    // Matt
    }
    let age = 30;
    (age);         // 30
    if (true) {
        let age = 26;
        (age);     // 26
    }
</script>

Reporting errors on redundant statements will not be mixed.letandvarAffected by these two keywords declaredIt's not different types of variables, they just indicate how variables exist in the relevant scope

var name ;
let name ;    //SyntaxError
let age ;
var age ;     //SynatxError

This is the end of this article about explaining the difference between var and let in JavaScript. For more related JavaScript var let content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!