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

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

ECMAScript is an internationally standardized scripting language. JavaScript consists of ECMAScript, DOM and BOM. 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 passed and became an international standard.

1. Block scope {}

The scopes in ES5 are: global scope and function scope. There is no concept of block scope.

Block scope was added in ES6. The block scope is included by { }, and the { } in if statements and for statements also belong to the block scope.

<script type="text/javascript">
	
    {
        var a = 1;
        console.log(a); // 1
    }
    console.log(a); // 1
    // Variables defined by var can be accessed across block scopes.
 
    (function A() {
        var b = 2;
        console.log(b); // 2
    })();
    // console.log(b); // error,
    // It can be seen that variables defined by var cannot be accessed across function scopes if(true) {
        var c = 3;
    }
    console.log(c); // 3
    for(var i = 0; i < 4; i ++) {
        var d = 5;
    };
    console.log(i); // 4 (i is already 4 at the end of the loop, so i is 4 here)
    console.log(d); // 5
    // Variables defined with var in if statements and for statements can be accessed from outside.
    // It can be seen that if statements and for statements belong to block scope, not function scope.
 
</script>

2. The difference between var, let, and const

1. Variables defined by var have no concept of blocks and can be accessed across blocks but not across functions.
2. Variables defined by let can only be accessed in block scope, not across blocks or functions.
3. const is used to define constants, which must be initialized (that is, must be assigned a value) 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; // error var aa;
        let bb;
        // const cc; // 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); // error // console.log(c); // 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); // error // console.log(e); // error // console.log(f); // error</script>

3. Can the object properties defined by const be changed?

This is a question I encountered during an interview today. It said that const cannot be modified, so I readily said no. However, after actually testing it, I found that it was wrong, so I recorded it here.

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

Running the above code, we find that the name attribute of the person object has indeed been modified. What's going on?

Because the object is of reference type, only the pointer to the object is stored in person, which means that const only guarantees that the pointer does not change. Modifying the properties 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, any other changes are allowed.

Then we try to modify the pointer to let person point to a new object, and it returns an error.

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

This is the end of this article about the detailed case analysis of the differences between var, let and const in JavaScript es6. For more information about the differences between var, let and const in JavaScript es6, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!