Differences among VaR, let and Const

var、let、const Differences among the three

var

stay ES6 Before appearance , You have to use var Statement . But use var It will bring some problems , Only then ES6 In the let and const. Let's first get to know var Characteristics .

var Scope of action

var You can declare or function in the global scope / Declare... Locally .

When declared outside the outermost function var variable , Scope is global . This means that you use... Outside the outermost function var Any variable declared can be in windows Use in .

When you declare in a function var when , The scope is local . This means that it can only be accessed within a function .

var Variables can be redeclared and modified

This means that we can perform the following operations within the same scope , And it won't go wrong .

var greeter = 'hey hi';
var greeter = 'say Hello instead';


var greeter = 'hey hi';
greeter = 'say Hello instead';

var The variable of

Variable promotion is JavaScript A mechanism of : Before executing the code , Variable and function declarations are moved to the top of their scope . That means if we do :

function person(status) {
    
    if (status) {
    
        var value = " Frogman " 
    } else {
    
        console.log(value) // undefined
    }
    console.log(value) // undefined
}
person(false)

It's equivalent to ：

function person(status) {
    
    var value;
    if (status) {
    
        var value = " Frogman " 
    } else {
    
        console.log(value) // undefined
    }
    console.log(value) // undefined
}
person(false)

var The problem of

Based on the above three points , May lead to var The problem is

    var greeter = "hey hi";
    var times = 4;
if (times > 3) {
    
    var greeter = "say Hello instead";
}

console.log(greeter) // "say Hello instead"

because times> 3 return true, So it will greeter Redefined as saysay Hello. If you are deliberately redefining greeter, There is no problem with this code , But when you don't know that variables have been defined before greeter when , This will become a problem . Use it in other places greeter when , There may be mistakes .

let

let Now it has become the first choice for variable declaration . Because he solved Aforementioned var The problem of .

let Block level scope of

The block is made up of {} Defined code blocks , There is a block in braces . Anything in braces is contained in a block level scope .

therefore , With let Variables declared in a block of can only be used in that block .

let greeting = 'say Hi';
let times = 4;

if (times > 3) {
    
    let hello = 'say Hello instead';
    console.log(hello); // "say Hello instead"
}
console.log(hello); // hello is not defined

let Can be modified but cannot be redeclared .

It's like var equally , use let Declared variables can be modified within their scope . But with var The difference is ,let A variable cannot be redeclared within its scope .

let greeting = 'say Hi';
greeting = 'say Hello instead';

let greeting = 'say Hi';
let greeting = 'say Hello instead'; // error: Identifier 'greeting' has already been declared

however , If the same variable is defined in different scopes , There will be no mistakes ：

let greeting = 'say Hi';
if (true) {
    
    let greeting = 'say Hello instead';
    console.log(greeting); // "say Hello instead"
}
console.log(greeting); // "say Hi"

Why are there no mistakes ？ This is because the scope of the two instances is different , So they will be treated as different variables .

This fact shows that : Use let, It's better than var Better choice . When using let when , You don't have to worry about the names of variables , Because variables exist only within their block level scope .

Again , Because a variable cannot be declared more than once within a block level scope , Therefore, the previously discussed var What happened .

let The variable of

It's like var equally ,let Declarations are also promoted to the top of the scope .
But the difference is :

• use var Declared variables are promoted to the top of their scope , And use undefined Value to initialize .
• use let Declared variables are promoted to the top of their scope , Values are not initialized .

therefore , If you try to use the let Variable , Will receive Reference Error.

const

use const Declared variables hold constant values .

const Within the block level scope of

image let The statement is the same ,const Declarations can only be accessed in the block level scope in which they are declared

const Cannot be modified and cannot be redeclared

This means using const The value of the declared variable remains unchanged . Cannot modify or restate . therefore , If we use const Declare variables , Then we won't be able to do that :

const greeting = 'say Hi';
greeting = 'say Hello instead'; // error: Assignment to constant variable.

therefore , Every const Declarations must be initialized at the time of declaration .

When used const When you declare an object , This behavior is different . Although it can't be updated const object , But you can update the properties of the object . therefore , If we declare a const The object is :

const greeting = {
    
    message: 'say Hi',
    times: 4,
};

//  You cannot restate 
const greeting = {
    
    words: 'Hello',
    number: 'five',
}; // error: Assignment to constant variable.

//  Only the properties of an object can be changed 
greeting.message = 'say Hello instead';

const The variable of

It's like let equally ,const The statement has also been raised to the top , But not initialized .

summary

• var The declaration is a global scope or a function scope , and let and const Is block scope .
• var Variables can be updated and redeclared within their scope ; let Variables can be updated but not redeclared ; const Variables cannot be updated or redeclared .
• They are all elevated to the top of their scope . however , Although using variables undefined Initialize the var Variable , But not initialized let and const Variable .
• Although you can declare without initialization var and let, But it must be initialized during the declaration const.

Reference article

You can understand it at a glance var、let、const The three difference

JavaScript Medium Var、Let and Const What's the difference?