Home >Web Front-end >HTML Tutorial >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!