실행 컨텍스트, Execute Context
실행 컨텍스트, Excute Context
모던 JS 딥 다이브를 읽고 블로깅해야겠다는 생각이 들었다.
다른 블로그나 영상 자료를 참고해 부족한 지식을 더해, 지식 발표 스터디 준비 겸 지식 정리 겸 작성해본다.
.png "실행컨텍스트2")
실행 컨텍스트는 JS 의 동작 원리를 담고 있는 핵심 개념으로, 독특한 JS의 특징들을(호이스팅, 스코프, 클로저 등) 설명할 때 기본이 되는 개념이다. 따라서 JS를 사용한다면 반드시 개념을 이해하고 있어야 된다.
.png "실행컨텍스트3")
실행 컨텍스트는 JS 의 모든 소스코드를 실행하고 관리하는 주체가 된다.
소스코드 ?
.png "실행컨텍스트4")
그렇다면 소스코드는 무엇일까?
.png "실행컨텍스트5")
소스코드는 컴퓨터 프로그램을 사람이 읽을 수 있는 프로그램이 언어로 기술한 텍스트 파일로 개발자가 작성하는 모든 코드를 일컫는다.
소스코드의 처리 과정
.png "실행컨텍스트6")
JS 엔진은 모든 코드를 평가 와 실행 이라는 2단계로 구분해 처리한다.
.png "실행컨텍스트7")
평가 과정에서는 실행 컨텍스트가 생성되고, 선언문을 실행해 생성된 식별자를 실행 컨텍스트가 관리하는 스코프에 등록하는 과정이다.
함수의 경우, 객체 환경 레코드(Object Environment Record)에 저장이 된다.
const 로 선언한 변수의 경우, 선언적 환경 레코드(Declarative Environment Record)에 저장이 되면서 런타임에 실행되기 전까지 TDZ에 빠지게 된다. (값이 uninitailized가 아니라 초기화 되지 않았다는 뜻. 접근할 수 없음)
이 과정에서 var, let, const의 호이스팅 차이가 발생한다. var의 경우, 선언과 동시에 초기화되면서 함수와 같이 객체 환경 레코드에 undefined 값을 할당받아 선언 전에 호출이 가능하다. 하지만 let과 const의 경우 TDZ에 빠지면서 값에 접근할 수 없어 호이스팅이 발생하지 않는 것처럼 보여지게 된다.
이렇게 평과 과정이 끝나면, 실행 과정이 시작된다.
.png "실행컨텍스트8")
실행 과정은 선언문 외의 모든 소스코드가 실행되는 런타임으로, 실행한 결과가 실행 컨텍스트에 등록된다.
이처럼 JS의 소스코드는 평과와 실행 과정을 거쳐 실행된다.
소스코드의 종류
.png "실행컨텍스트9")
소스 코드는 어디에 존재하느냐에 따라 4가지 타입으로 구분된다고 한다.
.png "실행컨텍스트10")
각 코드는 각 타입별로 실행 컨텍스트를 생성하고, 평가와 실행 과정을 거쳐 실행된다.
예시로 실행 컨텍스트 이해하기
.png "실행컨텍스트11")
위의 코드가 실행되는 과정을 보면서 실행 컨텍스트를 이해해보자 !
.png "실행컨텍스트12")
먼저 코드를 살펴보면 예시 코드는 전역 코드, 함수 korea 코드, 함수 restaurant 코드로 구분된다.
그리고 각 함수는 전역과 함수 korea에 속해있다.
.png "실행컨텍스트13")
JS 엔진은 코드 평가와 코드 실행의 단계를 거쳐 코드를 실행한다.
평가된 코드는 실행 STACK에 차례대로 쌓이게 되고, 선입후출의 순서로 실행된다.
코드를 실행하면 어떻게 될까?
전역 평가
.png "실행컨텍스트14")
먼저 전역 코드의 평가가 시작된다.
전역 실행 컨텍스트가 생성되고, 코드의 모든 선언문이 실행되어 전역 실행 컨텍스트가 관리하는 전역 스코프에 등록된다.
전역 실행
.png "실행컨텍스트15")
위에서부터 코드가 실행되기 시작한다.
전역 변수 water에 h2O 값이 할당되고, 전역 함수 korea 가 실행된다.
이때 전역 코드의 실행은 잠시 멈추고, 함수 korea 의 평가가 시작된다.
함수 korea 평가
.png "실행컨텍스트16")
korea 함수 실행 컨텍스트가 생성되고, 함수 내부의 선언문이 실행되어 korea 함수 실행 컨텍스트가 관리하는 스코프에 등록된다.
함수 korea 실행
.png "실행컨텍스트17")
상단의 코드부터 실행된다.
함수 korea 의 스코프에서는 선언하지 않았기에 변수 water 의 값을 알 수 없다. 스코프 체인을 통해 상위 스코프에서 값을 탐색한다. 전역 변수로 선언한 water 값 h2o를 가져온다.
.png "실행컨텍스트18")
함수 restaurant를 실행한다.
이때 함수 korea 코드의 실행은 잠시 멈추고, 함수 restaurant 의 평가가 시작된다.
함수 restaurant 평가
.png "실행컨텍스트19")
restaurant 함수 실행 컨텍스트가 생성되고, 함수 내부의 선언문이 실행되어 변수 water가 restaurant 실행 컨텍스트가 관리하는 스코프에 등록된다.
함수 restaurant 실행
.png "실행컨텍스트20")
변수 water에 값 self 가 등록되고, 호출된다.
(한국 식당에서는 물이 셀프가 된다)
.png "실행컨텍스트21")
함수 restaurant 에는 더이상 실행할 문이 없다.
restaurant 실행 컨텍스트는 스택에서 사라지고, 관련 메모리는 가비지컬렉터에 의해 정리된다.
함수 korea 실행
.png "실행컨텍스트22")
함수 restaurant 실행이 종료되었기에 함수 korea 도 실행할 더이상 문이 없다.
korea 실행 컨텍스트는 스택에서 사라지고, 관련 메모리는 가비지컬렉터에 의해 정리된다.
전역 실행
.png "실행컨텍스트23")
함수 korea 실행이 종료되었기에 마지막으로 console.log(water)가 실행된다.
전역 변수 water 의 값 h2o가 호출된다.
.png "실행컨텍스트24")
전역에서도 더이상 실행할 문이 없다.
전역 컨텍스트도 스택에서 정리되고, 관련 메모리는 가비지 컬렉터가 정리한다.
