[JS] 실행 컨텍스트

강은비·2021년 12월 21일
0

JS

목록 보기
5/19
post-custom-banner

코어 자바스크립트 책을 읽고 배운 내용을 바탕으로 작성되었다.


📌 실행 컨텍스트란?

Execution context

  • 실행할 코드에 제공할 환경 정보를 모아놓은 객체이다.
  • VariableEnvironment (변수 객체), LexicalEnvironment (렉시컬 환경), ThisBinding으로 구성된다.
  • 실행 컨텍스트에는 전역 컨텍스트와 함수 컨텍스트가 있다.
  • 처음 자바스크립트 코드를 실행하는 순간 전역 컨텍스트가 생성되고, 콜 스택에 쌓인다.
  • 그 다음, 함수 호출 시마다 함수 컨텍스트가 생성되어 콜 스택에 쌓인다.
  • 함수 컨텍스트 생성 후 함수가 실행되는데, 함수 내에서 사용되는 변수들은 렉시컬 환경 객체에서 찾고 없다면 스코프 체인에 따라 올라가며 찾는다.
  • 함수 실행이 마무리되면 해당 컨텍스트는 콜 스택에서 제거된다.
  • 전체 자바스크립트 코드가 종료되면 전역 컨텍스트는 콜 스택에서 제거된다.
  • 즉, 자바스크립트의 코드가 실행되기 위해 변수 객체, 렉시컬 환경, this 정보들을 담고 있는 객체을 실행 컨텍스트라고 부른다.

📙 Variable Environment

  • 현재 컨텍스트 내의 식별자들에 대한 정보, 외부 환경 정보가 담겨 있다.
  • 실행 컨텍스트를 생성할 시점에는 LexicalEnvironment (렉시컬 환경)와 동일한 내용으로 구성되어 있지만, 함수 실행 도중 변경사항이 생길 때에는 렉시컬 환경에만 반영한다.
  • 따라서 VariableEnvironment (변수 객체)는 초기 상태를 유지한다.


📙 Lexical Environment

  • Lexical Environment특정 코드가 작성, 선언된 환경이다.
  • 렉시컬 환경 객체는 environmentRecordouterEnvironmentReference로 구성되어 있다.

Environment Record

  • environmentRecord에는 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장된다. 매개변수명, 변수의 식별자, 선언한 함수의 함수명 등이 있다.
  • 컨텍스트 내부 전체를 처음부터 끝까지 쭉 훑어나가며 순서대로 식별자 정보들을 수집한다.
  • 이때 Hoisting이 발생한다.

Hoisting

  • 호이스팅은 environmentRecord의 수집과정을 추상화한 개념이다.
  • 변수 선언문이나 함수 선언문이 해당 스코프의 최상단으로 옮겨진 것처럼 동작하는 특성을 말한다.
  • 이때 변수는 선언부와 할당부를 나누어 선언부만 끌어올리는 반면, 함수 선언은 함수 전체를 끌어올린다.
  • 함수 선언문의 경우 함수 전체를 끌어올리지만, 함수 표현식에는 변수 호이스팅이 일어난다.

Outer Environment Reference

  • outerEnvironmentReference현재 호출된 함수가 선언된 당시의 Lexical Environment를 참조한다.
  • 코드 상에서 어떤 변수에 접근하려 하면 현재 컨텍스트의 LexicalEnvrinonemt를 탐색해서 발견되면 그 값을 반환하고, 발견하지 못하면 outerEnvironmentReference에 담긴 LexicalEnvironment를 탐색하는 과정을 거친다. 계속 찾지 못할 경우 전역 컨텍스트의 LexicalEnvironment까지 탐색해 나가며 해당 변수의 스코프 체인을 따라 탐색한다.


📙 This Binding

  • thisBinding에는 this로 지정된 객체가 저장된다.
  • 실행 컨텍스트가 생성될 당시에 this가 지정되지 않은 경우 this에는 전역 객체가 저장된다.
  • 그 밖에 함수를 호출하는 방법에 따라 this에 저장되는 대상이 다르다.
post-custom-banner

0개의 댓글