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 the example code, which has certain reference and learning value for everyone. It is necessary 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	Not allowed
let	No	Block level	Not required	Not allowed
var	is	function level	is not required	allows

variable promotion: const and let must be declared before use, and 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 avoid 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, inner variables cannot be directly accessed from the outer layer

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 Define a constant, which cannot be assigned a value, but the attribute of the 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 The properties of the object (window) effectively avoid global variable pollution

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

Conform 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);
}
// 依次打印，为啥呢

Yes It is in line with expectations to use the let method to declare variables in a for loop.

Every time in 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 and perfectly avoid variable pollution; const fixed variables ( That is, fixed variable types), which 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!