I. The difference between let and var
1. Regarding variable promotion, var can raise variables, let can't.
// For var, as shown below console.log(a); //Output undefined, which is variable escalation var a = 2; console.log(a); //2 //Equivalent to the following code var a; //Declare and initialize to undefined console.log(a); //Output undefined a=2; //assignment console.log(a); //2 //Front-end stack exchange learning circle: 866109386 //Help front-end personnel for 1-3 years, break through technology and enhance thinking // The let is shown below console.log(a); // Error-reporting Reference Error let a = 2; //It is equivalent to declaring a at the first line but not initializing until the assignment. //Declaring variables unassigned directly with let prints undefined, which is initialized let a; console.log(a);//Value undefined
2. Temporary Dead Zone: The let command exists in the block-level scope. The variables declared by the let command are "bound" in this area and are no longer subject to external influence. In short, a code block has let instructions. Even if there are variables with the same name outside, the variables with the same name inside the code block do not interfere with each other. And var won't, as follows:
//let var a = 123; if (true) { let a="abc"; console.log(a); //Output abc } console.log(a); //The output value is 123. Global A and local a do not affect each other. //Front-end stack exchange learning circle: 866109386 //Help front-end personnel for 1-3 years, break through technology and enhance thinking //var var a = 123; if (true) { var a="abc"; console.log(a); //Output abc } console.log(a); //The output value is abc, and the global value has been changed
In short, in a block of code, a variable is not available until it is declared using the let command. This is grammatically known as "temporal dead zone" (TDZ). Examples are as follows:
var tmp=1; if (true) { // TDZ start tmp = 'abc'; // ReferenceError console.log(tmp); // ReferenceError let tmp; // TDZ end console.log(tmp); // undefined //Front-end stack exchange learning circle: 866109386 //Help front-end personnel for 1-3 years, break through technology and enhance thinking tmp = 123; console.log(tmp); // 123 } console.log(tmp); //
3.let declares that within the bound block of code, the same variable cannot be declared repeatedly. var can
//a Can't Repeat Statements function sub() { let a = 10; var a = 1; } //Identifier'a'has already been declared function sub() { let a = 10; let a = 1; } //Ditto function sub() { let a = 10; {let a = 1;} //Not in the same code block at this time, no error will be reported. } //var can repeat declaration without error function sub() { var a = 10; var a = 1; }
4. Similar to the block of code for loop, let is only valid inside the block of code, and var is valid outside the block of code.
//let is only valid inside the block of code for (let i = 0; i < 10; i++) {} console.log(i); //Error reporting Reference Error: I is not defined //var is also valid outside the block of code for (let i = 0; i < 10; i++) {} console.log(i); //101 let stay for What's special about loops is that the part that sets the loop variables is a parent scope, while the inner part of the loop is a separate child scope. //Only in parent scope var a = []; for (let i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 6 //Subscope reassertion var a = []; for (let i = 0; i < 10; i++) { a[i] = function () { let i=3; //Reassign console.log(i); }; } a[6](); // 3. Get new values
let and const
1. Similarities: A. Variables do not increase. B. Temporary dead zone can only be used after the declared location. C. Non-repeatable declarations.
2. Differences: Variables declared by let can be changed. Const declares a read-only constant. Once declared, the value of the constant cannot be changed, and the assignment must be initialized when declared. let a; //undefined const b; //error reporting, must be assigned when declaring
let a=1; a=2; // changeable
const b=1; b=2; // Error reporting, cannot change value
// Some points that I think I should pay attention to are let a = null; //a = null a = undefined; //a = undefined a = 2; //a = undefined a = 2; //a = 2 const a = null; //a = null, const can also be defined as null and undefined const b=undefined; //b=undefined b=2; //error reporting, can not change the value.
Essence: const actually guarantees that the data stored at the memory address the variable points to will not be altered, not that the variable must not be altered. A. Five basic data types (Number,String,Boolean,Undefined,Null): The value is stored at the memory address to which the variable points, which is equivalent to a constant. The value cannot be changed. B. Complex Data Type (Object: Array, Object): The variable name of this type does not point to the data, but to the address where the data is located. const only guarantees that the address of the variable name will not change, and does not guarantee that the data of the changed address will not change. Therefore, the attribute value of the address can be modified, but it can not change the address direction.
const a=[]; a.push("Hello"); //Executable. Attribute values for address changes can be modified a.length=0; //Enforceable, ibid. a=["Tom"]; //Error reporting, address pointing cannot be changed const b ={}; b.prop=123; //Add an attribute to b to succeed b.prop //123 b={}; //Pointing b to another address will cause an error. //If you really want to freeze an object, you should use the Object.freeze method. const b=Object.freeze({}); // In normal mode, the following line does not work, b.prop is undefined // In strict mode, the bank will report errors b.prop = 123;