Detailed explanation of the differences between var let and const in JavaScript es6

First of all, a common question is, what is the relationship between ECMAScript and JavaScript?

ECMAScript is an internationally adopted standardized scripting language. JavaScript is composed of ECMAScript, DOM and BOM3. It can be simply understood as: ECMAScript is the language specification of JavaScript, and JavaScript is the implementation and extension of ECMAScript.

In 2011, ECMAScript version 5.1 was released. Most of us used ES5 before

In June 2015, ECMAScript 6 was officially adopted and became an international standard.

1. Block-level scope {}

Scopes in ES5 include: global scope and function scope. There is no concept of block scope.

Block-level scopes are added in ES6. Block scope is covered by {}, and {} in if and for statements also belong to block scope.

<script type="text/javascript">
	
    {
        var a = 1;
        console.log(a); // 1
    }
    console.log(a); // 1
    //  Pass var The defined variables can be accessed across block scope. 
 
    (function A() {
        var b = 2;
        console.log(b); // 2
    })();
    // console.log(b); //  Report an error, 
    //  Visible, through var The defined variable cannot be accessed across function scope to 
 
    if(true) {
        var c = 3;
    }
    console.log(c); // 3
    for(var i = 0; i < 4; i ++) {
        var d = 5;
    };
    console.log(i); // 4   ( End of loop i Already is 4 , so here i For 4)
    console.log(d); // 5
    // if Statement and for Use in the statement var The defined variables can be accessed from outside, 
    //  It can be seen that, if Statement and for Statements are block-scoped, not function-scoped. 
 
</script>

2. The difference between var, let and const

The variables defined by var have no concept of blocks and can be accessed across blocks, but not across functions. Variables defined by let can only be accessed in block scope, not across blocks or functions. const is used to define constants, which must be initialized (i.e. must be assigned) when used, can only be accessed in block scope, and cannot be modified.

<script type="text/javascript">
    //  Block scope 
    {
        var a = 1;
        let b = 2;
        const c = 3;
        // c = 4; //  Report an error 
        var aa;
        let bb;
        // const cc; //  Report an error 
        console.log(a); // 1
        console.log(b); // 2
        console.log(c); // 3
        console.log(aa); // undefined
        console.log(bb); // undefined
    }
    console.log(a); // 1
    // console.log(b); //  Report an error 
    // console.log(c); //  Report an error 
 
    //  Function scope 
    (function A() {
        var d = 5;
        let e = 6;
        const f = 7;
        console.log(d); // 5
        console.log(e); // 6  
        console.log(f); // 7 
 
    })();
    // console.log(d); //  Report an error 
    // console.log(e); //  Report an error 
    // console.log(f); //  Report an error 
</script>

3. Can the object properties defined by const be changed

This is today's interview when encountered a problem, said above const is not modified, so very happy to say no, but came back after the actual test found wrong, in this record 1.

 const person = {
     name : 'jiuke',
     sex : ' Male '
 }
 
 person.name = 'test'
 
 console.log(person.name)

Run the above code and find that the name property of the person object has indeed been modified. What is going on?

Because the object is of reference type, only the pointer of the object is saved in person, which means that const only guarantees that the pointer does not change, and modifying the property of the object will not change the pointer of the object, so it is allowed. That is to say, as long as the pointer of the reference type defined by const does not change, other changes are allowed no matter how.

Then we try to modify the pointer under 1, so that person points to a new object, and it really reports an error

const person = {
   name : 'jiuke',
   sex : ' Male '
}
 
person = {
   name : 'test',
   sex : ' Male '
}