var keyword

Function: followed by variable name, used to define variables

var num

Here, a num variable is defined through the var keyword. We do not initialize num. at this time, the value of num is undefined

var str ="kobe"
str=123

Here, a variable str that stores the string value of "kobe" is defined through the var keyword. The data type of str is not specified. The code in the second line changes the storage value and the data type at the same time (changing the type is not recommended)

Declaration scope (function scope)

• Under global scope

var str = "hello,word"
function test() {
    console.log(str)
}
test() //hello ,world

In the global scope, str variables defined by var keyword are global variables

var num1 = 1
console.log(window.num1, window.num2)	//1，undefined
var num2 = 2
console.log(window.num1, window.num2)	//1,2

Note here that variables declared globally using var will become attributes of window objects

• Function body:

function test(){
	var str="hello, world"
}
console.log(str)    //report errors!

The str variable is defined in the function body through the var keyword. When the function is called, this variable will be created and assigned a value. Similarly, after the function is executed, the variable will be destroyed. In other words, this variable is only valid within the scope of the function, and we can't access it outside the function body.

• Omit var keyword in function body

test()
console.log(str)  //hello, world
function test() {
    str = "hello,word"
}    

It is also defined in the function body. The difference is that the var keyword is omitted. When the test function is called (as long as it is called once), it will create a global variable str, which will become the attribute of window as defined in the direct global scope

Variable promotion

• Example 1

console.log(str)    //undefined
var str = "hello,word"
console.log(str) 	//hello, world

No error will be reported here, which is equivalent to executing the following code

var str
console.log(str)	//undefined
str="hello, world"
console.log(str)	//hello, world

• Example 2

var num = 1
var num = 2
console.log(num)	//2
var num = 3
var num = 4
console.log(num)	//4

It is equivalent to executing the following code

var num
num=1
num=2
console.log(num)	//2
num=3
num=4
console.log(num)	//4

This is the variable "promotion" of the var keyword, that is, pulling all variable declarations down to the top of the scope.

let keyword

The function of let keyword is similar to that of VaR keyword, but compared with VaR, let is more rigorous. Let keyword does not have "variable promotion", and the scope of let key declaration is block scope, while var keyword is function scope

Function: followed by the variable name to define the variable

let str
str = 123
console.log(str)	//123
str = "kobe"
console.log(str)	//kobe

Declared scope (block level scope)

{
     var num = 1
}
console.log(num)	//1

{
    let num = 1
    console.log(num)	//1
}
console.log(num)	//report errors!

As mentioned at the beginning, let keyword is different from var keyword. Its declaration scope is block level scope, and the variable cannot be accessed outside the scope

var num=1
{
    let num=2
    console.lgo(num)	//2
}

{
    var num = 1
    let num = 2
    console.log(num)	//report errors
}

{
    let num=1
    let num=2
    console.log(num)	//report errors
}

For let keywords in the same block level scope, the same identifier will report an error

Unlike the var keyword, the variables declared by the let keyword in the global scope will not become the attributes of the window object

Temporary dead zone

Compared with the var keyword, the variables declared by let are not promoted in the scope.

console.log(num)	//report errors! undefined will not be printed here like var
let num=1

The moment of execution before num is declared becomes a "temporary dead zone"

Classic examples

for(var i=0;i<5;i++){
    
}
console.log(i)		//5

The iteration variables defined by the var keyword will penetrate outside the loop body

for(let i=0;i<5;i++){
    
}
console.log(i)		//report errors!

The scope of the iteration variable is the block level scope of the loop body. The variable scope defined by the let keyword is the block level scope, so an error will be reported for external access

for (var i = 0; i < 5; i++) {
    console.log(i)
}
//0 1 2 3 4


for(var i=0;i<5;i++){
    setTimeout(()=>{console.log(i)},0)
}
// 5

After adding the timer function, the print result changes. This is because when exiting the loop, the iteration variable saves the value that causes the loop to exit: 5. When executing the timeout function later, all i are the same value: 5

for(let i=0;i<5;i++){
    setTimeout(()=>{console.log(i)},0)
}
//Print results 0 1 2 3 4

This is because the background will declare a new iteration variable for an iteration loop. They are independent of each other. Each timeout function prints different variable instances

const keyword

Const keyword is similar to let. The only important difference is that const keyword must be initialized when declaring variables, and an error will be reported when modifying the variables defined by const (here refers to modifying the memory address), and an error will not be reported when modifying an attribute inside an object