[JavaScript] 실행 컨텍스트와 콜 스택

자바스크립트 코드의 실행

출처 : https://babscraig.com/javascript-execution-context-call-stack-event-loop

• 컴파일 완료 후 코드의 실행 준비가 끝나면, 자바스크립트 엔진은 전역 실행 컨텍스트를 생성한다.
• 여기서 실행 컨텍스트란, 코드가 실행되기 위한 정보를 담고있는 환경을 의미하며, 전역 실행 컨텍스트란 특히 어떤 함수에도 포함되어 있지 않은 전역 코드의 실행을 위한 실행 컨텍스트이다. 
• 먼저 전역 실행 컨텍스트를 생성해 전역 코드를 평가하고 실행한다. 전체 전역 코드가 실행되면서 함수가 호출되었다면, 함수 코드를 평가하면서 해당 함수를 실행하는 실행 컨텍스트를 생성하고 그 안에서 코드를 실행한다.
• 실행 컨텍스트는 코드의 종류에 따라 각각의 실행 컨텍스트와 독자적인 스코프를 갖는다. 메서드 또한 함수이기 때문에 별도의 실행 컨텍스트 안에서 실행된다. 
• 모든 함수의 실행이 종료되면, 자바스크립트 엔진은 콜백 함수의 호출을 대기한다. (이벤트 루프)
• 전체 실행 컨텍스트가 담기고 실행 순서를 추적하기 위해 사용되는 것이 콜 스택이다. 

실행 컨텍스트

실행 컨텍스트의 개념

• 자바스크립트 코드의 일부가 실행되기 위해 필요한 환경으로, 추상적인 개념이다. 
• 코드를 실행하는데 필요한 정보를 담고 있다. 
  • 변수 : 전역 변수, 지역 변수, 매개 변수, 객체의 프로퍼티
  • 함수 선언
  • 변수의 유효 범위 (스코프 Scope)
  • this 키워드 
• 자바스크립트의 코드는 언제나 이 실행 컨텍스트를 통해 실행된다.
• 전역 실행 컨텍스트는 규모를 떠나 어떠한 자바스크립트 프로젝트이든, 단 하나만 존재한다. 기본 실행 컨텍스트로 전역 코드를 위해서 생성된다.

실행 컨텍스트의 생성 과정

• 자바스크립트 엔진은 코드의 실행 과정을 소스코드 평가와 소스코드 실행으로 나누어 처리한다. 
• 실행 컨텍스트는 소스코드 평가 과정에서 생성되고, 변수 함수등의 선언문만 먼저 실행해 이 식별자를 실행 컨텍스트 내의 스코프에 등록하고 일단 undefined로 초기화 한다. 
• 이러한 과정을 통해 소스 코드 실행 전 어떤 변수들이 이미 실행 컨텍스트에 등록된 상태이고, 코드 실행 단계에서 이 정보를 이용해 코드를 실행한다. 

콜 스택

• 엄청나게 많은 실행 컨텍스트들이 존재한다면, 이들의 실행 순서를 어떻게 관리할 수 있을까? 이 때 사용되는 것이 콜 스택 자료구조이다. 
• 소스코드가 실행되면 실행 컨택스트가 콜 스택에 push된다. 하나의 실행 컨텍스트가 실행 중일 때, 그 안에서 함수가 호출된다면 또 다른 실행 컨텍스트가 스택에 push된다.
• 이 때 기존에 실행 중이던 컨텍스트가 잠시 중단되고, 그 위에 새로운 실행 컨텍스트가 쌓인다. 만약 그 안에서 또 함수가 호출되어서 코드가 실행된다면 다시 그 위에 실행 컨텍스트가 쌓이는 구조이다. 
• 기존에 실행중이던 실행 컨텍스트로 돌아오기 위해서는, 새로 실행된 실행 컨텍스트가 리턴 되어야 하는데, 이는 자바스크립트가 싱글 쓰레드로 동작하기 때문이다.
• 하나의 실행 컨텍스트가 종료되고, 그 이전에 실행되던 컨텍스트가 있다면 함수가 호출되어 멈춘 지점의 다음 라인부터 코드를 실행한다. 
• 함수 실행 컨텍스트가 모두 종료되면, 프로그램이 종료(ex 브라우저의 탭 닫기) 되기 전까지 글로벌 실행 컨텍스트만 존재하게 된다. 

출처 : https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf

• 실행 컨텍스트가 종료되지 않고 무한으로 쌓이면 위 그림과 같이 오버플로우가 발생한다.

참고 자료

https://poiemaweb.com/js-execution-context

Execution Context | PoiemaWeb

The Complete JavaScript Course 2022: From Zero to Expert!

Learn Modern Javascript (Build and Test Apps) - Full Course

http://www.yes24.com/Product/Goods/92742567

모던 자바스크립트 Deep Dive - YES24