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

When it comes to the methods of declaring variables in JavaScript , they are var , let , and const . let and const are new commands added in es6 . So what is the difference between them?

Let's first talk about the differences between the three as a whole. Before introducing them in detail, the differences between var, let, and const are mainly analyzed from the following points:

• Differences when used as global variables
• Variable Hoisting
• Temporary dead zone
• Block scope
• Duplicate Statement
• Modify declared variables

As a global variable

In ES5 , the properties of top-level objects are equivalent to global variables. Variables declared with var are both global variables and properties of top-level variables.

However, variables declared with let in ES6 are globally accessible, but not as properties of top-level variables, and constants declared with const are also not available on top-level variables.

Variable Hoisting

Variables declared with var are promoted, and the variable can be called before being declared, and the value is undefined

There is no variable promotion let and const , that is, the variables they declare must be used after declaration, otherwise an error will be reported

 console.log(a) // undefinedvar a = 1console.log(b) // Cannot access 'b' before initializationlet b = 2console.log(c) // Cannot access 'c' before initializationconst c = 3console.log(a) // undefined
var a = 1

console.log(b) // Cannot access 'b' before initialization
let b = 2

console.log(c) // Cannot access 'c' before initialization
const c = 3

Temporary dead zone

There is no temporary dead zone var

There is a temporary dead zone let and const . The variable can only be obtained and used after the line of code that declares the variable is executed.

In fact, this is the difference that is extended from the previous variable improvement. Because variables declared with var are promoted, if the variable value is undefined before declaration, no error will be reported, so there is no temporary dead zone. let or const is used before or after the start of the scope and before the variable or constant is declared, an error will be reported. This area is also called a temporary dead zone.

Same as above:

 console.log(a) // undefined
var a = 1

console.log(b) // Cannot access 'b' before initialization
let b = 2

console.log(c) // Cannot access 'c' before initialization
const c = 3

Block scope

var does not exist in block scope

let and const have block scope

 { var a = 2}console.log(a) // 2{ let b = 2}console.log(b) // Uncaught ReferenceError: b is not defined{ const c = 2}console.log(c) // Uncaught ReferenceError: c is not defined

Duplicate Statement

var can be declared repeatedly in the same scope, and the variable declared later will overwrite the previous variable declaration

let and const cannot be declared repeatedly in the same scope

 var a = 10
var a = 20 // 20

let b = 10
let b = 20 // Identifier 'b' has already been declared

const c = 10
const c = 20 // Identifier 'c' has already been declared

Modify declared variables (constants and variable declarations)

var and let declare variables, and the declared variables can be modified

const declares a constant, read-only. Once declared, the value of a constant cannot be changed. However, it should be noted that for reference data types, variables or constants in JavaScript store the storage address of the data. As long as the reference of the constant is not directly modified, it is possible to modify the properties of the object it points to.

 var a = 10
a = 20
console.log(a) // 20

let b = 10
b = 20
console.log(b) // 20

const c = 10
c = 20 // Uncaught TypeError: Assignment to constant variable

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!