This is my first blog, the writer’s level is limited, grow together – Yang Jiongliang wrote on September 18, 2020.9

Var let const is not the only variable declared in ES6

ES5 two keyword is used to provide only var and function of the variable declarations, here it is important to note that javascript variable declarations way not only * * * var, let, const, ES6 keywords are declaring variables, var, let, const, Function ***, import and class.

The topic of today’s article is the difference between var, let, and const declarations

Var declares variables

Variable: a variable

Var is one of the design flaws of javascript, which causes the following problems:

  1. Var declares variables that do not have block scope
  2. Global variables declared by var automatically become properties of the Window object
  3. The variable declared by var is promoted
1. The variable declared by var has no block scope

In other words, ES5 has no block-level scope

{
    var foo = 1;
}
console.log(foo)    // 1, foo in {} can still be accessed
Copy the code

Programming problem: define 10 functions and output 1 when the first function is executed and 2…… when the second function is executed

var bar = []; 			 // Define an array
for(var i = 0; i <10; i++){ bar[i] =function(){   // Each array element is defined as a function
        console.log(i)	 / / the function body
    }
}
bar[1] ();/ / 10
bar[2] ();// all output 10 is output 10.
		Activation Object (AO) was precompiled before the function was executed
Copy the code

That is, the above code does not solve the problem, here is the solution to this problem (add drumsticks to yourself)

var bar = []; 
for (var i = 0; i < 10; i++) {
    bar[i] = (function(i){
        var j = i;
        return function(){
            console.log(j);
        }
    })(i)
}
bar[1] ();/ / 1
bar[2] ();// 2 involves javascript closures, the key is the clever setting of scopes (changing how variables are found)
			// The IIFE exists so that
			// Each I variable value can be stored in the j variable of the outer function's scope
Copy the code
2. Global variables declared by var automatically become properties of the Window object
var foo = 123;
console.log(window.foo) //123, the global variable foo automatically becomes a property of the window object
Copy the code
1. In case of reactorization, use the following compensation compensation methods:
console.log(foo)  // undefined, declaration ahead and assignment not ahead
var foo = 111
Copy the code

Let declares variables

The emergence of the keyword let solves the problems above var

  1. Variables declared by let are not accessed outside the block-level scope
  2. Variables declared by the let do not become properties of the window
  3. There is no variable promotion in LET
1. Variables declared by let are not accessed outside the block-level scope

Or, from ES6 onwards, there is block-level scope (” The world has been so beautiful since I had you “, as Huanzhuge sings).

{
    var foo = 1;
}
console.log(foo)    //  Uncaught ReferenceError: foo is not defined
Copy the code

This property of let is especially suitable for the for loop. It is simple and effective to solve the programming problems in var:

Programming problem: define 10 functions and output 1 when the first function is executed and 2…… when the second function is executed

var bar = [];
for(let i = 0; i<10; i++){ bar[i] =function(){
        console.log(i)
    }
}
bar[1] ();/ / 1
bar[2] ();// 2 Bad writing, oh my god
Copy the code

And the code for the loop above:

for(let i = 0; i<10; i++){ bar[i] =function(){
        console.log(i)
    }
}
Copy the code

The actual effect is ↓\downarrow↓

{
    let i = 0;
    bar[i] = function(){
        console.log(i)
    }
}
{
    let i = 2;
    bar[i] = function(){
        console.log(i)
    }
}
......
{
    let i = 10;
    bar[i] = function(){
        console.log(i)
    }
}
Copy the code
2. Variables declared by let do not become properties of window
let foo = 9527;
console.log(window.foo);   //undefined
Copy the code
3. There is no variable promotion in LET
console.log(foo);
let foo = 9527;   //Uncaught ReferenceError: foo is not defined
Copy the code
4. Temporary dead zones

In ES6, let and const declare variables that appear in a block {… }, no matter where they occur in the block, they form a binding relationship, and hence the syntax concept ** temporary dead zone **, that is, in a block, a variable can only be accessed to the line where it is declared. In a block, before let declares the variable foo, All are “dead zones” of the variable foo, and prior access to the variable will result in an error.

var foo = 123;
{
    console.log(foo);	//Uncaught ReferenceError: foo is not defined
    let foo = 9527;
}
Copy the code

The temporary dead zone is indicated as follows:

var foo = 123;
{
    //TDZ start
    console.log(foo);	//Uncaught ReferenceError: foo is not defined
    let foo = 9527;
    //TDZ end
    console.log(foo)
}
Copy the code
5. Typeof operator

Before let and const, an undeclared variable passing through the Typeof operator does not raise an error

typeof(foo)	// No error will be reported
Copy the code

The advent of lets and const also makes the Typeof operator no longer a safe operation.

typeof(foo)
let foo = 9527;	//Uncaught ReferenceError: foo is not defined
Copy the code
6. Duplicate declaration of variables

Var can be declared repeatedly in the same scope. Let and const are not allowed. Otherwise, an error occurs.

let foo = 9527;
let foo = 9527;	 //Uncaught SyntaxError: Identifier 'foo' has already been declared
Copy the code

Const; const

Constant: constant

As the name implies, the const keyword is the same as let except that it is used to declare a read-only variable, or that once declared, a value must be assigned and cannot be changed.

const bar = 9527;
const foo;	//Uncaught SyntaxError: Missing initializer in const declaration
Copy the code
const foo = 9527;
foo = 123;	//Uncaught TypeError: Assignment to constant variable.
Copy the code

Const const

For simple data types, the value of a variable is declared as the value of the corresponding to the reference data types, the value of a variable is declared object corresponding to the reference value, or understood as a pointer to the object, in javascript, object reference stored in the stack, the object itself is stored in the heap, and const declare the value of the variable refers to the reference, Instead of referring to the object to which a const declaration refers, it can modify the object’s properties.

const foo = {name:'the writer'};
foo.name = '囧 Handsome';	// Modify the object pointed to by foo without error
foo = 9527;			  // Modify foo, Uncaught TypeError:Assignment to constant variable
Copy the code

Tip: In ES6 development, use const in preference and let only when you need to change an identifier

Four,

Practice makes perfect shortage in one, success depends on forethought destroyed by