Differences and Common Points of var, let and const

Keywords: Front-end Attribute

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;

Posted by ksas025 on Fri, 26 Apr 2019 06:03:36 -0700