[자바스크립트] 실행 컨텍스트 (Execution Context) 이해하기

자바스크립트 실행 컨텍스트는 코드 실행 환경을 의미하며, 다음과 같은 요소들로 구성됩니다.

• 변수: 실행 컨텍스트 내에서 선언된 변수에 대한 정보를 저장합니다. 변수 이름, 값, 속성 등이 포함됩니다.
• 함수: 실행 컨텍스트 내에서 선언된 함수에 대한 정보를 저장합니다. 함수 이름, 코드, 매개변수, 반환 값 등이 포함됩니다.
• this 객체: 실행 컨텍스트에서 활성화된 객체를 가리킵니다. 메서드 호출 시 this는 호출된 객체를 의미하며, 일반 함수 호출 시 this는 전역 객체를 의미합니다.
• 스코프 : 변수와 함수가 유효한 범위를 정의합니다. 자바스크립트에는 블록 스코프와 함수 스코프 두 가지가 존재합니다.

실행 컨텍스트 생성 과정

1. 스크립트 실행 시, 전역 실행 컨텍스트가 하나 생성됩니다.
2. 함수가 호출될 때마다, 해당 함수에 대한 실행 컨텍스트가 새롭게 생성됩니다.
3. 함수 실행이 종료되면, 해당 함수의 실행 컨텍스트가 해제됩니다.
4. eval() 또는 new Function() 생성자를 사용하여 동적으로 코드를 실행할 때, 새로운 실행 컨텍스트가 생성됩니다.

실행 컨텍스트와 호이스팅

호이스팅은 변수 선언이 실제 코드 위치와 관계없이 스크립트의 맨 위로 끌어올려지는 현상입니다. 하지만 호이스팅은 변수 선언만 끌어올리는 것이며, 변수 할당은 선언 위치에서 진행됩니다.

따라서 실행 컨텍스트가 생성되고 변수 선언이 수행될 때, 해당 변수는 아직 초기화되지 않은 상태입니다. 만약 선언된 변수를 선언 위치보다 앞서 사용하려고 하면 에러가 발생합니다.

실행 컨텍스트와 this

this 키워드는 실행 컨텍스트에서 활성화된 객체를 가리킵니다. 함수 호출 시 this는 호출된 객체를 의미하며, 일반 함수 호출 시 this는 전역 객체를 의미합니다.

따라서 함수 내에서 this를 사용하여 객체 프로퍼티나 메서드에 접근하려면, 해당 함수가 어떤 객체에서 호출되었는지 고려해야 합니다.

실행 컨텍스트와 클로저

클로저는 함수와 함께 함수가 선언된 당시의 실행 컨텍스트를 담은 객체입니다. 즉, 클로저 함수는 선언된 컨텍스트의 변수와 함수에 액세스할 수 있습니다.

클로저는 다음과 같은 상황에서 유용하게 사용됩니다.

• 비동기 프로그래밍: setTimeout() 또는 setInterval()과 같은 비동기 함수 내에서 변수 값을 유지해야 할 때
• 프라이빗 메서드 구현: 객체 내부에서만 사용되는 함수를 프라이빗하게 만들 때
• 함수 콜백 설정: 이벤트 핸들러나 콜백 함수에 특정 컨텍스트를 전달해야 할 때

실행 컨텍스트 관련 주의 사항

• 서로 다른 실행 컨텍스트에서 선언된 변수는 서로 다른 변수로 간주됩니다.
• 함수 내에서 this를 사용하려면, 해당 함수가 어떤 객체에서 호출되었는지 명확하게 파악해야 합니다.
• 클로저를 사용하면 메모리 누수가 발생할 수 있으므로 주의해서 사용해야 합니다.

전역 실행 컨텍스트 및 변수 선언 호이스팅

var globalVar = 10; // 전역 변수 선언

function greet() {
  console.log(globalVar); // 10 출력 (전역 변수 접근)
  var functionVar = 20; // 함수 내 변수 선언
  console.log(functionVar); // 20 출력 (함수 내 변수 접근)
}

greet();
console.log(functionVar); // ReferenceError: functionVar is not defined (함수 외부에서 함수 내 변수 접근 불가능)

• 스크립트 실행 시, 전역 실행 컨텍스트가 생성됩니다.
• globalVar 변수는 전역 실행 컨텍스트에 선언되어 전역적으로 유효합니다.
• greet 함수는 전역 실행 컨텍스트에서 선언됩니다.
• greet 함수가 호출되면, 해당 함수의 실행 컨텍스트가 생성됩니다.
• functionVar 변수는 greet 함수의 실행 컨텍스트에 선언되어 해당 함수 내에서만 유효합니다.
• greet 함수 내에서 globalVar는 전역 실행 컨텍스트의 변수를 참조하기 때문에 접근 가능합니다.
• 하지만 greet 함수 외부에서는 functionVar는 greet 함수의 실행 컨텍스트에 속하는 변수이기 때문에 접근할 수 없습니다.

주의: 변수 선언은 호이스팅되지만, 변수 할당은 선언 위치에서 진행됩니다. 따라서 functionVar 변수를 greet 함수 밖에서 사용하려면 선언 위치에서 할당해야 합니다.

함수 실행 컨텍스트 및 스코프 체인

function outerFunction() {
  let outerVar = 10; // 블록 스코프 변수

  function innerFunction() {
    let innerVar = 20; // 블록 스코프 변수
    console.log(outerVar); // 10 출력 (외부 변수 접근)
    console.log(innerVar); // 20 출력 (내부 변수 접근)
  }

  innerFunction();
  console.log(innerVar); // ReferenceError: innerVar is not defined (외부에서 내부 변수 접근 불가능)
}

outerFunction();
console.log(outerVar); // ReferenceError: outerVar is not defined (전역에서 외부 변수 접근 불가능)

• outerFunction 함수는 전역 실행 컨텍스트에서 선언됩니다.
• outerFunction 함수가 호출되면, 해당 함수의 실행 컨텍스트가 생성됩니다.
• outerVar 변수는 outerFunction 함수의 실행 컨텍스트에 선언되어 outerFunction 함수 내에서만 유효합니다.
• innerFunction 함수는 outerFunction 함수 내에서 선언됩니다.
• innerFunction 함수가 호출되면, 해당 함수의 실행 컨텍스트가 생성됩니다.
• innerVar 변수는 innerFunction 함수의 실행 컨텍스트에 선언되어 innerFunction 함수 내에서만 유효합니다.
• innerFunction 함수 내에서 outerVar는 outerFunction 함수의 실행 컨텍스트에 속하는 변수이기 때문에 접근 가능합니다.
• innerFunction 함수 내에서 innerVar는 innerFunction 함수의 실행 컨텍스트에 속하는 변수이기 때문에 접근 가능합니다.
• 하지만 outerFunction 외부에서는 outerVar는 outerFunction 함수의 실행 컨텍스트에 속하는 변수이기 때문에 접근할 수 없습니다.

함수 실행 컨텍스트란 무엇일까요?

함수 실행 컨텍스트는 함수가 실행될 때 생성되는 환경을 의미합니다. 이 환경에는 다음과 같은 요소들이 포함됩니다.

• 변수: 함수 내에서 선언된 변수에 대한 정보를 저장합니다. 변수 이름, 값, 속성 등이 포함됩니다.
• 함수: 함수 내에서 선언된 함수에 대한 정보를 저장합니다. 함수 이름, 코드, 매개변수, 반환 값 등이 포함됩니다.
• this 객체: 함수 실행 시 활성화된 객체를 가리킵니다. 일반 함수 호출 시 this는 전역 객체를 의미하며, 화살표 함수나 bind() 메서드를 사용하여 호출된 경우에는 호출 당시의 객체를 의미합니다.
• 스코프: 변수와 함수가 유효한 범위를 정의합니다. 자바스크립트에는 블록 스코프와 함수 스코프 두 가지가 존재합니다.

예시:

function greet(name) {
  console.log(`안녕하세요, ${name}님!`); // name 변수 접근 가능
}

greet("세종대왕"); // "안녕하세요, 세종대왕님!" 출력

위 예시에서 greet 함수가 실행되면 greet 함수의 실행 컨텍스트가 생성됩니다. 이 컨텍스트에는 name 변수에 대한 정보와 console.log() 함수에 대한 정보가 포함됩니다. 따라서 greet 함수 내에서 name 변수를 사용하여 인사 메시지를 출력할 수 있습니다.스코프 체인이란 무엇일까요?

스코프 체인은 변수를 검색할 때 참고하는 변수 객체들의 연결 리스트입니다.

변수를 사용하려고 할 때, 먼저 현재 실행 컨텍스트의 변수 객체에서 해당 변수를 검색합니다. 만약 해당 변수를 찾지 못하면, 상위 실행 컨텍스트의 변수 객체를 차례대로 검색하며, 결국 전역 객체까지 검색합니다.

이러한 방식으로 변수를 검색하기 때문에 **"렉시컬 스코프"**라고도 불립니다.

예시:

function outerFunction() {
  let outerVar = 10;

  function innerFunction() {
    let innerVar = 20;
    console.log(outerVar); // 10 출력 (외부 변수 접근)
    console.log(innerVar); // 20 출력 (내부 변수 접근)
  }

  innerFunction();
}

outerFunction();

위 예시에서 innerFunction 함수 내에서 outerVar 변수를 사용하려고 할 때, 먼저 innerFunction 함수의 실행 컨텍스트에서 outerVar 변수를 검색합니다. 하지만 innerFunction 함수의 실행 컨텍스트에는 outerVar 변수가 선언되어 있지 않기 때문에 상위 실행 컨텍스트인 outerFunction 함수의 실행 컨텍스트를 검색하게 됩니다. outerFunction 함수의 실행 컨텍스트에는 outerVar 변수가 선언되어 있으므로 해당 변수를 사용하여 10을 출력하게 됩니다.

3. 함수 실행 컨텍스트와 스코프 체인의 중요성

함수 실행 컨텍스트와 스코프 체인은 다음과 같은 이유로 중요합니다.

• 변수 오염 방지: 서로 다른 함수에서 동일한 이름의 변수를 사용하더라도, 각 함수에서 선언된 변수만 사용하기 때문에 변수 오염을 방지할 수 있습니다.
• 코드 가독성 향상: 변수의 유효 범위가 명확하게 정의되어 코드를 이해하기 쉽습니다.
• 재귀 함수 구현: 스코프 체인을 통해 내부 함수가 외부 함수의 변수를 참조할 수 있어 재귀 함수 구현이 용이합니다.