A, the difference between

Description:

  1. Var declares that variables are promoted, but let and const do not
  2. Let and const are block-level local variables
  3. Let and const cannot declare variables of the same name in the same scope. Var can

Detailing:

  1. Var defines variables. There is no concept of blocks. It can be accessed across blocks, but not across functions. There are variable elevations.
  2. Let defines variables that can only be accessed within the current block-level scope and cannot be accessed across functions. Variable free promotion.
  3. Const defines a constant that can only be accessed within the current block-level scope, cannot be accessed across functions, must be initialized (that is, must be assigned), and cannot be modified (reference data types, such as objects to which memory addresses cannot be changed, but properties within them can be modified); Variable free promotion.

Const let var

  • Const must be initialized when a variable is declared. Var and let are not
// 1, var var a; a = 1; Console. log(a) // can print 1 // 2, const const b; b = 2; Log (b) // HTML: 42 Uncaught SyntaxError: Missing initializer in const declaration // 3, let let c; c = 3; Console.log (c) // Can print 3Copy the code
  • Modify values (basic and reference data types)
// 1, var var aa = 1; aa = 2; Console. log(aa) // print out 2 and prove that it can be modified // 2, let let bb = 1; bb = 2; Console. log(bb) // print 2, const const cc = 1; cc = 2; Console. log(c) // Uncaught TypeError: Assignment to constant variable -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- line -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - 12123123123131 modified reference (complex) data types Const obj = {name: 'name ', age:' age '; {name: 'name', age: 18, sex: 'name', age: 18, sex: "Male"} / / modify the elements of an array of const TEAM = [' 1 ', '2', '3', '4'] TEAM. Push (' 5 '). The console log (TEAM) / / [" 1 ", "2", "3", "4", "5"]Copy the code
  • Whether there is a variable promotion
// 1, var aaa = 1; var aaa; Console. log(aaa) // let BBB = 1; let bbb; Console. log(BBB) Uncaught ReferenceError: Cannot access 'BBB' before initialization // 3, const CCC = 1; const ccc; Uncaught SyntaxError: Missing initializer in const declaration console.log(CCC)Copy the code

  • Block-level scope

Block-level scope

Before ES6, there were three types of scope in JavaScript:

1. Global scope

2. Function scope

3. Eval scope

Variables or methods declared in these scopes are valid only in the current scope; references in other scopes return undefined.

ES6 adds a new scope: block-level scope

ES5 also has braces, but ES5 does not have a block-level scope. How do you determine if {} is block-level?

Let and const are used

Therefore, we can think of block-level scope as: variables declared with let and const only take effect within the current wide symbol, thus creating a block-level scope.

Here “in braces” mainly refers to the following situations:

/ / conditional statements the if () {} / / switch statement switch () {} / / for/while loop statements for () {} while () {} / / try... Try () catch (err) {}Copy the code

Note: The braces of an object are not block-level scopes, because variables cannot be declared directly inside them;

Iv. Case and application

Lets are well suited for block-level scoping inside for loops. In JS, the for loop body is special. Each execution is a new and independent block scope. After passing variables declared by let into the scope of the for loop body, they will not change, and are not affected by the outside world. Look at a common interview question:

for (var i = 0; i <10; I++) {setTimeout(function() {// synchronously register callback functions to the asynchronous macro task queue. console.log(i); // When this code is executed, the synchronization code for loop has completed}, 0); } // setTimeout () {// setTimeout () {// setTimeout ()Copy the code

If we change var to let declare:

// I is declared in the global scope, but when used in the local scope of the for body, the variable is fixed. for (let i = 0; i < 10; i++) { setTimeout(function() { console.log(i); // I is the local scope of the loop, which is not affected by the outside world. }, 0); } // Output: 0 1 2 3 4 5 6 7 8 9Copy the code

case

var btns = document.getElementsByTagName('button'); for (var i = 0; i < btns.length; I++) {BTNS [I] onclick = function () {the console. The log (' first '+ (I + 1) +' clicked '); }; } Output: which button is clicked will print the corresponding console log, for example: the first button was clickedCopy the code

Ps: This case is equivalent to forming a closure in a for loop

Change let to var:

var btns = document.getElementsByTagName('button'); for (var i = 0; i < btns.length; I++) {(function a (I) {BTNS [I] onclick = function () {the console. The log (' first '+ (I + 1) +' clicked '); }; })(i) }Copy the code