물고 물어지는 개념 정리하기(웹 프론트엔드): 나만의 사전3

물고 물어지는 개념 정리하기(웹 프론트엔드): 나만의 사전3

실행 컨텍스트

실행 컨텍스트(Execution Context)는 자바스크립트 코드가 실행될 때 생성되는 환경을 나타내는 개념이다. 코드 블록(함수, 스크립트, 모듈 등)이 실행되는 동안 필요한 정보를 담고 있으며, 해당 코드의 실행 결과 및 동작을 추적하고 관리하는 역할을 한다.

요약하자면 실행 컨텍스트는 코드의 실행 과정에서 필요한 정보를 담고 있는 논리적인 컨테이너이다.

구성 요소

• Variable Environment (변수 환경): 현재 컨텍스트 내에서 선언된 변수 및 함수 선언을 저장하는 영역이다. 이를 통해 변수의 이름과 값을 매핑하고, 클로저 등의 스코프 관리에 사용된다.

• Lexical Environment (렉시컬 환경): 변수 환경과 유사하게 현재 컨텍스트 내에서 스코프 체인을 구성하고, 외부 변수 및 함수에 접근 가능한 정보를 제공한다. 즉, 스코프 체인과 함께 변수와 함수의 위치 정보를 저장하고 실행 컨텍스트의 외부와 내부를 관리한다. 클로저와 스코프 체인의 동작을 지원한다.

• This Binding (this 바인딩): 현재 실행 중인 코드의 this 값을 결정합니다. this는 함수 호출의 맥락에 따라 달라질 수 있으며, 실행 컨텍스트를 통해 정의된다.

실행 컨텍스트는 코드의 실행을 관리하는 가장 큰 개념이며, 렉시컬 환경은 실행 컨텍스트 내에 포함되어 변수의 스코프와 식별자 해석을 담당하는 역할을 한다.

렉시컬 환경(Lexical Environment)

자바스크립트 엔진이 변수와 함수 식별자를 해석하고 관리하는 데 사용하는 내부 데이터 구조.
렉시컬 환경은 실행 컨텍스트 내에서 변수, 함수 선언 및 스코프 체인을 관리하며, 스코프 기반의 식별자 해결에 사용된다.

1. 환경 레코드(Environment Record): 이 부분은 실제 변수, 함수 등의 식별자와 그들의 값을 저장하는 곳이다. 변수와 함수 선언은 여기에 저장되며, 이를 통해 코드 내에서 식별자와 그 값에 접근할 수 있다. 환경 레코드는 "변수 환경 레코드"와 "객체 환경 레코드" 두 가지 종류로 나뉜다.

   1) 변수 환경 레코드(Variable Environment Record): 함수 스코프 내에서 선언된 변수와 매개변수 정보를 저장합니다. 또한 함수 내에서 선언된 변수는 함수 실행 중에 이곳에 저장됩니다.

   2) 객체 환경 레코드(Object Environment Record): 전역 스코프와 관련된 변수 정보를 저장합니다. 전역 변수는 전역 객체의 프로퍼티로써 저장됩니다.

2. 외부 렉시컬 환경 참조(Outer Lexical Environment Reference): 현재 렉시컬 환경이 속한 외부 스코프의 렉시컬 환경을 가리키는 참조이다. 이를 통해 스코프 체인이 형성되며, 중첩된 함수에서 외부 스코프의 변수에 접근할 수 있게 된다.

스코프 체인(Scope Chain)

스코프 체인(Scope Chain)은 자바스크립트에서 변수와 함수 식별자의 해석 및 접근을 위한 메커니즘 중 하나이다. 변수나 함수를 찾을 때 엔진은 현재 실행 중인 컨텍스트의 렉시컬 환경부터 시작하여 외부 렉시컬 환경으로 순차적으로 검색하며 식별자를 찾는다. 이러한 과정을 통해 스코프 체인이 형성되며 변수나 함수의 유효 범위와 접근 권한을 관리한다.

동작순서

1) 현재 실행 중인 코드의 렉시컬 환경에서 식별자를 찾는다. 만약 식별자가 현재 환경에 존재하면 해당 값을 사용한다.

2) 식별자가 현재 환경에 없으면 외부 렉시컬 환경으로 이동하여 식별자를 찾는다. 이 때, 외부 렉시컬 환경은 해당 실행 컨텍스트의 외부 스코프를 가리킨다.

3) 위의 과정을 반복하여 식별자를 찾을 때까지 계속하여 외부 렉시컬 환경으로 이동한다. 이렇게 형성된 스코프 체인은 전역 렉시컬 환경까지 이어지며, 식별자를 찾을 수 있는지 여부를 결정한다.

이러한 스코프 체인의 메커니즘을 통해 변수나 함수가 어떤 스코프에서 유효한지, 어떤 스코프에서 해당 식별자에 접근할 수 있는지를 결정할 수 있다.

스코프 체인은 자바스크립트의 스코프와 클로저(Closure) 개념의 핵심적인 부분이며, 변수의 스코프와 유효 범위를 제어하는 데 중요한 역할을 한다.

function outerFunction() {
  var outerVar = 'I am from outer';

  function innerFunction() {
    var innerVar = 'I am from inner';
    console.log(innerVar);  // innerVar에 접근 가능
    console.log(outerVar);  // outerVar에 접근 가능
    console.log(globalVar); // globalVar에 접근 가능
  }

  innerFunction();
}
var globalVar = 'I am global';

outerFunction();
console.log(globalVar);     // globalVar에만 접근 가능
console.log(outerVar);      // outerVar에 접근 불가능
console.log(innerVar);      // innerVar에 접근 불가능

이 예시에서 outerFunction 내부의 innerFunction에서 innerVar, outerVar, 그리고 globalVar 변수들에 접근할 수 있다.
innerFunction은 outerFunction 내부에서 정의되었기 때문에 outerFunction의 렉시컬 환경에 접근 가능하며, 이를 통해 outerVar에도 접근할 수 있다.

또한 outerFunction 밖에서는 globalVar 변수에만 접근할 수 있다. innerVar와 outerVar는 innerFunction과 outerFunction의 스코프 내에서만 유효하며, 외부에서는 접근할 수 없다.

클로저(Closure)

클로저(Closure)는 프로그래밍 언어 이론에서 중요한 개념으로, 함수와 그 함수가 선언된 렉시컬 환경(Lexical Environment)의 조합을 나타낸다. 클로저는 함수가 렉시컬 스코프 밖에서 호출되더라도 해당 함수가 선언될 때의 스코프에 접근할 수 있는 메커니즘을 제공한다.

간단하게 말해,클로저는 1) 함수가 자신이 선언되었을 때의 환경과 함께 "닫혀 있는" 상태를 유지하면서, 2) 이후에도 그 환경에 접근할 수 있게 해주는 것이다. 이로 인해 함수가 선언된 렉시컬 스코프 내부의 변수나 함수에 접근하여 사용할 수 있게 된다.

function outer() {
  var outerVar = 'I am from outer';
  
  function inner() {
    console.log(outerVar); // 내부 함수가 외부 변수에 접근 (클로저)
  }
  
  return inner;
}

var closureFunc = outer(); // outer 실행, inner 반환
closureFunc(); // 클로저로 인해 inner 실행, outerVar 접근

위의 예제에서 inner 함수는 outer 함수 내에서 선언되었고, outer 함수가 실행되면서 inner 함수를 반환한다. 반환된 closureFunc는 클로저를 형성하며, inner 함수가 outer 함수 내의 변수인 outerVar에 접근할 수 있게 된다. 이를 통해 클로저가 어떻게 외부 변수에 접근하는지를 확인할 수 있다.