Block-level scope

Before there was no block-level scope, there was only function scope and global scope, so what was the problem?

1. Variable promotion overwrites variables

When using var, there are cases where variables are raised, as in the following example:

var tmp = new Date(a);function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}

f();
Copy the code

TMP in f overwrites the value of TMP in the outer layer due to the promotion of the variable.

2. Loop variables used to count are leaked as global variables

var arr = [1.2.3];

for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}

console.log(i); / / 3
Copy the code

The variable I is used only to control the loop, but when the loop ends, it does not disappear and leaks out as a global variable.

Let and const

Let and const are block-level declarations. Block-level declarations are areas that are not accessible outside the block where variables are declared.

Compared to var, let and const have the following characteristics:

(1) Cannot repeatedly declare variables

var a = 1
let a = 1 // Identifier 'a' has already been declared
Copy the code

(2) There is no variable promotion and it can only be accessed in the declared block-level scope

if (true) {
    let b = 123
}
console.log(b) // ReferenceError: b is not defined
Copy the code

(3) Variables are not bound to global scopes

var c = 123
console.log(window.c) / / 123

let d = 234
console.log(window.d) // undefined
Copy the code

Temporal Dead Zone

The variable is not available within the code block until it is declared using the let command. This is grammatically called a “temporary dead zone”.

{
    console.log(val) // val is not defined
    let val = 1
}
Copy the code

Val stores the declaration in the temporary dead zone until it is declared. Accessing val at this point will give an error, and val will only be removed from the temporary dead zone once it has been declared.

const

Const Declares that a constant cannot be modified, but declares that an object can modify its internal attributes.

The reason is that const does not guarantee that the value of the variable is not modified, but that the memory address to which the variable points is not modified. For simple types like (Number,String), the value is stored at the memory address to which the variable points. But for composite types like Object and Array, the variable points to the memory address and holds only a pointer to the actual data.

What if you don’t want the object to be modified?

A: You can use object.freeze to handle this

const arr = Object.freeze([1.2.3])
arr[3] = 1
console.log(arr) / / [1, 2, 3]
Copy the code

In the above code, the constant arr refers to a frozen object, so adding an array item does not work and will cause an error in strict mode.

const a = Object.freeze({'c': {'abc':1}})

a.c.abc = 3
console.log(a.c.abc) / / 3
Copy the code

What if the properties in the variable don’t want to be changed?


var constantize = (obj) = > {
  Object.freeze(obj);
  Object.keys(obj).forEach( (key, i) = > {
    if ( typeof obj[key] === 'object') { constantize( obj[key] ); }}); };const a = {'c': {'abc':1}}
constantize(a)

a.c.abc = 3
console.log(a.c.abc) / / 1
Copy the code

The whole object and its properties are frozen by recursion so that its properties cannot be modified.

Reference: Ruan Yifeng let and const commands