variable

In ECMAScript, variables can store any type of data (either string, array or other...), that is, "loose". Variables are just placeholders for distinguishing. There are three keywords var, const and let to declare variables (var is available in all versions of ECMAScript, and the last two are only available in ES6 and later).

(1) var

var a；//Define only
var b='hi'；//While defining, set the value

It should be noted that the value setting can be overridden, but we do not recommend this

var a="hello"
a="hi"

ECMAScript variables are "loose", so you can use a statement to initialize the declaration of different data types. Of course, insertion and line feed are not necessary, but you must separate different variables with commas.

Var a="hello"，
    b=12，
    c=false；

1) On the scope of variables declared by var

function test(){
    var a="shanxi";
}
test();//Call function
console.log(a);
//ReferenceError: a is not defined
//Error report: a is undefined

When a variable is defined with var, if it is inside a function, the variable will be destroyed when the function exits and cannot be called again. Here, a uses var to complete the definition inside the function test. After calling the function test, a is destroyed immediately, so an error such as reporting occurs.

When the keyword var is omitted, the variables defined in this way will become global variables (but this is not recommended. Too many global variables will make the program difficult to maintain)

function test(){
    a="sichuan";
}
test();//Call function
console.log(a);
//sichuan

2) var declaration promotion (hoist)

As follows, the result is undefined and no error is reported, because the variable declared with var keyword will be automatically promoted to the top of the function scope. That is, it will be regarded as ECMAScript

function test(){
   console.log(a)
   var a=12;
}
test()
//undefined

That is, it will be regarded as ECMAScript

function test(){
   var a; 
   console.log(a)
   a=12;
}
test()
//undefined

This "promotion" will bring the declaration of all variables to the top of the function scope.

(2) let

Let and var have similar functions, except that the scope declared by let is block scope and that declared by var is function scope

For example, {} in the following if statement is a "block", not a function scope.

if(true){
    var b="zhang"
    console.log(b);//zhang
}
console.log(b);//zhang

Replace with:

if(true){
    let b="zhang"
    console.log(b);//zhang
}
console.log(b);//ReferenceError: b is not defined

At this time, B cannot be referenced outside the if (outside the scope of the block defining b).

!!! Note: a block scope is a subdomain of a function scope (the former is not necessarily the latter is not necessarily the former).

!!! Note: the scope limit applicable to var is equivalent to let (only one scope is function scope and the other is block scope).

For repeated declarations, var does not report an error, but let will report an error. See the following example:

var a=24;
var a=12;
var a=5;
console.log(a);//5
let b=2;
let b=4;//SyntaxError: Identifier 'b' has already been declared
//An error has been reported when running here
let b=8;
console.log(b);

For nested use, JavaScript will record the identifier used for variable declaration and the scope of its block, so there will be no error when nested use (because there are no repeated declarations in the scope of the same block).

var a="shanxi"
console.log(a);//shanxi
if(true){
    var a="sichaun";
    console.log(a);//sichuan
}
let b=3;
console.log(b);//3
if(true){
    let b=5;
    console.log(b);//5
}

Therefore, let and var differ only in that they determine the existence of the relevant scope of the declared variable.

var a;
let a;//SyntaxError: Identifier 'a' has already been declared
let c;
var c;//SyntaxError: Identifier 'c' has already been declared

1) Unlike var, the variables declared by let will not be promoted in the scope, which is called "temporary deadband"

console.log(a);
var a=2;//undefined
console.log(b);
let b=3;//ReferenceError: Cannot access 'b' before initialization

2) Global declaration

The variables declared by Var in the global scope will automatically become the properties of the window object, but let will not

var a=3;
console.log(window.a)//a
let b=10;
console.log(window.b);//undefined

However, the variables declared by let still occur in the global scope (otherwise it will not be "undeifned"), and the variables will continue in the life cycle of the page. Therefore, it must be ensured that the page will not declare the same variable repeatedly

(3) Const

It is basically the same as let, except that when const is used, variables must be initialized at the same time, and an error will be reported when trying to modify the variables declared by const

const n="zhang";
n="li";//TypeError: Assignment to constant variable.
const a=12;
const  a=9;//The declaration cannot be repeated
//SyntaxError: Identifier 'a' has already been declared

Of course, const's restrictions on declaration only apply to the reference of the variable it points to, that is, if it is an object, modifying the internal properties of the object will not violate const's restrictions.

const house={};

house.name="myhouse";

Then, after the emergence of let and const, many developers no longer use var a lot, but use let and const more, so that variables have a clear scope, declaration location and unchanged value.

Note: the conditional declaration of let and the use of let, var and const in for are not covered in this article. Those interested can search online