JS variable declaration var, let.const usage details

This time I will bring you a detailed explanation of the use of JS variable declarations var and let.const. What are the precautions for JS variable declarations var and let.const? The following is a practical case, let's take a look.

var declaration

The scope of the variableRestricted to the context of its declaration position

var x = 0; // x是全局变量，并且赋值为0。
console.log(typeof z); // undefined，因为z还不存在。
function a() { // 当a被调用时，
 var y = 2;  // y被声明成函数a作用域的变量，然后赋值成2。
 console.log(x, y);  // 0 2 
 function b() {    // 当b被调用时，
  x = 3; // 全局变量x被赋值为3，不生成全局变量。
  y = 4; // 已存在的外部函数的y变量被赋值为4，不生成新的全局变量。
  z = 5; // 创建新的全局变量z，并且给z赋值为5。 
 }     // (在严格模式下（strict mode）抛出ReferenceError)
 b();   // 调用b时创建了全局变量z。
 console.log(x, y, z); // 3 4 5
}
a();          // 调用a时同时调用了b。
console.log(x, z);   // 3 5
console.log(typeof y); // undefined，因为y是a函数的本地（local）变量。

letThe variable declared is only available in the block or subblock in which it is declared, var The scope of is the entire enclosing function

function varTest() {
 var x = 1;
 if (true) {
  var x = 2; // 同样的变量!
  console.log(x); // 2
 }
 console.log(x); // 2
}
function letTest() {
 let x = 1;
 if (true) {
  let x = 2; // 不同的变量
  console.log(x); // 2
 }
 console.log(x); // 1
}

In ECMAScript 2015, let bindings are not subject to variable hoisting, which means that let declarations are not hoisted to the top of the current execution context.

Before the variable in the block is initialized, referencing it will cause a ReferenceError (the opposite is true when using var to declare a variable, the value of the variable is undefined)
When used in a block, let will change the scope of the variable Limited to this block. Note that the scope of var is within the function in which it is declared.

var a = 1;
var b = 2;
if (a === 1) {
 var a = 11; // the scope is global
 let b = 22; // the scope is inside the if-block
 console.log(a); // 11
 console.log(b); // 22
} 
console.log(a); // 11
console.log(b); // 2

const A constant must specify its value at the time of declaration. The

const declaration creates a read-only reference to the value. But this does not mean that the value it holds is immutable (such as the reference content is an object), but the variable identifier cannot be reassigned. A constant cannot have the same name as other variables or functions in its scope

// 注意: 常量在声明的时候可以使用大小写，但通常情况下全部用大写字母。 
// 定义常量MY_FAV并赋值7
const MY_FAV = 7;
// 报错
MY_FAV = 20;
// 输出 7
console.log("my favorite number is: " + MY_FAV);
// 尝试重新声明会报错 
const MY_FAV = 20;
// MY_FAV 保留给上面的常量，这个操作会失败
var MY_FAV = 20; 
// 也会报错
let MY_FAV = 20;
// 注意块范围的性质很重要
if (MY_FAV === 7) { 
  // 没问题，并且创建了一个块作用域变量 MY_FAV
  // (works equally well with let to declare a block scoped non const variable)
  let MY_FAV = 20;
  // MY_FAV 现在为 20
  console.log('my favorite number is ' + MY_FAV);
  // 这被提升到全局上下文并引发错误
  var MY_FAV = 20;
}
// MY_FAV 依旧为7
console.log("my favorite number is " + MY_FAV);
// 常量要求一个初始值
const FOO; // SyntaxError: missing = in const declaration
// 常量可以定义成对象
const MY_OBJECT = {"key": "value"};
// 重写对象和上面一样会失败
MY_OBJECT = {"OTHER_KEY": "value"};
// 对象属性并不在保护的范围内，下面这个声明会成功执行
MY_OBJECT.key = "otherValue";
// 也可以用来定义数组
const MY_ARRAY = [];
// It's possible to push items into the array
// 可以向数组填充数据
MY_ARRAY.push('A'); // ["A"]
// 但是，将一个新数组赋给变量会引发错误
MY_ARRAY = ['B']

The following introduces the three ways to declare variables in javascript: var, let, const.

var declares global variables. In other words, the variables declared in

for loop can also be used when jumping out of the for loop.

for(var i=0;iThe sum declared inside the for loop can be used when jumping out of the for loop, and the result will pop up normally without error. <p style="text-align: left;"></p>let: Declare block-level variables, that is, local variables. <p style="text-align: left;"></p>In the above example, if you jump out of the for loop and use the sum variable again, an error will be reported. It has a strict scope. The variable only scopes the code block it currently belongs to. The same variable cannot be defined repeatedly and cannot be declared in When called before, it must be defined before use, and an error will be reported. You can use let<p style="text-align: left;"></p> in the loop body. Note: you must declare 'use strict'; before you can use let to declare variables, otherwise the results will not be displayed when browsing,<p style="text-align: left;"></p>const: used to declare constants, also has block-level scope, and can also be declared at block level. <p style="text-align: left;"></p><pre class="brush:php;toolbar:false">const PI=3.14;

It is the same as let, and the same variable cannot be defined repeatedly. Once const is defined, it cannot be modified.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to get the DOM element position in JS

What should you pay attention to in Vue front-end development

The above is the detailed content of JS variable declaration var, let.const usage details. For more information, please follow other related articles on the PHP Chinese website!