Block-level scope problems extended by let, const syntax

Today I’m going to talk to you about JavaScript’s block-level scope from ES6’s declaration syntax, let, const. The difference between var, let, and const is well known and has been described in many articles in the community, so I will simply repeat it in a table.

The difference between the var/let/const

To demonstrate this, use code:

/* * var demo */
console.log(testVar);// undefined

var testVar = 'var';

console.log(testVar);// var

testVar = 'var2';

console.log(testVar);// var2

var testVar = 'var3';

console.log(testVar);// var3

/* * let demo */
console.log(testLet); // ReferenceError: testLet is not defined

let testLet = 'let';

console.log(testLet); // let

testLet = 'let2';

console.log(testLet); // let2

let testLet = 'let3'; // SyntaxError: Identifier 'testLet' has already been declared

/* * const demo */
console.log(testConst);// ReferenceError: testConst is not defined

const testConst = 'const';

console.log(testConst);// const

testConst = 'const2'; // SyntaxError: Identifier 'testConst' has already been declared

const testConst = 'const3' // SyntaxError: Identifier 'testConst' has already been declared


Copy the code

Block-level scope

What is the scope?

The current execution context. The context in which values and expressions are “visible” or accessible. If a variable or other expression is not “in current scope”, it is not available. Scopes can also be layered by code hierarchy so that the child scope can access the parent scope, usually by looking up along a chain of scopes rather than referring to variables and references in the child scope from the parent. – the MDN

JavaScript has long had only function scope and global scope. Because var declares variables that are defined within the nearest function or in the global lexical context, the block-level scope is ignored directly. So much so that early ES6 and earlier JavaScript did not have block-level scopes.

What is block-level scope?

The following figure

There are three lexical environments in the declaration (global scope, function scope, and loop). With block-level scope, variables can be declared inside the loop, independent of function scope. Thus, a block-level scope can be thought of as a subscope of a function scope or global scope.

Lexical environment: Used internally by the JavaScript engine to track the mapping of identifiers to specific variables.

Many things are inconvenient without block-level scopes, such as if you want to modularize, you can only fake block-level scopes with function scopes to prevent global contamination of variables.

(function(){
    // From here is the function scope
    / / statements
    / / variable}) ();Copy the code

whyconst,letCan you form block-level scopes?

Let and const define variables directly in the nearest lexical context (either block-level scope, loop, function, or global context). We can define block-level, function-level, and global-level variables using let and const.

If this article is helpful to you, you can like it and follow it