본문 바로가기
프로그래밍/Javascript & React

[Javascript] 실행 컨텍스트(Execution Context)

by Dean30 2022. 1. 18.
728x90

[Javascript] 실행 컨텍스트(Execution Context)

 

 

실행 컨텍스트

실행 컨텍스트는 코드를 실행하기 위해 필요한 환경(객체)이다.

실행 컨텍스트(Execution Context)는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다.

 

여기서는 실행 컨텍스트 안에 있는 Record와 Outer만 고려하기로 하자.

 

 

먼저 자바스크립트 엔진이 실행 컨텍스트를 생성하고 제거하는지는 아래와 같다.

 

  • 제일 처음에는 전역 실행 컨텍스트가 실행되며, 함수를 호출할 경우 그 함수의 실행 컨텍스트를 생성해서 콜 스택에 담는다.
  • 콜스택에서는 가장 최근에 추가된 실행 컨텍스트만 활성화 된다.
  • 전역에 있는 코드가 마지막 라인까지 모두 실행되면 전역 컨텍스트도 사라진다.

 

 

1. Record로 hoisting 이해

 

자바스크립트 엔진이 변수나 함수 선언해 놓은 것들을 실행 컨텍스트의 환경 레코드(Environment Record)에 기록한다.

환경 레코드는 식별자와 식별자에 바인딩된 값을 기록한 객체이다.

 

호이스팅은 2단계에 걸쳐 실핸된다.

  • 생성 단계 : 실행 컨텍스트 생성. 선언문만 실행하여 환경 레코드에 기록
  • 실행 단계 : 선언문 외 나머지 코드 순차적 실행. 환경 레코드 참조하거나 업데이트

 

변수 호이스팅

var의 경우 선언 호이스팅 생성 단계에서 undefined로 초기화된다.

let이나 const의 경우 생성 단계에서 식별자를 기록해두긴 하지만 초기화하지 않아 이 값을 참조하려고 시도할 경우 Reference Error가 나타난다. 선언 및 할당되는 부분 이전에 식별자를 참조할 수 없는 구역을 일시적 사각지대(Temporal Dead Zone)이라고 한다.

 

let, const는 선언후 초기화되지 않음

 

함수 호이스팅

변수와 같다.

함수 선언문의 경우 생성 단계에서 바로 실행 컨텍스트에 저장된다.

하지만 함수 표현식의 var는 undefined로 초기화되고 let, const의 경우 초기화되지 않아 일시적 사각지대가 형성된다.

 

 

키워드 - 호이스팅, 생성 단계, 실행 단계, 선언, 초기화, 일시적 사각지대, 함수 표현식, 함수 선언문

 

 

 

2. Outer로 scope chaining 이해

 

실행 컨텍스트에 환경 레코드에 변수, 함수 뿐만 아니라 매개변수도 저장된다.

자바스크립트 엔진은 아래와 같이 변수 lamp를 참조할 경우 콜 스택 가장 위에 있는 활성 컨텍스트에서 변수를 가장 먼저 참조한다.(식별자 결정)

 

만약 활성 컨텍스트에 변수가 없으면 외부 렉시컬 환경을 통해 상위 컨텍스트에 접근한다. 또 없다면 반복해서 확인하다가 전역 실행 컨텍스트까지 확인한다.

 

스코프 체인 : 식별자를 결정할 때 활용하는 스코프들의 연결리스트

 

키워드 - 식별자 결정, 스코프 체인

 

 

 

 

3. 실행 컨텍스트 정리

 

실행 컨텍스트는 필요한 정보를 자바스크립트가 식별자 결정을 더욱 효율적으로 하기 위한 수단 !

 

 

 

 

참조 : https://www.youtube.com/watch?v=EWfujNzSUmw 

 

728x90

댓글