Translator: chaussen

The original link

JAVASCRIPT ES2015 — Using let and const

Learn the basics of var, let and const variables in 3 minutes

Let and const can declare scope variables in blocks. These are new features in the ES2015 release. In addition to being scoped, these variables cannot be declared postponingly. Let’s spend three minutes exploring the basics of var, let, and const variables.

Comparison of var, let, and const variables

** Let’s take a look at what these variables mean. ** Var is the most extensive of the three variables.

**var** – Variables declared with var can be assigned new values or retained. This variable can be used either inside or outside the scope of a code block.

**let** — Let declares a variable with a slightly smaller scope than var. This variable can also be assigned a new value, but the block in which it is defined can only be used within that block.

**const** – Const is the smallest of the three variables and cannot be changed after assignment. It can only be used within this range when defined in a block. (Although the attributes inside the variable can be modified)

Code block scope

The scope of a variable declared with VAR can be global or local, or limited to the function in which the variable is declared. Code blocks like if, for, while, {} do not affect the scope of the var variable.

Let and const variables, on the other hand, are scoped within the block in which they are defined. Let’s look at an example:

let x = 1;

Copy the code
{ let x = 2; console.log(x); // the value of x is 2}Copy the code
console.log(x); // Outside the range, the x value is 1Copy the code

As you can see, the curly braces create a code block, which limits the scope of the x variable in the code block.

Of course, we have to pay attention to one thing. If two variables with the same name are declared within the same block, the program will report an error:

let x = 1;
let x = 2;

Copy the code
Uncaught SyntaxError: Identifier 'x' has already been declared SyntaxError: variable name 'x' has already been declaredCopy the code

The rear statement

Let and const variables cannot be postdeclared and must be initialized before they can be referenced.

Consider the following examples:

function sayMeow(){ console.log(cat); // undefined the cat variable can be referenced. Its value is undefined console.log(dog); // Uncaught ReferenceError: dog is not definedCopy the code
  var cat = 'meow';
  let dog = 'woof';
}

Copy the code

The var variable can be declared postpended, so the cat variable can be referenced with a record function first, and its value is undefined. Let variables and const variables cannot be declared postpended, so if the dog variable is referenced before it is declared, the application will generate ReferenceError.

Const variable

Let’s finally talk about const variables. As mentioned earlier, the block scope rule for let variables also applies to const variables. The only difference is that const variables cannot be assigned new values. Let’s look at an example:

const cat = 'meow';
console.log(cat) // 'meow'

Copy the code
cat = 'woof'; // Uncaught SyntaxError: Identifier 'cat' has already been declared SyntaxError: variable name 'cat' has already been declaredCopy the code

But const variables are not completely immutable. Attributes in variables can still be modified. Such as:

const cat = {
  sound: 'meow'
}

Copy the code
console.log(cat.sound); // 'meow'

Copy the code
cat.sound = 'woof';

Copy the code
console.log(cat.sound); // 'woof'

Copy the code

Key memory points

  • The var variable is the broadest of the three, and code that already uses it will not be affected by the new let and const variables.

  • Do not continue to use var variables. Variables that do not need to be modified should be const and let instead.