What are the variable declaration methods in JS?

This time I will bring you what methods of variable declaration in JS and what are the precautions for variable declaration in JS. The following is a practical case, let's take a look.

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）变量。

Variables declared by let are only available in the block or sub-block in which they are declared. The scope of var is the entire enclosed 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 binding is not subject to variable promotion constraint, which means that the let declaration will not be 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, and const.

var declares global variables. In other words, the variables declared in the for loop can also be used outside the for loop.

for(var i=0;i<p style="text-align: left;">The 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><p style="text-align: left;">let: Declare block-level variables, that is, local variables. </p><p style="text-align: left;">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><p style="text-align: left;"> 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><p style="text-align: left;">const: used to declare constants, also has block-level scope, and can also be declared at block level. </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:

Use Vue to dynamically set routing parameters

Detailed explanation of vue calculated properties and listener practical projects

The above is the detailed content of What are the variable declaration methods in JS?. For more information, please follow other related articles on the PHP Chinese website!