Home  >  Article  >  Web Front-end  >  Detailed explanation of the comparison between const, let and var in JavaScript ES6

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

陈政宽~
陈政宽~Original
2017-06-28 14:25:341576browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn