-
[Javascript] 실행 컨텍스트(Execution Context)■ Front-End/- JavaScript & TypeScript 2019. 6. 21. 09:00
실행 컨텍스트는 Javascript에서 중요한 scope, hoisting, this, function, closure 등의 동작 원리를 담고 있는 핵심 원리이다.
실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경이라고 볼 수 있다.
실행 컨텍스트의 3가지 객체
1. Variable Object(변수 객체)
변수, 매개변수와 인수정보, 함수 선언(함수 표현식은 제외) 의 정보를 담고 있는 객체이다.
전역 컨텍스트의 경우, 전역 객체(Global Object)를 가리킨다.
예제 코드
위 코드를 실행하면 최초에는 전역 컨텍스트가 생성되고, 해당 컨텍스트의 변수 객체는 전역 객체를 가리킨다.
함수 컨텍스트를 가리키는 경우에는 활성 객체(Activation Object)를 가리킨다.
2. Scope Chain(SC)
- 일종의 리스트.
- 전역 객체와 중첩된 함수의 스코프의 레퍼런스를 차례로 저장.
함수 실행 중에 변수를 만나면 그 변수를 우선 현재 Scope, 즉 Activation Object에서 검색해보고 만약에 검색에 실패하면 스코프 체인에 담겨진 순서대로 그 검색을 이어간다. 이것이 바로 스코프 체인이다.
3. this value
this 프로퍼티에는 this 값이 할당되며, this에 할당되는 값은 함수 호출 패턴에 의해 결정된다.
실행 컨텍스트의 생성 과정은 아래 웹 사이트에서 자세하게 설명하고 있다.
특히 closure, promise 공부를 하기 전에 아래 사이트에서 실행 컨텍스트의 실행 과정에 대해 공부했는데, 확실히 도움이 되었다.
내용이 길어서 어렵고 복잡해보이지만, 하나씩 차근차근 읽어내려가면 쉽게 이해할 수 있다.
https://poiemaweb.com/js-execution-context
실행 컨텍스트의 생성과정 간단 요약
(1) 컨트롤이 실행 컨텍스트에 진입하기 전, 전역 객체가 생성된다.
전역 객체는 단일 사본으로 존재하며, 이 객체의 프로퍼티는 코드의 어떤 곳에서도 접근할 수 있다.
(2) 전역 객체가 생성된 후, 전역 코드로 컨드롤이 진입하면 전역 실행 컨텍스트가 생성되고 실행 컨텍스트 스택에 쌓인다.
(3) 스코프 체인의 생성과 초기화
(4) Variable Instantiation (변수 객체화) 실행
Variable Object에 프로퍼티와 값을 추가하는 것을 의미한다. 전역 코드의 경우, Variable Object는 Global Object를 가리킨다.
실행 순서
- (Function Code인 경우) 매개변수(parameter)가 Variable Object의 프로퍼티로, 인수(argument)가 값으로 설정된다.
- 대상 코드 내의 함수 선언(함수 표현식 제외)을 대상으로 함수명이 Variable Object의 프로퍼티로, 생성된 함수 객체가 값으로 설정된다.(함수 호이스팅)
- 대상 코드 내의 변수 선언을 대상으로 변수명이 Variable Object의 프로퍼티로, undefined가 값으로 설정된다.(변수 호이스팅)
(5) this value 결정
this value가 결정되기 이전에 this는 전역 객체를 가리키고 있다가 함수 호출 패턴에 의해 this에 할당되는 값이 결정된다. 전역 코드의 경우, this는 전역 객체를 가리킨다.
전역 컨텍스트(전역 코드)의 경우, Variable Object, 스코프 체인, this 값은 언제나 전역 객체이다.
'■ Front-End > - JavaScript & TypeScript' 카테고리의 다른 글
[Javascript] Hoisting 호이스팅 (0) 2019.07.23 [Javascript] Closure (0) 2019.06.22 [WEB] 세션(Session)과 쿠키(Cookie) (0) 2019.06.21 [ES6] iterator, generator, async/await에 대하여 (0) 2019.06.20 [WEB] CORS에 대하여 (0) 2019.06.20