[자바스크립트] 예제 코드로 맛 보는 실행 컨텍스트

내용 구성

1. 함수 객체
2. 실행 컨텍스트 (Execute Context)
3. 마치며

 

참고 자료

• [NHN FORWARD 2021] 결국 자바스크립트를 알아보기로 했다. (youtube.com)

---

함수 객체

본격적으로 실행 컨텍스트에 대해 알아보기 전에 자바스크립트의 함수를 먼저 살펴보자.

 

function add3(n) {
  const three = 3;
  const result = three + n;
  return result;
}

add3(5);      // 서브 루틴으로 실행 (결과: 8)
add3.three;  // 일반 객체로 실행 (결과: undefined)

 

ESMAScript에서 함수 객체는 일반 객체의 확장판이다. 함수명 뒤에 소괄호()를 붙여 서브 루틴(Subroutine)으로 수행할 수 있을 뿐만 아니라, 함수명 뒤에 점 (Dot Notation)을 붙여서 일반 객체처럼 사용할 수 있다.

 

const person = {
  name: "Pong",
  age: 3
}

person.name;

 

참고로 일반 객체는 이렇게 생겼다. person이라는 일반 객체의 name 프로퍼티에 접근하기 위해 Dot Notation을 사용했다.

 

아래 실행 컨텍스트 내용에선 함수를 모두 서브 루틴으로 실행한다.

 

 

 

실행 컨텍스트 (Execute Context)

굉장히 직관적인 단어라고 생각한다. 실행하고 있는 그 맥락, 문맥이 바로 실행 컨텍스트다. 즉, 코드를 실행하는 데 필요한 정보들을 모아둔 구조라고 할 수 있다.

 

function add3(n) {
  const three = 3;
  const result = three + n;
  return result;
}

const number = 5;
const addResult = add3(number);

 

이런 코드가 있다고 해보자.

 

전역 실행 컨텍스트

 

자바스크립트가 로드되고, 엔진이 이를 처리하면서 실행 컨텍스트를 생성한다. 실행 컨텍스트에서 어떤 코드를 실행하며 어떤 데이터가 있는지 알 수 있다. 가장 먼저 생성되는 건 전역 실행 컨텍스트와 전역 메모리이다. 코드를 한 줄, 한 줄 읽으면서 전역에 선언된 함수와 변수를 전역 메모리에 등록한다.

 

1번 라인

 

1번 라인을 통해 전역 메모리에 add3이라는 라벨(Label)이 생기고, 함수의 바디 부분을 연결해줬다.

 

근데 코드 블록이 왜 제대로 안 먹혔지

 

7번 라인

 

그 다음엔 7번 라인을 통해 number라는 라벨에 5라는 값을 등록한다.

 

주의할 점은 1번 라인 이후에 7번 라인으로 왔다는 것이다. 함수 내부 코드는 해당 함수를 실행했을 때 접근하기 때문이다.

 

8번 라인 - add3(number) 호출 전

 

8번 라인을 통해 addResult 라벨이 메모리에 등록된다. 그 값은 add3 함수의 리턴 값이 될 텐데, 아직 실행되지 않았으므로 값이 초기화되진 않은 상태다!

 

8번 라인 - add3(number) 호출 후

 

이제 add3(number)까지 호출했다. 소괄호()를 사용해 add3 함수를 서브 루틴으로 실행하면, 전역 실행 컨텍스트 안에 함수 실행 컨텍스트라는 것이 생긴다. 그리고 함수 실행 컨텍스에서 사용하는 메모리인 로컬 메모리도 생성된다.

 

로컬 메모리에는 함수 호출 시 전달된 매개변수가 등록된다. n라는 라벨에 5라는 값이 초기화된 걸 확인할 수 있다. 매개변수는 함수에 속하는 데이터이기 때문에 전역 메모리가 아니라 로컬 메모리에 등록된다는 걸 명심하자.

 

2번 라인

 

아까 1번 라인 이후로 바로 7번 라인으로 점프했던 것이 기억나는가? 함수 내부 코드는 해당 함수가 실행되면 접근한다고 했었다. 이제 실제 add3 함수가 호출되어 실행되고 있으므로 함수 내부에 접근했다.

 

2번 라인을 통해 add3 함수의 지역 변수인 three가 함수의 로컬 메모리에 저장된다.

 

3번 라인

 

3번 라인을 통해 result라는 레이블이 로컬 메모리에 등록된다. 그 값은 three + n의 결과인데, 이건 단순히 값을 초기화하는 것이 아니라 더하기 연산을 하는, 실행해야 하는 코드이다. 따라서 함수 실행 컨텍스트에 three + n의 결과를 result에 할당하라는 코드가 추가된다.

 

3번 라인

 

result = three + n;을 연산한 결과 8을 result에 할당했다.

 

4번 라인

 

add3 함수의 마지막 코드인 return문을 통해 로컬 메모리의 result가 반환되고, 그 값이 전역 메모리의 addResult에 할당된다.

 

코드8

 

이후 add3 함수가 종료되면 함수의 실행 컨텍스트와 내부 정보가 모두 사라진다.

 

 

 

마치며

사실 콜 스택이라는 개념이 있는데, 이 글에선 일단 실행 컨텍스트 자체에만 집중했다.

 

다음에 콜 스택을 다루면서 함수 내부에 또 다른 함수가 존재할 때, 전역 실행 컨텍스트에서 생성된 함수 실행 컨텍스트 안에 또 다시 함수 실행 컨텍스트가 생성되는... 그런 예제를 다뤄보겠다.

 

아무튼 결론은, 실행 컨텍스트는 코드의 진행 상황을 추적하는 데 필요한 정보들이 모인 구조라는 것이다!