JavaScript의 범위와 어휘 범위 마스터하기-JS 튜토리얼-php.cn

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

Barbara Streisand

풀어 주다： 2024-12-18 01:49:09

원래의

878명이 탐색했습니다.

Mastering Scope and Lexical Scope in 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. 범위와 어휘 범위의 차이점

Scope	Lexical Scope
Refers to the context in which variables are accessible.	Refers to how the location of variables in the code determines scope.
Can be global, block, or function.	Depends on the structure of the code when it is written.
Dynamic during runtime.	Fixed during code definition.

범위

어휘 범위

변수에 액세스할 수 있는 컨텍스트를 나타냅니다. 코드에서 변수의 위치가 범위를 결정하는 방법을 나타냅니다. 전역, 블록 또는 함수일 수 있습니다. 작성된 코드의 구조에 따라 다릅니다. 런타임 동안 동적. 코드 정의 중에 수정되었습니다.

let 및 const 사용

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

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

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

로그인 후 복사

: 예상치 못한 전역 변수를 방지하려면 항상 let과 const를 사용하세요.

전역 변수 최소화
전역 변수는 이름 충돌을 일으킬 수 있습니다. 함수나 모듈에 코드를 캡슐화합니다.

어휘 범위 이해

클로저와 어휘 범위 지정을 활용하여 더욱 깔끔하고 효율적인 코드를 작성하세요.

Scope는 전역, 블록, 함수의 세 가지 유형으로 변수에 액세스할 수 있는 위치를 정의합니다.
어휘 범위

효과적인 JavaScript 코드를 디버깅하고 작성하려면 이러한 개념을 익히는 것이 중요합니다.

안녕하세요. 저는 Abhay Singh Kathayat입니다!

저는 프론트엔드와 백엔드 기술 모두에 대한 전문 지식을 갖춘 풀스택 개발자입니다. 저는 효율적이고 확장 가능하며 사용자 친화적인 애플리케이션을 구축하기 위해 다양한 프로그래밍 언어와 프레임워크를 사용하여 작업합니다. 제 비즈니스 이메일(kaashshorts28@gmail.com)로 언제든지 연락주세요.

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