JavaScript - 실행 컨텍스트란

 

실행 컨텍스트는 나에게 16부작 드라마를 보는(?) 느낌이었다

점심 시간에 모던 자바스크립트 딥다이브 한두장씩 읽으면서 2주 정도 걸린 것 같다

개념적으로는 존재하지만 머릿속으로는 정리해보지 않아 이번 기회에 정리해보려고 한다

 

소스코드를 파싱하면서 → 소스코드를 평가하고 → 실행 컨텍스트는 "생성" 된다

 

소스 코드의 타입

소스코드는 네가지 타입으로 분류된다 (갑분소?)

얘네 이야기를 왜하냐면 이 소스코드가 실행될 때 실행 컨텍스트를 생성하기 때문이다

 

전역코드	- 전역에 존재하는 코드 (전역에 정의된 함수나 클래스 등은 포함 x) - 최상위 스코프인 전역(a.k.a 글로발) 스코프를 생성한다 - 전역 코드 평가 후에 전역 실행 컨텍스트가 생성된다
함수코드	- 함수 내부에 존재하는 코드 (중첩 함수나 클래스 등은 포함 x) - 지역 스코프를 생성하고 그 안에 들어있는 부하들(함수 내 변수, 매개변수, args 같은 객체 등) 를 관리한다 - 함수 코드 평가 후에 함수 실행 컨텍스트가 생성된다
eval코드	- 빌트인 전역함수인 eval 함수에 인수로 전달되어 실행되는 코드 → 해킹 위험으로 절대 사용하지 말 것을 권장
모듈코드	- 모듈 내부에 존재하는 코드 (모듈 내부 함수나 클래스 등은 포함 x) - 독립적으로 스코프 생성한다 - 모듈 코드 평가 후에 모듈 실행 컨텍스트가 생성된다

 

실행 컨텍스트의 업무

이친구는 코드 실행을 서포트하는 코드아파트 관리사무소 직원 같은 역할이다.

코드가 실행하기 위해 스코프 / 식별자 / 코드 실행 순서 등의 관리가 뒷받침 되어야 한다.

 

- 새로 선언한 변수(식별자)의 스코프를 구분하고, 상태(state)의 업데이트 등을 관리하고,

- 스코프 체인도 형성해준다 (상위로 올라가며 식별자를 검색할 수 있도록)

- 현재 실행 중인 코드의 순서를 변경하고 다시 돌아가는 등의 교통정리도 해준다

 

 

실행 컨텍스트의 한살이

브라우저가 스크립트를 로딩해서 실행할 때, 이 친구도 태어난다

 

1. 전역 컨텍스트가 생성된다

컨텍스트에는 변수객체, scope chain, this 가 등록된다 (전역의 this: window)

 

2. 함수 호출시 함수 실행 컨텍스트가 생성된다

→ 전역 컨텍스트 실행은 잠시 중단되고 함수 내부로 이동된다

→ 컨텍스트 안에 함수 속 선언된 변수들의 값이 담긴 객체가 생성된다

→ 생성됬니? JS 엔진은 실행 컨텍스트 스택에 PUSH 한다 (이제 일할 차례 🙃)

 

3. 자, 함수가 실행된다. 이때 실행 컨텍스트 객체에 저장된 변수들을 꺼내서 사용한다.

→ 만약에 변수 정보가 안에 없으면 스코프 체인을 타고 올라가 찾아 쓴다 (클로저)

 

4. 함수 실행이 끝나면 컨텍스트는 장렬히 전사한다 (클로저가 되는 객체라면 남아있는다)

→ 실행됬니? JS 엔진은 실행 컨텍스트 스택에 POP 된다 (이제 ZARA)

 

5. 전역 컨텍스트도 사라진다

→ 그럼 너도 ZARA

 

실행 컨텍스트 스택

전역, 함수 실행 컨텍스트는 스택으로 관리된다

소스코드가 평가되면 실행 컨텍스트가 생성되고 최상위로 쌓인다.

 

전체 코드 파싱하면서 <전역실행컨텍스트> 생성

↓

빅브라더 함수 파싱하면서 <빅브라더 함수 실행 컨텍스트> 생성

↓

빅브라더 안의 미니 함수 파싱하면서 <미니 함수 실행 컨텍스트> 생성

 

요런 순서로 실행 컨텍스트가 생성이 되고,

스택에는 가장 나중에 생성된 <미니 함수 실행 컨텍스트> 가 최상단에 쌓이고

 

미니가 먼저 실행되고 POP 된 후 그다음 빅브라더가 POP 되고 전역이 POP 되며 스택이 텅 - 비게 된다