JS 변수 선언 var, let.const 사용 세부정보

이번에는 JS 변수 선언 var 및 let.const의 사용에 대한 자세한 설명을 가져왔습니다. JS 변수 선언 var 및 let.const의 주의 사항은 무엇입니까?

var 선언변수의 범위는 선언된 위치의 컨텍스트로 제한됩니다

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

let 선언된 변수는 선언된 블록 또는 하위 블록 내에서만 사용할 수 있으며 var의 범위는 전체 인클로징 함수

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
}

ECMAScript에서 2015에서는 let 바인딩에 변수 호이스팅이 적용되지 않습니다. 즉, let 선언이 현재 실행 컨텍스트의 맨 위로 호이스팅되지 않습니다.
블록의 변수가 초기화되기 전에 이를 참조하면 ReferenceError가 발생합니다. (반대로 var를 사용하여 변수를 선언하는 것은 정의되지 않습니다.)
블록에서 사용하는 경우 변수의 범위를 해당 블록으로 제한합니다. var의 범위는 선언된 함수 내에 있습니다.

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 상수는 선언 시 해당 값을 지정해야 합니다.

const 선언은 값에 대한 읽기 전용 참조를 생성합니다. 그러나 이것이 보유하는 값이 변경 불가능하다는 의미는 아니지만(예: 참조 내용은 객체임) 변수 식별자를 재할당할 수 없습니다. 상수는 해당 범위에 있는 다른 변수나 함수와 동일한 이름을 가질 수 없습니다

// 注意: 常量在声明的时候可以使用大小写，但通常情况下全部用大写字母。 
// 定义常量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']

다음은 javascript에서 변수를 선언하는 세 가지 방법인 var, let 및 const를 소개합니다.

var는 전역 변수를 선언합니다. 즉, for 루프에 선언된 변수는 for 루프 외부에서도 사용할 수 있습니다.

for(var i=0;i<=1000;i++){ 
var sum=0; 
sum+=i; 
} 
alert(sum);

for 루프 내부에 sum을 선언하면 for 루프에서 빠져나올 때 사용할 수 있으며 결과는 오류 없이 정상적으로 팝업됩니다.

let: 블록 수준 변수, 즉 로컬 변수를 선언합니다.

위의 예에서 for 루프에서 벗어나 sum 변수를 다시 사용하면 오류가 보고됩니다. 변수는 현재 속한 코드 블록의 범위만 지정합니다. 반복적으로 정의해야 하며 선언되기 전에는 호출할 수 없습니다. 먼저 정의한 후 사용하면 오류가 보고됩니다. 루프 본문에서 let을 사용할 수 있습니다.

참고: 'use strict'를 선언해야 합니다. let을 사용하여 변수를 선언하기 전에 그렇지 않으면 탐색할 때 결과가 표시되지 않습니다.

const: 상수를 선언하는 데 사용되며 블록 수준 범위도 포함하며 블록 수준도 선언할 수 있습니다.

const PI=3.14;

let과 동일하며, 동일한 변수를 반복해서 정의할 수 없습니다. const는 한 번 정의하면 수정할 수 없습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JS에서 DOM 요소 위치를 얻는 방법

Vue 프론트엔드 개발에서 주의해야 할 사항

위 내용은 JS 변수 선언 var, let.const 사용 세부정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!