[JavaScript]스택과 실행 컨텍스트(Stack and Execution Context)

이번 포스팅은 실행 컨텍스트 생성 과정 및 스코프 체인에 대해 설명하기 전에 기본적으로 알아야 할 스택(Stack)과 실행 컨텍스트 개념에 대해 설명합니다.

---

스택(Stack)

스택은 한쪽 끝에서만 작업을 수행하는 선형 데이터 구조입니다. 배열과 달리 특정 위치에 요소를 접근할 수 없으며, 맨 위에서만 요소를 삽입 및 삭제할 수 있습니다.

스택에서는 두 가지 작업을 수행할 수 있습니다. 맨 위(TOP)에 요소를 삽입하는 push, 맨 위(TOP)의 요소를 삭제하는 pop을 수행합니다.

스택은 LIFO(Last-In, First-Out) 또는 FILO(First-In, Last-Out) 개념이 적용됩니다. LIFO는 후입 선출이라 말하기도 하며, 마지막에(Last) 들어온(In) 요소가 맨 처음(First) 나가는(Out) 것을 의미하며, FILO는 선입 후출이라 말하기도 하며, 맨 처음(First) 들어온(In) 요소가 맨 마지막에(Last) 나가는(Out) 것을 의미합니다.

다음 그림은 스택에 3개의 요소를 삽입(push) 후 차례대로 제거(pop)하는 동작을 순차적으로 보여줍니다.

push 순서(좌측 -> 우측)

pop 순서(좌측 -. 우측)

콜 스택(call stack)
콜 스택은 JavaScript뿐만 아니라 다른 프로그래밍 언어에서도 설명하는 개념으로 함수를 호출할 때 함수의 호출 정보(지역 변수, 인자 값, 함수 내부의 함수 호출 등)가 차례대로 쌓여있는 스택을 의미합니다.

반응형

---

실행 컨텍스트(Execution Context)

실행 컨텍스트(Execution Context)는 위에서 설명한 콜 스택(call stack)과 비슷하며, "실행 가능한 JavaScript 코드 블록이 실행되는 영역"이라고 이해하면 되겠습니다.

실행 가능한 코드 블록은 대부분 함수이며, JavaScript는 실행 컨텍스트가 형성되는 유형을 세 가지로 분류합니다.

 

전역 실행 컨텍스트(Global Execution Context)

실행되는 코드가 함수 내부가 아닌 경우 해당 코드는 전역 환경에서 실행됩니다. 전역 영역은 오로지 하나만 존재하며, 전영 영역에는 전역 객체인 window도 포함됩니다. 전역 실행 컨텍스트는 기본적으로 JavaScript 엔진에 의해 생성됩니다.

 

함수 실행 컨텍스트(Funciton Execution Context)

함수가 실행될 때마다 해당 함수에 대한 실행 컨텍스트가 생성됩니다. 따라서, 모든 함수는 호출될 때마다 본인(=함수)의 실행 컨텍스트가 존재하며, 호출되지 않으면 실행 컨텍스트는 생성되지 않습니다.

 

Eval 실행 컨텍스트(Eval Execution Context)

eval 함수가 호출될 때 생성됩니다.

 

eval 함수에 대한 내용은 아래 포스팅에서 확인할 수 있습니다.

[JavaScript]eval 함수 사용법

---

실행 컨텍스트 실행 과정

스택과 실행 컨텍스트에 대해 설명했으므로 이제 실행 컨텍스트 실행과정을 살펴봅시다. 이번 포스팅에서는 컨텍스트 실행 과정을 간단하게 설명하며, 실행 컨텍스트 생성 과정에 대한 세부적인 내용은 따로 포스팅할 예정입니다.

다음 예제를 콜 스택 관점에서 살펴봅시다.

function firstFunc() { 
  console.log('firstFunc() Call!');
  secondFunc (); 
} 

function secondFunc() { 
  console.log('secondFunc() Call!');
} 

firstFunc();

다음 그림은 실행 컨텍스트 실행 순서를 나타냅니다.

firstFunc() 함수가 호출되기 전에 전역 실행 컨텍스트가 스택에 쌓여있으며, firstFunc() 함수가 호출되면 firstFunc() 함수의 실행 컨텍스트가 쌓입니다.

firstFunc() 함수는 secondFunc() 함수를 호출하므로 firstFunc() 함수의 실행 컨텍스트 위에 secondFunc() 함수의 실행 컨텍스트가 쌓입니다.

secondFunc() 함수의 작업이 완료되면 해당 함수 실행 컨텍스트가 스택에서 제거되며, 이후 firstFunc() 함수의 작업이 완료되므로 해당 함수 실행 컨텍스트가 스택에서 제거됩니다.

---

정리

• 스택(stack)은 FILO 또는 LIFO 개념이 적용되는 자료 구조입니다.
• 콜 스택(call stack)은 호출 정보가 쌓여있는 스택을 의미합니다.
• 실행 컨텍스트(Execution Context)는 실행 가능한 JavaScript 코드 블록이 실행되는 영역입니다.