Detailed explanation of the comparison between const, let and var in JavaScript ES6

This article mainly introduces to you the relevant information on the comparison of const, let and var in JavaScript. The article introduces it in detail through sample code, which has certain reference and learning value for everyone. It is needed Friends, let’s follow the editor and take a look.

ECMAScript 6 New const and let commands are used to declare variables.

Declaration method	Variable promotion	Scope	Initial value	Duplicate definition
const	No	Block level	Required	No Allow
let	No	Block level	Not required	Not allowed
var	is	function level	is not required	is allowed

Variable promotion: const and let must be declared before use, variable promotion is not supported

console.log(c1, l1, v1);
// 报错
// Uncaught ReferenceError: c1 is not defined
 
const c1 = 'c1';
let l1 = 'l1';
var v1 = 'v1';

Scope: const, let supports block-level scope, effectively avoiding variable coverage

const c21 = 'c21';
let l21 = 'l21';
var v21 = 'v21';
 
if (0.1 + 0.2 != 0.3) {
 const c21 = 'c22';
 let l21 = 'l22';
 var v21 = 'v22';
 
 console.log(c21, l21, v21);
 // 输出 c22 l22 v22
}
 
console.log(c21, l21, v21);
// 输出 c21 l21 v22

Block-level scope Domain, the outer layer cannot directly access the inner variable

if (0.1 + 0.2 != 0.3) {
 const c22 = 'c22';
 let l22 = 'l22';
 var v22 = 'v22';
 
 console.log(c22, l22, v22);
 // 输出 c22 l22 v22
}
 
console.log(c22, l22, v22);
// 报错
// Uncaught ReferenceError: c22 is not defined
// 同样地, l22 is not defined

const defines constant, which cannot be assigned a value. But the property of this constant can be assigned a value

const c231 = {};
const c232 = [];
 
c231.name = 'seven';
c232.push(27);
 
console.log(c231, c232);
// 输出 {name: "seven"} [27]
 
// 禁止给对象赋值，应该使用 Object.freeze
 
const c233 = Object.freeze({});
const c234 = Object.freeze([]);
 
c233.name = 'seven';
// 普通模式下不报错
// 严格模式下报错
// Uncaught TypeError: Cannot add property name, object is not extensible
  
c234.push(27);
// 普通模式下就会报错
// Uncaught TypeError: Cannot add property 0, object is not extensible
 
console.log(c233, c234);
// 输出 {} []

Global variables are no longer set to the top-level object (window) attributes, effectively avoiding global variable pollution

const c24 = 'c24';
let l24 = 'l24';
 
console.log(c24, l24);
// 输出 c24 l24
 
console.log(window.c24, window.l24);
// 输出 undefined undefined

Conforming to the expected for loop

for (var i = 0; i != 3; i++) {
 setTimeout(function() {
  console.log(i);
 },10);
}
// 依次打印

for (let i = 0; i != 3; i++) {
 setTimeout(function() {
  console.log(i);
 },10);
}
// 依次打印，为啥呢

You can see that using the let method in the for loop to declare variables is in line with expectations.

Every time in the for loop, let redeclares the variable, and because the JavaScript engine will remember the value of the previous loop, initialize i and calculate it based on the previous round.

You can see that there are at least two levels of scope in the for loop. It is easier to understand by looking at the example below.

for (let i = 0; i != 3; i++) {
 let i = 'seven';
 console.log(i);
}
console.log('eight');
// 依次打印
seven
seven
seven
eight

Initial value: const The declared variable must have an initial value set and cannot be assigned repeatedly.

const c3 = 'c3';
let l3 = 'l3';
var v3 = 'v3';
 
console.log(c3, l3, v3);
// 输出 c3 l3 v3
 
c3 = 2; // Uncaught TypeError: Assignment to constant variable
l3 = 2;
v3 = 2;
 
console.log(c3, l3, v3);
// 输出 c3 2 2
 
const c32;
// 报错
// Uncaught SyntaxError: Missing initializer in const declaration

Duplicate definition: const and let do not support repeated definition

const and let reduce the scope of variables. Perfectly avoids variable pollution; const fixed variables (i.e. fixed variable types) can significantly improve performance for weakly typed JavaScript. It is recommended to use const and let to declare variables in your application.

Summarize

The above is the detailed content of Detailed explanation of the comparison between const, let and var in JavaScript ES6. For more information, please follow other related articles on the PHP Chinese website!