2.1 ES6 let and const

❮ Android Tutorial Dialog Verilog2 Rtl Low Power Design 1 ❯

2.1 ES6 let and const

Category ES6 Tutorial

ES2015 (ES6) introduced two important new JavaScript keywords: let and const.

Variables declared with let are only valid within the block they are declared.

const declares a read-only constant, whose value cannot be changed once declared.

let Command

Basic usage:

{
  let a = 0;
  a   // 0
}
a   // Error: ReferenceError: a is not defined

Block Scope

let is block-scoped, whereas var is globally scoped:

{
  let a = 0;
  var b = 1;
}
a  // ReferenceError: a is not defined
b  // 1

No Redeclaration

let can only be declared once, while var can be declared multiple times:

let a = 1;
let a = 2;
var b = 3;
var b = 4;
a  // Identifier 'a' has already been declared
b  // 4

let is suitable for loop counters:

for (var i = 0; i < 10; i++) {
  setTimeout(function(){
    console.log(i);
  })
}
// Outputs ten 10s
for (let j = 0; j < 10; j++) {
  setTimeout(function(){
    console.log(j);
  })
}
// Outputs 0123456789

The variable i is declared with var and is globally scoped, so there is only one global i. Each loop's setTimeout refers to this global i, which is 10 after the loop completes.

The variable j is declared with let, and each j is a new variable within the current loop iteration. Thus, each setTimeout refers to a different j, resulting in the output 0123456789. (JavaScript engines remember the value of j from the previous loop iteration.)

No Hoisting

let does not hoist variables, unlike var:

console.log(a);  // ReferenceError: a is not defined
let a = "apple";

console.log(b);  // undefined
var b = "banana";

The variable b declared with var is hoisted, so b exists but is uninitialized at the start of the script, resulting in undefined.

The variable a declared with let is not hoisted, so it does not exist before its declaration, leading to an error.

const Command

const declares a read-only variable that cannot be changed after declaration. It means that once declared, the variable must be initialized, or an error will occur.

Basic usage:

const PI = "3.1415926";
PI  // 3.1415926

const MY_AGE;  // SyntaxError: Missing initializer in const declaration

Temporal Dead Zone

var PI = "a";
if(true){
  console.log(PI);  // Cannot access 'PI' before initialization
  const PI = "3.1415926";
}

ES6 specifies that within a block containing let or const, these declarations form a closed scope from the start of the block. Using a variable before its declaration within the block results in an error.

Key Points

How does const ensure that a variable cannot be changed after initialization? const actually ensures that the memory address the variable points to cannot be changed, not the value itself. Simple types (number, string, boolean) store their values directly at the memory address, so const makes them immutable. Complex types (object, array, function) store a pointer to the actual data, so const only fixes the pointer, not the data structure. Therefore, caution is advised when using const with complex objects.