Cannot access 'xxx' before initialization and the difference between var, let, and const

the code

let newStory = '今天气温 34 摄氏度，:inserta:出去遛弯。当走到:insertb:门前时，突然就:insertc:。人们都惊呆了，李雷全程目睹但并没有慌，因为:inserta:是一个 130 公斤的胖子，天气又辣么热。'
if (document.getElementById("american").checked) {
   let strWeight = newStory.match(/一个 (\S*) 公斤/)[1];
   let newStory = newStory.replace(strWeight + ' 公斤', weight + ' 英镑').replace(strTemperature + ' 摄氏度', temperature + ' 华氏度');
}

wrong reason

In the block scope, the variable declared by let is promoted, but the variable is only created and promoted, and the initialization is not promoted. Using the variable before initialization will form a temporary dead zone.

The difference between var, let, and const

variable hoisting

In layman's terms, variable promotion refers to the behavior that the JavaScript engine lifts the declaration part of the variable and the declaration part of the function to the beginning of the code during the execution of the JavaScript code. After the variable is promoted, the default value of undefined is set to the variable.

No matter where the variable declaration is written, it will eventually be referred to the top of the scope.

console.log(num) //undefined
var num = 1 
//相当于如下代码
var num
console.log(num)
num = 1

The function declaration is promoted. The first promotion is var fn. At this time, fn is a variable and has not been assigned a function, so the fn method cannot be executed.

//相当于在此处声明var fn
fn()
var fn = function () {
	console.log(1)  
}
// 输出结果：Uncaught TypeError: fn is not a function

foo()
function foo () {
	console.log(2)
}
// 输出结果：2

let,const

There is a temporary dead zone for let and const (temporary dead zone: variables are created but not initialized, and variables cannot be used, "Cannot access 'value' before initialization"), which is only improved in the variable creation phase, not in the initialization phase Ascension, forming a temporary dead zone.

Advantages of Variable Hoisting

Declaration promotion during parsing and precompilation can improve performance, allowing functions to pre-allocate stack space for variables during execution;

Statement promotion can also improve the fault tolerance of JS code, so that some non-standard code can also be executed normally.

scope

var does not have the concept of block-level scope. If you want to come up with a method to protect internal variables, you can use closures to solve it; let and const have the concept of block-level scope.

block scope

Block-level scope is a piece of code wrapped in a pair of braces, such as functions, judgment statements, loop statements, and even a single {} can be regarded as a block-level scope (note that {} in the object declaration not block scope). Simply put, if a language supports block-level scope, the variables defined inside the code block cannot be accessed outside the code block, and after the code in the code block is executed, the variables defined in the code block will be destroyed.

repeat statement

var can declare the same variable repeatedly, let and const cannot, and variables declared by const cannot directly modify the value.

const

const declares a read-only constant. Once declared, the constant's value cannot be changed. Once a const variable is declared, it must be initialized immediately and cannot be left for later assignment.

Note : It is not the value of the variable that cannot be changed, but the data stored in the memory address pointed to by the variable must not be changed.
For simple types of data (numbers, strings, Boolean values), the value is stored at the memory address pointed to by the variable, so it is equivalent to a constant.
‼ But for composite types of data (mainly objects and arrays), the memory address pointed to by the variable is only a pointer to the actual data, and const can only guarantee that the pointer is fixed (that is, it always points to another fixed address) , As for whether the data structure it points to is mutable, it is completely out of control. Therefore, one must be very careful about declaring an object as a constant.
const a = ['123'];
a = ['456'];
console.log(a);
=> Error "Assignment to constant variable."