JavaScript 실행 컨텍스트와 콜 스택 소개, 특징, 생성 과정, 예시 코드

JavaScript 실행 컨텍스트와 콜 스택 소개, 특징, 생성 과정, 예시 코드

 

 

JavaScript에서 코드가 실행될 때, 실행 컨텍스트와 콜 스택은 중요한 개념입니다. 이 글에서는 실행 컨텍스트와 콜 스택에 대한 이해를 높이기 위해 이 두 개념을 자세히 다루고, 예시 코드를 통해 설명하겠습니다.

 

실행 컨텍스트(Execution Context)

 

Execution Context | TechWell

 

실행 컨텍스트의 정의

• 실행 컨텍스트는 코드가 실행되는 환경을 추상화한 개념입니다.
• 코드가 실행되면 실행 컨텍스트가 생성되고 관리됩니다.

 

실행 컨텍스트의 구성 요소

• VariableObject: 변수, 함수, 매개변수의 정보를 포함합니다.
• Scope Chain: 변수와 함수의 스코프 체인을 나타냅니다.
• this: 현재 실행 중인 함수의 객체를 가리킵니다.

 

실행 컨텍스트의 생성 과정

• 전역 실행 컨텍스트는 코드 실행 전에 생성됩니다.
• 함수가 호출될 때마다 새로운 실행 컨텍스트가 생성되고 스택에 푸시됩니다.

 

콜 스택(Call Stack)

 

호출 스택 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

 

콜 스택의 정의

• 콜 스택은 실행 중인 함수의 실행 컨텍스트를 저장하는 스택 자료 구조입니다.
• 함수가 호출될 때마다 콜 스택에 새로운 실행 컨텍스트가 push되며, 함수가 종료되면 pop됩니다.

 

콜 스택의 역할

• 콜 스택은 함수 호출과 반환을 관리하며, 실행 순서를 제어합니다.
• 재귀 호출과 콜백 함수 실행에서 중요한 역할을 합니다.

 

예시 코드로 이해하기

function foo() {
  console.log("foo 함수 호출");
  bar();
  console.log("foo 함수 종료");
}

function bar() {
  console.log("bar 함수 호출");
}

foo();
console.log("전역 실행 컨텍스트 종료");

 

실행 순서

1. foo 함수가 호출되면 foo 함수의 실행 컨텍스트가 콜 스택에 push됩니다.
2. foo 함수 내부에서 bar 함수가 호출되면 bar 함수의 실행 컨텍스트가 콜 스택에 push 됩니다.
3. bar 함수 실행이 끝나면 bar 함수의 실행 컨텍스트가 콜 스택에서 pop됩니다.
4. foo 함수의 실행이 이어지고, 또 다른 console.log가 실행됩니다.
5. foo 함수 실행이 종료되면 foo 함수의 실행 컨텍스트가 콜 스택에서 pop됩니다.
6. 전역 실행 컨텍스트로 돌아와 마지막 console.log가 실행됩니다.

 

끝으로

 

JavaScript의 실행 컨텍스트와 콜 스택은 코드의 실행과 함수 호출 관리에 중요한 역할을 합니다. 실행 컨텍스트는 실행 중인 환경을 추상화하고 콜 스택은 함수 호출과 반환을 스택 구조로 관리합니다. 이를 이해하면 코드의 동작 방식을 파악하고 디버깅하는 데 도움이 됩니다.

 

▼ 아래 글도 읽어보세요! ▼

 

JavaScript 템플릿 리터럴 쉽게 배우기 - 소개, 특징, 장점, 예제 코드

 

JavaScript forEach() 쉽게 배우기 - 소개, 구문, 특징, 예제 코드

 

JavaScript에서 객체를 문자열로 변환하는 방법 소개