JavaScript의 범위와 Lexical 환경의 작동 방식

Javascript의 범위

범위는 JavaScript에서 변수의 접근성을 결정합니다. 이는 코드에서 특정 변수에 액세스할 수 있는 위치를 의미합니다. Javascript에는 두 가지 유형의 범위가 있습니다.

전역 범위

로컬 범위

글로벌 범위

함수 외부에서 변수를 선언할 때마다 해당 변수는 전역 범위에 있고 변수를 전역 변수라고 합니다. 전역 변수는 코드의 어디에서나 액세스할 수 있습니다.
예시:

var x = 10;

로컬 범위

함수 내에서 변수를 선언할 때마다 해당 변수는 로컬 범위에 있고 변수를 로컬 변수라고 합니다. 지역 변수는 선언된 함수 내에서만 접근할 수 있습니다.
예시:

function localScope() {
  var x = 10;
}

localScope();

그러나 javascript는 어디에서나 전역 변수에 액세스할 수 있도록 허용하고 로컬 변수가 선언된 함수 외부에서 액세스하지 못하도록 제한합니까? 어휘 환경 때문에 발생합니다.

어휘 환경이란 무엇입니까?

어휘 환경은 다음 두 가지로 구성됩니다.

로컬 메모리 공간

부모의 어휘 환경에 대한 참조

로컬 메모리 공간은 함수 외부에 있는 경우 함수 또는 전역 범위의 메모리 공간(변수가 저장되는 위치)을 의미합니다. 참조는 부모의 어휘 환경에 액세스할 수 있음을 의미합니다.

몇 가지 간단한 예를 들어 이해해 봅시다.

예 1

var x = 10;

function printX() {
  console.log(x);
}

printX();

// Output
10

여기에서 변수 x를 생성하고 여기에 10을 할당한 다음 x 값을 인쇄하는 함수를 호출합니다. 이제 함수를 호출하면 10이 출력되지만 실제로는 함수 내부에 x가 없고 전역 범위에 있습니다. 전역 범위에서 x에 어떻게 액세스합니까?

대답은 간단합니다. 어휘 환경 때문입니다.

함수 내부에 x를 인쇄하려고 하면 자바스크립트 엔진은 로컬 메모리와 부모의 어휘 환경에 대한 참조로 구성된 함수의 어휘 환경에서 이를 찾으려고 합니다. 함수의 로컬 메모리에서 찾지 못하면 참조를 사용하여 상위(이 경우 전역 범위)의 어휘 환경으로 이동합니다. 다시 로컬 메모리와 부모의 어휘 환경에 대한 참조로 구성됩니다. 엔진은 전역 범위의 메모리에서 x를 찾아 인쇄합니다.

예 2

function createX() {
  var x = 10;
}
createX();
console.log(x);

Uncaught ReferenceError: x is not defined

오류가 발생하지만 그 이유는 무엇입니까?
전역 범위에서 x에 액세스하려고 하면 자바스크립트 엔진이 렉시컬 환경에서 이를 찾으려고 합니다. X는 전역 범위의 메모리 공간에 정의되어 있지 않습니다(실제로는 createX의 로컬 메모리 공간에 있음). 따라서 부모의 어휘 환경으로 이동합니다. 전역 범위의 부모가 없으므로 x가 존재하지 않는다는 의미입니다. 그것이 우리가 그 오류를 얻는 이유입니다.

예 3

var x = 10;

function outer() {
  function inner() {
    console.log(x);
  }
  inner();
}

outer();

// Output
10

여기에 외부 함수가 있고 그 내부에 x에 액세스하려고 시도하는 내부 함수가 있습니다. inner를 호출하면 javascript 엔진은 어휘 환경에서 x를 찾으려고 합니다. inner의 로컬 메모리 공간에서 찾지 못해서 부모의 어휘 환경에 대한 참조를 사용하여 outer의 어휘 환경으로 이동하지만 여전히 x는 outer의 로컬 메모리 공간에 없습니다. 참조, 엔진은 상위(글로벌 범위)의 어휘 환경으로 이동합니다. 그리고 메모리에 x가 있습니다. 따라서 콘솔에 값 x를 인쇄합니다.

스코프 체인

Javascript 엔진이 변수를 찾기 위해 한 어휘 환경에서 다른 어휘 환경으로 이동하는 방식을 범위 체인이라고 합니다.

유용한 리소스

https://youtu.be/uH-tVP8MUs8

https://amnsingh.medium.com/lexical-environment-the-hidden-part-to-understand-closures-71d60efac0e0