The difference between var, let and const

Posted by esfisher on Sun, 23 Jan 2022 20:54:43 +0100

ES6: the difference between VaR, let and const

1, var

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

Note: top level objects refer to window objects in browser environment and global objects in Node environment

var a = 10;
console.log(window.a) // 10

Variables declared with var have variable promotion

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

During the compilation phase, the compiler changes it to the following execution

var a
console.log(a)
a = 20

Using var, we can declare a variable multiple times, and the later declared variable will override the previous variable declaration

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

When a variable is declared using var in a function, the variable is local

var a = 20
function change(){
    var a = 30
}
change()
console.log(a) // 20

If var is not used in the function, the variable is global

var a = 20
function change(){
   a = 30
}
change()
console.log(a) // 30

2, let

let is a new command in ES6 to declare variables

The usage is similar to var, but the declared variables are only valid in the code block where the let command is located

{
    let a = 20
}
console.log(a) // ReferenceError: a is not defined.

There is no variable promotion

console.log(a) // Error ReferenceError
let a = 2

This means that the variable a does not exist before it is declared. If it is used, an error will be thrown

As long as the let command exists in the block level scope, this area is no longer affected by the outside world

var a = 123
if (true) {
    a = 'abc' // ReferenceError
    let a;
}

Before using let to declare a variable, the variable is unavailable, which is often called "temporary dead zone"

Finally, let does not allow duplicate declarations in the same scope

let a = 20
let a = 30
// Uncaught SyntaxError: Identifier 'a' has already been declared

Note that the scope is the same. No error will be reported in the following cases

let a = 20
{
    let a = 30
}

Therefore, we cannot redeclare parameters inside a function

function func(arg) {
  let arg;
}
func()
// Uncaught SyntaxError: Identifier 'arg' has already been declared

3, const

const declares a read-only constant. Once declared, the value of the constant cannot be changed

const a = 1
a = 3
// TypeError: Assignment to constant variable.

This means that once const declares a variable, it must be initialized immediately and cannot be assigned later

const a;
// SyntaxError: Missing initializer in const declaration

If you have declared variables with var or let before, you will also report an error with const declaration

var a = 20
let b = 20
const a = 30
const b = 30
// Will report an error

const actually does not guarantee that the value of the variable cannot be changed, but that the data stored at the memory address pointed to by the variable cannot be changed

For simple type data, the value is stored at the memory address pointed to by the variable, so it is equivalent to a constant

For complex types of data, the memory address pointed to by the variable saves only a pointer to the actual data. const can only ensure that the pointer is fixed, but can not ensure that the structure of the change quantity remains unchanged

const foo = {};

// Adding an attribute to foo can succeed
foo.prop = 123;
foo.prop // 123

// If you point foo to another object, an error will be reported
foo = {}; // TypeError: "foo" is read-only

In other cases, const is consistent with let

4, Distinction

The differences among var, let and const can be expanded around the following five points:

Variable promotion
Temporary dead zone
Block level scope
Repeat declaration
Modify declared variables
use

Variable promotion

var declaration variables have variable enhancement, that is, variables can be called before the declaration, and the value is undefined.

let and const do not have variable promotion, that is, the variables declared by them must be used after declaration, otherwise an error will be reported

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

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

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

Temporary dead zone

var has no temporary deadband

let and const have temporary dead zones. You can get and use the variable only when the line of code declaring the variable appears

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

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

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

Block level scope

var does not have a block level scope

let and const have block level scopes

// var
{
    var a = 20
}
console.log(a)  // 20

// let
{
    let b = 20
}
console.log(b)  // Uncaught ReferenceError: b is not defined

// const
{
    const c = 20
}
console.log(c)  // Uncaught ReferenceError: c is not defined

Repeat declaration

var allows repeated declaration of variables

let and const are not allowed to declare variables repeatedly in the same scope

// var
var a = 10
var a = 20 // 20

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

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

Modify declared variables

var and let can