New features of ES6 -- var, let, const

Keywords: Javascript Programming

1, var,let,const

var has no block level scope and has variable promotion mechanism.
let and const have block level scopes and no variable promotion. Can only be declared once within the same scope.
## var Explanation ##
function a(flag){
    if(flag){
        console.log(value);      //Result undefined, declared but not initialized
        var value=1;
        return value;
    }else{
        console.log(value);      //You can still access value; the value is undefined
    }
}
//The above code is equivalent to
function a(flag){
    var value;
    if(flag){
        value=1;
        return value;
    }else{
        console.log(value);      //You can still access value; the value is undefined
    }
}
## let Explain ##
function a(flag){
    if(flag){
        console.log(value);       // Error is reported because value is in TDZ (later on) and cannot be accessed
        let value=1;
        return value;
    }else{
        console.log(value);      //value is not defined
    }
}
## const Explain ##
function a(flag){
    if(flag){
        console.log(value);       // Error is reported because value is in TDZ (later on) and cannot be accessed
        const value=1;        //const must be initialized at the time of declaration and its value cannot be reassigned
        return value;
    }else{
        console.log(value);      //value is not defined
    }
}

2. const needs to be assigned a value when it is declared and cannot be modified. However, if the constant is an object, the property of the object can be modified

const obj={
    name:'Alisa',
    age:25
}
obj=23;        //Report errors
obj.age=23;    //Allow modification

3. TDZ temporary deadband
When the JavaScript engine scans the code to find variable declarations, if the variables declared by var are used, the variables will be promoted to the top of the scope; if the variables declared by let and const are used, they will be put into TDZ. Accessing variables in TDZ will trigger runtime errors. Variables will be removed from TDZ only after variable declaration statement is executed, and then they can be accessed normally. Note: This is for the block level scope where let and const are located.

if(flag){
    console.log(typeof value);     //Citation error
    let value='time';
}

console.log(typeof value);         //undefined
if(flag){
    console.log(typeof value);     //Citation error
    let value='time';
}

4. Application of let and const in circulation

//Output 0-9
var funcs=[];
for(let i=0;i<10;i++){
    funcs.push(function(){
        console.log(i);
    })
}
funcs.forEach(function(func){
    func();        //Output 0-9
})
//Changing the above let to const will report an error because the i + + operation attempts to modify the const declared constant
//Traversing objects
var person={
    name:"Alisa",
    age:23
};
for(let key in person){
    console.log(key);    //Output name, age
}
//The above let transposition const will not report an error, because the value of each key is different, that is, each time a new variable is defined

5. var may modify the global attributes (such as the attributes of window objects in browser environment), while let and const will not modify but just mask

var RegExp='hello';
console.log(window.RegExp);       //"hello"
var say='hi';
console.log(window.say);          //"hi"

let RegExp='hello';
console.log(RegExp);       //"hello"
console.log(window.RegExp === RegExp);       //false

const say='hi';
console.log(say);          //"hi"
console.log(window.say);          //undefined

6. tips in practical application
When using block level binding: declaration variables use const by default, and let is only used when it is really necessary to change variables.
In the process of programming, if variable promotion is needed, var is used to declare variables, otherwise let and const are used to declare variables, so as to better control the scope and avoid the mixed use and uncontrollability of variables.

Posted by secret007 on Fri, 15 Nov 2019 08:26:42 -0800