A, var

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

Note: The top-level object refers to the Window object in the browser environment and the Global object in Node

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

Variables declared using var may be promoted

console.log(a) // undefined
var a = 20
Copy the code

At compile time, the compiler changes this to the following execution

var a
console.log(a)
a = 20
Copy the code

With var, we can declare a variable multiple times, and the variable declared later overrides the previous variable declaration

var a = 20 
var a = 30
console.log(a) // 30
Copy the code

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
Copy the code

If you don’t use var inside a function, the variable is global

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

Second, the let

Let is a new ES6 command that can be used to declare a variable, similar to var, but only valid in the code block where the let command is located.

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

There is no variable promotion

Console. log(a) // ReferenceError let a = 2Copy the code

This means that variable A does not exist before it is declared, and if it is used, an error is thrown. As long as the let command exists in the block-level scope, the area is no longer affected by external influences

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

A variable is not available until it is declared by let, known as a “temporary dead zone”. Finally, let does not allow multiple declarations in the same scope

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

Note that the same scope, the following case will not report an error

let a = 20
{
    let a = 30
}
Copy the code

Therefore, we cannot redeclare arguments inside functions

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

Third, const

Const declares a read-only constant. Once declared, its value cannot be changed

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

This means that a const, once declared, must be initialized immediately and cannot be left for later assignment

const a;
// SyntaxError: Missing initializer in const declaration
Copy the code

If you declared a variable using var or let before, using const also returns an error

Var a = 20 let b = 20 const a = 30 const b = 30Copy the code

Const actually guarantee the value of the variable is not shall not alter, but variable pointing to the memory address of the saved data may change, for a simple type of data, the value is stored in the variable pointing to the memory address, therefore is equal to a constant, for complex type data, variable pointing to the memory address, save only a pointer to the actual data, Const only guarantees that the pointer is fixed; it does not guarantee that the structure of the changer is unchanged

const foo = {}; // Add an attribute to foo, which succeeds foo.prop = 123; Foo. Prop // 123 // Pointing foo to another object will result in an error foo = {}; // TypeError: "foo" is read-only In other cases, const is the same as letCopy the code

Fourth, the difference between

The difference between var, let, and const can be summarized as follows:

  • Variable ascension
  • Temporary dead zone
  • Block-level scope
  • Repeat statement
  • Modify declared variables
  • use

4.1 Variable Promotion

The variable declared by var has a variable promotion, that is, the variable can be called before the declaration, let and const do not have a variable promotion, that is, their declared variables must be used after the 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
Copy the code

4.2 Temporary dead zone

Var does not have a temporary dead band. Let and const have a temporary dead band. They can’t get and use a variable until the line of code that declares it 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
Copy the code

4.3 Block-level scope

Var does not have block-level scope let and const do

// 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
Copy the code

4.4 Duplicate Declaration

Var allows double declaration of variables let and const in the same scope do not allow double declaration of variables

// 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
Copy the code

4.5 Modifying declared Variables

Var and let can be const and declare a read-only constant. Once declared, the value of a constant cannot be changed

// var
var a = 10
a = 20
console.log(a)  // 20
//let
let b = 10
b = 20
console.log(b)  // 20
// const
const c = 10
c = 20
console.log(c) // Uncaught TypeError: Assignment to constant variable
Copy the code

4.6 the use of

Use const whenever possible. Use let in most other cases. Avoid var.