Explain the difference and usage of let and const in JavaScript VaR and ES6 specification

Time:2020-8-14

With the advent of ES6 specification, the method of defining variables in JS has developed from single var to VaR, let and const. VaR is well known, but what are the new features of these two new products? When should I use it? The following is a detailed explanation of the differences between VaR in JavaScript and let and const in ES6 specification

Let’s talk about the VaR method to define variables. What’s wrong?

JS has no block level scope

Take a look at this rule: the VaR declaration in JS functions has the scope of the entire body of the function.


  for(var i=0;i<10;i++){
     var a = 'a';
  }
  console.log(a);

Although you have already jumped out of the for loop, you can still access the variable a defined in the for loop, and even I can be accessed~

2. The variables in the loop are over shared**

You can guess what happens when the following code is executed


for (var i = 0; i < 3; i++) {
   setTimeout(function () {
    console.log(i)
   }, 1000);
 }

Run it in the browser and see if it’s the same as you expected?

Yes, the console outputs three 3’s instead of the expected 0, 1, 2.

In fact, the answer to this question is that the loop itself and the three timeout callbacks share the unique variable * * I. When the loop ends execution, the value of I is 3. So when the first timeout is executed, the I of the call will be 3.

So far, my guest must have guessed what let is used for.

You’re right. It’s about solving these two bugs. You can replace the VaR in the above two examples with let and run it again.

Note: you must declare ‘use strict’ before you can use let to declare variables, otherwise browsing will not display results

Let is the more perfect var

Let declared variables have block level scope. In other words, the scope of variables declared with let is only the outer block, not the entire outer function. Let declaration still retains the promotion feature, but it will not be promoted blindly. In example 1, by replacing VaR with let, you can quickly fix the problem. If you use let to declare everywhere, you will not encounter similar bugs.

The global variable declared by let is not a property of the global object. This means that you can’t access these variables through window. Variable names. They only exist in the scope of an invisible block, which is theoretically the outer block of all JS code running in a web page.

A loop like for (let x…) creates a new binding for X at each iteration.

This is a very subtle difference. For example 2, if a for (let…) loop executes multiple times and the loop maintains a closure, each closure will capture different values of a loop variable as a copy, instead of all closures capturing the same value of the loop variable.

So in example 2, we also fix the bug by replacing VaR with let.

This situation is applicable to the three existing loops: for of, for in, and the traditional C-like loop separated by semicolon.

Redefining variables with let throws a syntax error.

It’s easy to understand. Speak in code


let a = 'a';
let a = 'b';

The above writing method is not allowed. The browser will report an error because it is defined repeatedly.

**Beyond these differences, let and VaR are almost similar. For example, they all support comma separated declaration of multiple variables, and they all support deconstruction features. * *

The third declaration class keyword introduced by ES6: const

In a word, const is used to define constants! It is illegal to write “Fei” or “Liu”

For example:

//Only declare variables and not assign values
const a
In this way:
//Repeating variable declaration
const a = 'a';
const a = 'b';

There are also the following:

//Reassign variables
const a = 'a';
a = 'b'

Another black Technology:

//However, it is not recommended to do so. It is really meaningless. Constant, constant, constant is called constant~
const a = {a:'a'};
//Of course, reassignment doesn't work
a = {a:'b'};
//Hey, hey, hi tech
a.a = 'b'

Const really has nothing to say. Ordinary users can use it without any problem. How to use high end (BI) users is a problem.

The above is the summary of the usage of VaR, let and const. If there is something wrong, please point out it.

For more details on the JavaScript ES6 specification, please see the related articles below

Recommended Today

How to build desktop application easily with HTML, CSS and JavaScript

Can HTML, CSS and JavaScript really be used to build desktop applications? The answer is yes. In this article, we will focus on how electron uses web technologies such as HTML, CSS, and JavaScript to create desktop applications. Electron Electron can be used to build desktop applications using HTML, CSS, and JavaScript. These applications are […]