📃 실행 컨텍스트 (Execution Context)
💡 실행 컨텍스트란?
Scope, Hoisting, This, Function, Closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리
- 코드를 짜면, 코드 블록 안에는 변수, 객체, 실행 가능한 코드가 있다.
- 이 코드를 실행하게 되면 실행 컨텍스트가 생성된다.
- 그 다음, 이 실행 컨텍스트들은 자바스크립트 엔진의 콜 스택에 차곡차곡 쌓이게 된다.
- 이때 제일 상단에 위치하고 있는 실행 컨텍스트가 현재 실행되고 있는 컨텍스트다.
실행 가능한 코드가 실행되기 위해 필요한 환경
-
실행 가능한 코드
- 전역 코드
- eval ( ) 함수로 실행되는 코드
- 함수 내에 존재하는 코드가 실행될 경우 -
실행에 필요한 정보
- 변수
- 함수 선언
- 변수의 유효범위 ( Scope )
- this
💡 실행 컨텍스트 생성, 소멸
- 아래 코드로 실행 컨텍스트 스택이 생성되고 소멸하는 과정을 알아보자!
const x = 'xxx';
function foo () {
const y = 'yyy';
function bar () {
const z = 'zzz';
console.log(x + y + z);
}
bar();
}
foo();- 논리적 스택 구조를 가지는 실행 컨텍스트 스택
- 코드와 이미지를 통해 스택이 생성되고 소멸하는 과정
- 코드를 실행하기 전, 실행 가능한 코드로 이동하면 실행 컨텍스트를 쌓아나갈 실행 컨텍스트 스택이 먼저 생성된다.
- 처음 전역 코드를 실행하려 하면, 전역 실행 컨텍스트 ( global EC )가 생성되고, 실행 컨텍스트 스택에 쌓이게 된다.
- 함수를 호출하면 ( 현재 실행 중인 컨텍스트와 관련없는 코드의 실행 ) 해당 함수의 새로운 실행 컨텍스트가 생성되며, 직전에 실행된 코드 블록의 실행 컨텍스트 위에 쌓인다.
- 함수의 실행이 끝나면 해당 실행 컨텍스트를 소멸하고 직전의 실행 컨텍스트로 컨트롤이 이동한다.
- 전역 실행 컨텍스트는 웹 페이지를 종료하기 전까지 사라지지 않는다.
- 글로벌의 경우 실행 이전에 생성되지만 함수의 경우 호출할 때 생성된다.
💡 실행 컨텍스트의 3가지 객체 Property
-
자바스크립트 엔진은 실행 컨텍스트를 물리적 객체의 형태로 관리한다.
-
3가지의 프로퍼티로 실행에 필요한 정보들을 보관한다.
✔️ Variable Object (VO / 변수객체)
-
자바스크립트 엔진은 실행에 따라 여러 정보들을 담을 객체를 생성하는데 이를 VO라고 한다.
-
코드가 실행될 때 엔진에 의해 참조되며 코드에서는 접근 불가하다.
-
Variable Object에 담긴 정보
- 변수
- 매개변수 ( Parameter ) 와 인수 ( Arguments )
- 함수 선언 ( 함수 표현식은 제외 ) -
Variable Object는 실행 컨텍스트의 프로퍼티이기 때문에 값을 갖는데 이 값은 다른 객체를 가리킨다.
→ 여기서 전역 컨텍스트와 함수 컨텍스트의 Variable Object는 서로 다른 객체를 가리킨다.
( 전역 코드와 함수 코드의 내용이 다르기 때문 )
전역 컨텍스트 실행 (Global Execution Context) 일 때
-
Variable Object는 전역 객체 (Global Object / GO) 를 가리킨다.
-
전역 객체 (GO)는 최상위에 위치하면서 유일하고, 모든 전역 변수, 전역 함수 등을 포함한다.
-
전역 객체 (GO)는 전역에 선언된 전역 변수와 전역 함수를 프로퍼티로 소유한다.
함수 컨텍스트 실행 (Function Execution Context) 일 때
-
Variable Object는 활성 객체 (Activation Object / AO)를 가리킨다.
-
활성 객체 (AO)는 매개변수와 인수들의 정보를 배열의 형태로 담고 있는 객체인 Arguments Object가 추가된다.
-
활성 객체 (AO)는 앞으로 쓸 매개변수, 사용자가 정의한 변수 및 객체를 저장하고 새로 만들어진 컨텍스트에 접근 가능하도록 만들여졌다.
✔️ Scope Chain (SC)
-
스코프 체인은 식별자 중에서 변수를 검색하는 메커니즘으로 사용된다.
-
해당 전역 또는 함수 컨텍스트의 변수 객체 (VO)가 가리키는 전역 객체 (GO)와 활성 객체 (AO)의 참조로 이루어진 리스트이다.
-
현재 실행 컨텍스트의 활성 객체를 선두로 하여 순차적으로 상위 컨텍스트의 활성 객체를 가리키며 마지막으로 전역 객체를 가리킨다.
-
스코프 체인을 통해 하위함수에서 상위함수의 스코프까지 참조가 가능하다.
( 함수가 중첨되어 있으면 부모함수의 스코프가 자식함수의 스코프 체인에 포함되기 때문 )
위 이미지를 설명하면 :변수를 파악하기 위해 먼저 현재 스코프 즉, AO에서 검색하고 존재하지 않으면 스코프 체인에 담긴 순서대로 검색을 하게 된다.
예) AO → AO → ··· → GO
✔️ this value
- this 프로퍼티는 this 값에 할당된다.
- 이는 자바스크립트 함수 호출 방식에 의해 this에 바인딩할 객체가 동적으로 결정된다.
📃 스코프 체인 (Scope Chain)
💡 스코프 체인 기본 개념
-
스코프가 중첩된 모든 상황에서 발생한다.
-
자바스크립트 엔진은 변수 ( 식별자 ) 를 찾을 때 제일 먼저 자신이 속한 스코프에서부터 검색하고,
그 스코프에 찾는 변수가 없으면 상위 스코프를 타고 올라가서 순차적으로 검색한다. -
상위 스코프에서 하위 스코프에 선언된 변수로는 접근 불가하다.
정리하자면 :실행문의 위치를 기준으로 하위 스코프부터 시작해 원하는 값을 찾을 때까지 상위 스코프를 타고 올라가며 탐색해 가는 것이 스코프 체인의 가장 기본적인 작동방식이다.
위 예시를 계층 구조로 나타내면 :
