자바스크립트 실행 컨텍스트: 예제를 통해 쉽게 이해하기

들어가기 앞서...

실행 컨텍스트는 자바스크립트의 동작원리를 담고 있는 핵심 개념이다
실행 컨텍스트를 바르게 이해해야, 스코트를 기반으로 바이딩을 관리하는 방법과, 호이스팅이 발생하는 이유, 클로저의 동작 방식, 이벤트 핸들러와 비동기 처리 방식을 이해할 수 있다

 

 

소스코드의 타입

코드 종류	설명
전역 코드	전역에 존재하는 소스코드를 말한다. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함하지 않는다
함수 코드	함수 내부에 존재하는 소스코드를 말한다. 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함되지 않는다
eval 코드	빌트인 전역함수인 eval 함수에 인수로 전달되는 소스코드 그 자체를 말한다
모듈 코드	모듈 내부에 존재하는 소스 코드를 말한다. 모듈 내부의 함수, 클래스 등의 내부 코드는 '포함되지 않는다!'

 

자바스크립트 실행 컨텍스트란?

자바스크립트에서 실행 컨텍스트(Execution Context)는 코드가 실행될 때 필요한 모든 정보를 담고 있는 "상자"라고 생각할 수 있다. 이 상자는 자바스크립트가 코드를 어떻게 실행할지, 어떤 변수를 사용할지, 그리고 this가 무엇을 가리키는지 등을 결정하는 중요한 역할을 한다.

콜 스택(Call Stack)과 실행 컨텍스트

출처: 자바스크립트 딥다이브 23장

자바스크립트는 함수를 호출할 때마다 새로운 실행 컨텍스트를 만들고, 이 실행 컨텍스트들은 콜 스택(Call Stack)이라는 곳에 쌓이게 된다. 콜 스택은 실행 컨텍스트들이 차곡차곡 쌓이는 자료구조 "스택"처럼 쌓인다

• 콜 스택의 역할: 자바스크립트는 콜 스택의 맨 위에 있는 실행 컨텍스트부터 차례로 코드를 실행한다. 함수가 호출되면 새로운 실행 컨텍스트가 만들어져 콜 스택에 추가되고, 함수가 끝나면 해당 컨텍스트는 콜 스택에서 제거된다.

실행 컨텍스트가 어떻게 작동하는지 살펴보기

예제를 통해 실행 컨텍스트가 어떻게 작동하는지 살펴보자

var a = 1;

function outer() {
  function inner() {
    console.log(a);
    var a = 3;
  }
  inner();
  console.log(a);
}

outer();
console.log(a);

이 코드가 실행될 때, 다음과 같은 순서로 실행 컨텍스트와 콜 스택이 작동한다:

1. 전역 컨텍스트 생성: 코드가 실행되면서 가장 먼저 전역 컨텍스트가 만들어진다. 여기에는 전역에서 선언된 변수와 함수들이 포함된다.
   • 콜 스택: [전역 컨텍스트]
   • 전역 컨텍스트의 정보:
     • 변수 a = undefined
     • 함수 outer 정의
2. var a = 1 실행: 전역 컨텍스트에서 a 변수에 1을 할당한다.
   • 콜 스택: [전역 컨텍스트]
   • 전역 컨텍스트의 정보:
     • 변수 a = 1
3. outer() 함수 호출: outer 함수가 호출되면 새로운 실행 컨텍스트가 생성되고 콜 스택에 추가된다.
   • 콜 스택: [전역 컨텍스트, outer 실행 컨텍스트]
   • outer 컨텍스트의 정보:
     • 변수 a = undefined
     • 함수 inner 정의
4. inner() 함수 호출: outer 함수 안에서 inner 함수가 호출되면, 또 다른 실행 컨텍스트가 생성되고 콜 스택에 추가된다.
   • 콜 스택: [전역 컨텍스트, outer 실행 컨텍스트, inner 실행 컨텍스트]
   • inner 컨텍스트의 정보:
     • 변수 a = undefined
5. console.log(a) 실행 (inner 함수 안에서): inner 함수 안에서 a를 출력하려고 할 때, inner 컨텍스트 내에 a가 아직 할당되지 않았으므로 undefined가 출력된다.
   • 출력: undefined
6. var a = 3 실행 (inner 함수 안에서): inner 함수 내부에서 a에 3을 할당한다.
   • 콜 스택: [전역 컨텍스트, outer 실행 컨텍스트, inner 실행 컨텍스트]
   • inner 컨텍스트의 정보:
     • 변수 a = 3
7. inner 함수 종료: inner 함수가 끝나면 inner 실행 컨텍스트는 콜 스택에서 제거된다.
   • 콜 스택: [전역 컨텍스트, outer 실행 컨텍스트]
8. console.log(a) 실행 (outer 함수 안에서): 이제 outer 함수 안에서 a를 출력한다. 이때 outer 컨텍스트에 있는 a는 여전히 undefined 상태다. 왜냐하면 outer 함수 안에서는 a에 값을 할당한 적이 없기 때문이다. 그래서 전역 컨텍스트에 있는 a 값을 사용한다.
   • 출력: 1
9. outer 함수 종료: outer 함수가 끝나면 outer 실행 컨텍스트도 콜 스택에서 제거된다.
   • 콜 스택: [전역 컨텍스트]
10. 마지막 console.log(a) 실행: 이제 전역 컨텍스트로 돌아와서 a를 출력한다. 전역 컨텍스트에서 a는 1로 설정되어 있었으므로, 1이 출력된다.
    • 출력: 1

요약하자면

• 실행 컨텍스트는 자바스크립트가 코드를 실행하기 위해 필요한 모든 정보를 담고 있는 상자다.
• 콜 스택은 실행 컨텍스트들이 쌓이는 장소다. 자바스크립트는 콜 스택의 맨 위에 있는 실행 컨텍스트부터 처리한다.
• 함수가 호출될 때마다 새로운 실행 컨텍스트가 만들어지고, 함수가 끝나면 그 실행 컨텍스트는 콜 스택에서 제거된다.