실행 컨텍스트 정리 - JavaScript

김민찬·2023년 1월 21일

javascirpt 실행 컨텍스트

JavaScript

목록 보기

22/23

실행 컨텍스트

실행 컨텍스트*(Execution Context)란

코드를 실행하는데 필요한 환경을 제공하는 객체

"식별자 결정을 더욱 효율적으로 하기 위한 수단"이라고도 할 수 있다.

컨텍스트의 원칙 4가지 (제로초 블로그 참조)

- 먼저 전역 컨텍스트를 하나 생성 후, 함수 호출 시마다 컨텍스트가 생긴다.
- 컨텍스트 생성 시 컨텍스트 안에 "변수객체(arguments, variable), scope chain, this"가 생성된다.
- 컨텍스트 생성 후 함수가 실행되는데, 사용되는 변수 객체 안에서 값을 찾고, 없다면 스코프 체인을 따라 올라가며 찾는다.
- 함수 실행이 마무리되면 해당 컨텍스트는 사라진다.(클로저 제외) 페이지가 종료되면 전역 컨텍스트가 사라진다.

실행 컨텍스트의 생성 시점

Global Execution Context: JS 엔진이 스크립트를 처음 마주할 때 전역 컨텍스트(Global Context)를 생성하고 콜 스택*에 push한다.
Function Execution Context: 엔진이 스크립트를 읽으면서 함수 호출을 발견할 때마다, 함수의 실행 컨텍스트를 스택에 push한다.
- 함수 실행 컨텍스트는 함수가 실행될때 만들어진다.
Eval Execution Context: eval함수를 실행하면 실행 컨텍스트가 생성된다.
- evel()은 사용할 일이 없기 때문에 3번은 무시해도 된다.
- MDN에서도 "evel을 절대 사용하지 말것!"이라고 적혀 있을 정도로 보안상 위험하다고 한다.
  - evel()은 인자로 받은 코드를 caller의 권한으로 수행하는데, 악의적인 문자열을 evel()함수로 실행한다면 사용자의 기기에서 악의적인 코드를 실행 할 수 있기 때문이다.

실행 컨텍스트의 단계

생성 단계와 실행 단계, 두 단계로 나눠져 있다.

GO: 빌트인 객체(Math, String 등)과 BOM, DOM, 전역변수
AO: 함수 선언, 매개변수, 변수

Creation phase: 생성 단계
- GO, AO, This가 형성된다.
  - Scopechain(outer scope 참조: 변수 쉐도잉 발생)
  - 이 Createion phase때문에 호이스팅이 가능하다.
    - 코드를 한번 훑으면서 참조가 가능하게 만들기 때문
  - 값이 들어가 있지 않는 초기값 (var는 선언 & 초기화, let과 const는 선언)
Execution phase: 실행 단계
- GO, AO, This 값이 할당된다.
- This는 함수호출패턴 또는 Lexical Scope*에 따라 값이 정해진다.

실행 컨텍스트의 변화

ES3 시절
- 실행 컨텍스트가 식별자 결정의 중심에 있지 않았다.
- 함수가 어디서 실행되느냐에 따라서 스코프가 달라졌다.
- 함수가 호출될 때마다 동적으로 그에 걸맞는 스코프를 생성하고, 스코프 체인을 연결해 주어야 했다.
ES5 이후 (2009년 ~)
- 식별자 결정을 위한 메커니즘의 변경
- 실행 컨텍스트라는 하나의 덩어리, 하나의 묶음으로 관리한다.
- 스코프가 호출되는 위치와 상관 없이 어디에 선언되었느냐에 따라 정적으로 결정되고, 하나의 컨텍스트 개념으로 묶어놔서 자바스크립트 엔진은 더욱 빠르고 효율적으로 식별자를 결정할 수 있다.

용어 정리

컨텍스트(Context): '문맥', '맥락'
환경(Environment): 코드 실행에 영향을 주는 조건이나 상태
콜 스택(Call Stack): JavaScript 코드가 실행되며 생성되는 실행 컨텍스트를 저장하는 자료구조
- Stack 구조로 가장 최근에 추가된 실행 컨텍스트만 활성화 된다.
Lexical Scope: Scope(유효 범위)가 어디에 선언 하였는지에 따라 결정되는 것
- Static Scope(정적 스코프)라고 부르기도 한다. (반대는 Dynamic Scope이다.)
- 함수를 어디서 선언하였는지에 따라 상위 스코프가 결정된다.