실행 컨텍스트

실행 컨텍스트

• 실행할 코드에 제공할 환경 정보들을 모아 놓은 객체
• 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 객체를 구성하고, 
• 이를 콜 스택에 쌓아 올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행
• 전체 코드의 환경과 순서를 보장
  
• 어떤 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고 외부 환경 정보를 구성하고, this 값을 설정하는 등의 동작
  
• 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념
  
  

실행 컨텍스트를 이해하면, 

자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩 된 값을 관리하는 방식

호이스팅 발생 이유

클로저 동작 방식

이벤트 핸들러와 비동기 처리의 동작 방식

들을 이해할 수 있음

 

실행 컨텍스트가 활성화 되는 시점에 다음과 같은 현상 발생

• 호이스팅 발생
• 외부 환경 정보 구성
• this 값 설정
  
  

실행 컨텍스트 생성 요건

• 전역 공간
• 함수 실행 (일반적으로 함수를 이용한 실행 컨텍스트 사용)
• eval() 함수 실행
• block

 

ECMAScript 에서는 소스코드를 4가지 타입으로 구분, 4가지 타입의 소스코드는 실행 컨텍스트를 생성

구분 이유: 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다름

소스코드 타입설명

global code	전역에 존재하는 소스 코드, 내부 코드는 포함 X 스코프: 전역 스코프 (최상위 스코프) var 키워드로 선언된 전역변수, 함수 선언문으로 정의된 전역 함수 → 전역 객체의 프로퍼티와 메서드로 바인딩 전역 실행 컨텍스트 생성
function code	함수 내부에 존재하는 소스 코드, 중첩된 함수, 클래스 등의 내부 코드는 포함 X 스코프: 지역 스코프 지역변수, 매개변수, arguments 객체 관리 생성한 지역 스코프를 전역에서 시작되는 스코프 체인으로 연결 함수 실행 컨텍스트 생성
eval code	빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스 코드 strict mode에서 독자적인 스코프 생성 eval 실행 컨텍스트 생성
module code	모듈 내부에 존재하는 소스코드, 모듈 내부의 코드는 포함 X 모듈별로 독립적인 모듈 스코프 생성 모듈 실행 컨텍스트 생성

 

자바스크립트 엔진은 소스코드를 2개의 과정으로 처리

1. 소스코드의 평가

• 실행 컨텍스트 생성
• 선언문만 먼저 실행하여 생성된 변수나 함수의 식별자를 키로 하여 실행컨텍스트가 관리하는 스코프에 등록 (렉시컬 환경의 레코드에 등록)

1. 소스코드의 실행
   • 평가 과정이 끝나면, 선언문을 제외한 소스코드 실행 시작 (런타임 시작)
   • 소스코드 실행에 필요한 정보(변수나 함수의 참조)를 실행컨텍스트가 관리하는 스코프에서 검색해 취득
   • 소스코드의 실행 결과(ex.변수 값 변경)는 다시 실행 컨텍스트가 관리하는 스코프에 등록

 

1. 전역 코드 평가

소스평가 과정에서 전역코드의 변수선언문과 함수선언문이 먼저 실행

그 결과 생성된 전역 변수와 전역 함수가 실행컨텍스트가 관리하는 전역 스코프에 등록 됨

var 키워드로 선언된 전역 변수와 함수 선언문으로 정의된 전역 함수는 전역 객체의 프로퍼티와 메서드가 됨

 

2. 전역 코드 실행

평가 과정 끝난 후 런타임 시작되면 전역 코드가 순차적으로 실행

이 때 전역 변수에 값이 할당 되고 함수 호출

함수 호출 → 순차적으로 실행되던 전역 코드의 실행 일시 중지

함수 내부로 진입(코드의 제어권이 함수 내부로 이동)

3. 함수 코드 평가

함수 호출에 의해 함수 내부로 진입

매개변수와 지역 변수 선언문이 먼저 실행되고, 생성된 매개변수와 지역변수가 지역 스코프에 등록

함수 내부에서 지역변수처럼 사용할 수 있는  arguments객체 생성되고 지역 스코프에 등록

this 바인딩 결정

 

4. 함수 코드 실행

선언에 의해 생성된 모든 식별자(변수, 함수, 클래스..)를 스코프를 구분하여 등록

상태 변화(바인딩 된 값 변경)를 지속적으로 관리

스코프는 중첩 관계에 의해 스코프 체인을 형성해야 함 → 스코프 체인을 통해 상위 스코프로 이동하며 식별자를 검색할 수 있어야 함

함수 호출이 종료되면 현재 실행 중인 코드의 실행 순서를 변경할 수 있어야 하고 (ex 함수 호출에 의한,,), 다시 되돌아갈 수 있어야 함

 

실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경 제공, 코드의 실행 결과를 실제로 관리하는 영역

실행 컨텍스트는 식별자(변수, 함수, 클래스 등의 이름)를 등록하고, 관리하는 스코프와  코드 실행 순서 관리를 구현한 내부 매커니즘

모든 코드는 실행 컨텍스트를 통해 실행되고 관리

 

호이스팅

자바스크립트는 코드를 실행하기전에 식별자를 수집

코드가 실행 되기 전에 자바스크립트의 엔진은 이미 실행 컨텍스트에 속한 변수명들을 모두 알고 있음

 

자바스크립트 엔진은 식별자들을 최상단으로 끌어 올려 놓은 다음, 실제 코드를 실행

<변수 호이스팅>

function a (x) {
  console.log(x);
  var x ;
  console.log(x);
  var x = 2;
  console.log(x);
}
a(1);
 
 
/////호이스팅 발생 하면 이렇게 해석될 수 있음
 
 
function a () {
  var x;
  var x;
  var x;
 
  x = 1;
  console.log(x); // 1
  console.log(x); // 1
  x = 2;
  console.log(x); // 2
}
a();

변수의 경우, 정의 부분만 호이스팅 되지만,

함수의 경우, 함수 전체가 호이스팅 됨

<함수 호이스팅>

function a () {
  console.log(b);
  var b = 'bbb';
  console.log(b);
  function b () {};
  console.log(b);
}
a();
 
 
////호이스팅 발생하면 이렇게 해석될 수 있음
 
 
function a () {
  var b;
  function b () {};
 
  console.log(b); // f b () {}
  b = 'bbb';
  console.log(b); // bbb
  console.log(b); // bbb
}
a();