ECMAScript6 block-level scope and new variable declaration (let)_javascript skills

Many languages ​​have block-level scope, but JS does not. It uses var to declare variables and function to divide the scope. The curly brackets "{}" cannot limit the scope of var. Variables declared with var have the effect of variable hoisting (declaration hoisting).

A let has been added in ES6, which can be declared in {}, if, or for. The usage is the same as var, but the scope is limited to the block level, and there is no variable promotion for variables declared by let.

Example 1: Block-level scope if

function getVal(boo) {
  if (boo) {
    var val = 'red'
    // ...
    return val
  } else {
    // 这里可以访问 val
    return null
  }
  // 这里也可以访问 val
}

The variable val is declared in the if block, but val can be accessed outside the else block and if.

Replace var with let and it becomes like this

function getVal(boo) {
  if (boo) {
    let val = 'red'
    // ...
    return val
  } else {
    // 这里访问不到 val
    return null
  }
  // 这里也访问不到 val
}　

Example 2: Block-level scope for

function func(arr) {
  for (var i = 0; i < arr.length; i++) {
    // i ...
  }
  // 这里也可以访问到i
}

The variable i is declared in the for block, but it can also be accessed outside the for block.

Replace var with let, and i cannot be accessed outside for

function func(arr) {
  for (let i = 0; i < arr.length; i++) {
    // i ...
  }
  // 这里访问不到i
}

Example 3: Variable promotion (use first, declare later)

function func() {
  // val先使用后声明，不报错
  alert(val) // undefined
  var val;
}

The variable val is used first and then declared. It outputs undefined and does not report an error.

Replace var with let and an error will be reported

function func() {
  // val先使用后声明，报语法错
  alert(val)
  let val;
}　

Example 4: Variable promotion (judge first and then declare)

function func() {
  if (typeof val == 'undefined') {
    // ...
  }
  var val = ''
}

When using typeof judgment, you can also put it in front of the var statement

But replace var with let, and a syntax error is reported at if

function func() {
  if (typeof val == 'undefined') {
    // ...
  }
  let val = '';
}

ES6 stipulates that if let exists in a code block, this block forms a closed scope from the beginning. If used before declaration, an error will be reported. That is, within a code block, variables used before let are declared are not available. There is a term in grammar called "temporal dead zone", or TDZ for short. Of course, TDZ does not appear in the ES specification, it is only used for visual description.

Notes on let

1. Repeated declarations are not allowed

// var和let重复声明
var name = 'Jack';
let name = 'John';
 
// 两个let重复声明
let age = 24;
let age = 30;

Syntax error when executing

2. With let, the self-execution of anonymous functions can be eliminated

// 匿名函数写法
(function () {
 var jQuery = function() {};
 // ...
 window.$ = jQuery
})();
 
// 块级作用域写法
{
 let jQuery = function() {};
 // ...
 window.$ = jQuery;
}

The above is the entire content of this article, I hope you all like it.