JavaScript의 범위와 어휘 범위 마스터하기

JavaScript의 범위 및 어휘 범위

범위 및 어휘 범위를 이해하는 것은 효율적이고 오류 없는 JavaScript 코드를 작성하는 데 필수적입니다. 이러한 개념은 변수에 액세스하는 방법과 코드에서 변수를 사용할 수 있는 위치를 나타냅니다.

1. JavaScript의 범위

범위는 현재 실행 컨텍스트를 나타내며 변수의 가시성과 접근성을 결정합니다. JavaScript에는 세 가지 유형의 범위가 있습니다.

아. 블록 범위

• let 및 const로 선언된 변수는 블록 범위이므로 해당 변수가 정의된 블록 내에서만 액세스할 수 있습니다.
• ES6에서 도입되었습니다.

예:

{
  let a = 10;
  const b = 20;
  console.log(a, b); // Output: 10, 20
}
console.log(a); // Error: a is not defined

베. 기능 범위

• var로 선언된 변수는 함수 범위입니다. 선언된 전체 함수 내에서 액세스할 수 있습니다.
• 블록 경계를 존중하지 않습니다.

예:

function testFunctionScope() {
  if (true) {
    var x = 10; // Function-scoped
  }
  console.log(x); // Output: 10
}
testFunctionScope();

ㄷ. 글로벌 범위

• 함수나 블록 외부에서 선언된 변수는 전역 범위에 있으며 프로그램 어디에서나 액세스할 수 있습니다.

예:

var globalVar = "I am global";
console.log(globalVar); // Output: I am global

2. 어휘 범위

어휘 범위는 변수의 범위가 소스 코드에서의 위치에 따라 결정된다는 의미입니다. 함수는 호출될 때가 아니라 정의될 당시의 범위 체인을 사용하여 실행됩니다.

아. 스코프체인

스코프 체인은 JavaScript가 변수 참조를 해결하는 데 사용하는 범위의 계층 구조입니다. 현재 범위에서 변수를 찾을 수 없으면 외부 범위를 살펴보고 전역 범위에 도달할 때까지 계속됩니다.

예:

function outer() {
  let outerVar = "I'm outer";

  function inner() {
    console.log(outerVar); // Accesses the outer scope
  }

  inner();
}
outer();
// Output: I'm outer

베. 중첩 함수

내부 함수는 어휘 범위로 인해 외부 함수의 변수에 액세스할 수 있습니다.

예:

function outerFunction() {
  let outerVariable = "Outer";

  function innerFunction() {
    let innerVariable = "Inner";
    console.log(outerVariable); // Outer
    console.log(innerVariable); // Inner
  }

  innerFunction();
}
outerFunction();

3. 실제 사례

아. 외부 범위 변수에 액세스

function createMultiplier(multiplier) {
  return function (value) {
    return value * multiplier; // Accesses 'multiplier' from outer scope
  };
}

const double = createMultiplier(2);
console.log(double(5)); // Output: 10

베. 클로저의 어휘 범위

클로저는 외부 환경의 변수를 기억하기 위해 어휘 범위에 의존합니다.

예:

function outerFunction() {
  let count = 0;
  return function () {
    count++;
    console.log(count);
  };
}

const counter = outerFunction();
counter(); // Output: 1
counter(); // Output: 2

4. 범위 관련 일반적인 실수

아. let과 const를 잊어버림

let, const, var 없이 선언된 변수는 전역 변수가 됩니다.

{
  let a = 10;
  const b = 20;
  console.log(a, b); // Output: 10, 20
}
console.log(a); // Error: a is not defined

베. var를 사용한 블록 범위

블록 내부에 var를 사용하면 예상치 못한 결과가 발생합니다.

function testFunctionScope() {
  if (true) {
    var x = 10; // Function-scoped
  }
  console.log(x); // Output: 10
}
testFunctionScope();

ㄷ. 섀도잉

중첩 범위에 선언된 변수는 외부 범위에 있는 변수를 섀도잉(재정의)할 수 있습니다.

var globalVar = "I am global";
console.log(globalVar); // Output: I am global

5. 범위와 어휘 범위의 차이점

function outer() {
  let outerVar = "I'm outer";

  function inner() {
    console.log(outerVar); // Accesses the outer scope
  }

  inner();
}
outer();
// Output: I'm outer

위 내용은 JavaScript의 범위와 어휘 범위 마스터하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!