The difference between let and VaR

1.var

1.1 var Assignment

var message

Defines a name message The variable of , You can save any type of value （ Without initialization , The variable holds a special value undefined）.

var message = 'hi'

to message After the assignment , It can not only change the saved value , You can also change the type of value .（ Not recommended ）

1.2 var Declaration scope of

Use var The variable defined by the operator becomes a local variable of the function that contains it . such as , Use var Define a variable inside a function , This means that the variable will be destroyed when the function exits .

function test() {
        
	var message = "hi"; //  local variable 
	mess = "hi";     //  Global variables 
} 
test()
console.log(message,mess)   // message Report errors ,mess Output successful 

1.3 var Statement promotion of

The variable declared by the keyword will be automatically promoted to the top of the function scope ,var There is no problem repeating the statement .

function foo() {
        
	// var age  The statement is elevated here 
	console.log(age);   
	var age = 26; 
} 
foo();  // undefined  There's no mistake here , because age Your statement was promoted .

2.let

2.1 let There is no claim to promote （ Temporary dead zone ）

stay let The moment of execution before the declaration is called “ Temporary dead zone ”（temporal dead zone）, At this stage, any reference to a later declared variable is thrown ReferenceError

console.log(message)     //  Report errors 
let message = "hi"

2.1 let Declaration scope of

let And var The big difference ,let The scope of the declaration is the block scope , and var The scope of the declaration is the function scope .let Duplicate statements are not allowed .
Function scope > Block scope

// if Is block scope , Non functional scope ,var Out of the scope of the block will not be destroyed .
if (true) {
       
	var name = 'Matt';   
	console.log(name); // Matt 
	let age = 26;   
	console.log(age);   // 26
} 
console.log(name);   // Matt 
console.log(age);     // ReferenceError: age No definition 

3. Global declarations

Use let Variables declared in the global scope do not become window Object properties （var Declared variables will ）

var name = 'Matt'; 
console.log(window.name); // 'Matt' 
let age = 26; 
console.log(window.age);  // undefined 

4.let and var Of for Use

Yes, it is var Definition for The iteration variables of the loop will penetrate outside the loop body

for (var i = 0; i < 5; ++i) {
       //  Circular logic 

} 
console.log(i); // 5 

var There is no block scope

for (var i = 0; i < 5; ++i) {
         
	setTimeout(() => console.log(i), 0) 
} 
 The actual output 5,5,5,5,5
for (let i = 0; i < 5; ++i) {
         
	setTimeout(() => console.log(i), 0) 
} 
 The actual output 1,2,3,4,5

because var No block level scope ,JS When synchronous and asynchronous code exist at the same time , Asynchronous code will call after all synchronous code is executed . and setTimeout It's asynchronous code （ Even if the delay is zero, it is asynchronous ）, It will execute at the end of the code . So it is for After the loop is executed , Go again settimeout().
Also, if in for Nested in a loop function(), Programs are executed sequentially , therefore function This complex data type will exist in the heap , When for After the loop executes, the function starts to be called .

The function is executed immediately , This can be avoided

	<button> Button 1</button>
    <button> Button 2</button>
    <button> Button 3</button>
    <button> Button 4</button>
    <button> Button 5</button> 
    var btns = document.getElementsByTagName('button');
	for(var i=0; i<btns.length; i++){
    
        (function(num){
    
            btns[i].addEventListener('click',function(){
    
                console.log(' The first ' + num + ' A button is clicked ')
            })
        })(i)
    }