The difference between let var const declaration variables in JavaScript

var - ES5 variable declaration method

1. When the variable is not assigned a value, the variable value is undefined (it is also undefined when the variable is declared for use)
2. Scope: The scope of var is the method scope; as long as it is defined in the method, the code after defining the variable in the entire method can be used

let - ES6 variable declaration method

1. An error will be reported if the variable is used directly before the declaration
2. Scope - let is block scoped - generally let is less scoped than var
3. let prohibits repeated declaration of variables, otherwise an error will be reported; var can be declared repeatedly

const - ES6 variable declaration method

1. const is a constant declaration method; when declaring a variable, it must be initialized, and the value of the constant cannot be modified in the code that appears later

2. What const actually guarantees is not that the value of the variable cannot be changed, but that the memory address pointed to by the variable cannot be changed

Summarize

1. Variables defined by var can be pre-parsed and called in advance, and the result is undefined. Variables defined by let and const cannot be pre-parsed, and the result of calling in advance is an error.
2. For variables defined by var, the variable name can be repeated, and the effect is repeated assignment. Variables defined by let and const cannot be repeated, otherwise an error will be reported.
3. The variable scope defined by var is global/local scope. Variables defined by let and const can only be called in {} if they are in {}.
4. The loop variable defined by var and the loop variable defined by let in the loop statement. The principle of execution and the effect of execution are different.
5. The data value stored in the variable defined by const cannot be changed, that is, the variable defined by const cannot be assigned repeatedly.

code demo

call ahead

 console.log( int1 );// 提前调用 预解析  结果：undefined
 console.log( int2 );//报错
 console.log( int3 );//报错

 var int1 = 100 ;
 let int2 = 200 ;
 const int3 = 100;

// var定义的变量，可以预解析提前调用, 结果是undefined，let、const定义的变量不能预解析，提前调用的结果是报错。

Duplicate variable name

var int1 = 100 ;
let int2 = 200 ;//报错
const int3 = 200;//报错

// var变量名称重复 重复赋值效果
var int1 = '北京' ;
console.log( int1 );//北京

// 变量名称重复 结果是报错
let int2 = '上海' ;//报错
const int3 = 400;//报错

//var定义的变量，变量名称可以重复，效果是重复赋值，let、const定义的变量不能重复，否则报错

Variables defined by const and let can only be called in {} if they are in {}

if( true ){
    
    
     var a = 300 ;
     let b = 400 ;
     console.log( b );//400
 }
 console.log( a ) ; //300
 // let 声明的变量 在 { } 外 不能调用 
 console.log( b );//b is not defined

//var定义的变量作用域是全局/局部作用域。let、const定义的变量如果在{}中只能在{}中调用。

Variables defined by const cannot be assigned repeatedly

 const c = 100 ;
 c = 200 ;//执行报错
 
const arr = [1,2,3,4,5] ;
// 只是修改引用数据类型中,数据单元存储的数据
// 没有修改 arr变量中 存储的引用数据类型的内存地址
arr[0] = '北京' ;
console.log( arr );//[ "北京", 2, 3, 4, 5 ]

//本质是const定义的变量，内存指向不能改变
//const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动 

The difference between the loop variable declared by let and var in the loop

event binding

通过for循环给标签绑定事件，一打开执行界面，事件绑定就结束了，也就是循环已经结束了，也就是说触发事件时循环已经结束了。

The data value stored in the loop variable

loop variable declared by var

Only one loop variable i is defined in the entire loop variable process, and this loop variable i is repeatedly assigned in each loop, that is, the value of the subsequent loop variable will overwrite the value of the previous loop variable. When the loop ends, there is only one loop variable i, which stores the final value of the loop variable .

loop variable declared by let

在整个循环过程中每次循环都相当于触发执行了一个{   }，每一个{   }对于let定义的变量就是一个独立的作用域，也就是每次循环let声明的循环变量都是一个人独立作用域中的循环变量，每一次循环中循环变量都会存储不同的数据数值，互相之间不会影响，不会覆盖，也就是每次循环let声明的循环变量都相当于是一个独立的变量，不会覆盖之前的数据数值。

code demo

 <ul>
        <li>我是第一个li</li>
        <li>我是第二个li</li>
        <li>我是第三个li</li>
        <li>我是第四个li</li>
        <li>我是第五个li</li>
 </ul>
 
<script>
    // 给 li 绑定事件 点击 li标签 弹出 索引下标
    // 获取标签对象
    const oLis = document.querySelectorAll('ul>li');

    // 通过 for循环 给 li标签 绑定事件
    for( var i = 0 ; i <= oLis.length -1 ; i++ ){
    
    
        oLis[i].addEventListener( 'click' , function(){
    
    
            console.log( `我是var循环的i ${
      
      i}` );
        })
    }

    for( let j = 0 ; j <= oLis.length -1 ; j++ ){
    
    
        oLis[j].addEventListener( 'click' , function(){
    
    
            console.log( `我是let循环的i ${
      
      j}` );
        })
    }

</script>

//结果
//点击第一个li  我是var循环的i 5 
//点击第一个li  我是let循环的i 0 

//点击第二个li  我是var循环的i 5 
//点击第二个li  我是let循环的i 1 

//点击第三个li 我是var循环的i 5 
//点击第三个li 我是let循环的i 2 
我是var循环的i 5 
我是let循环的i 3 
我是var循环的i 5 
我是let循环的i 4