[자바스크립트 문법] 실행컨텍스트와 호이스팅

실행컨텍스트

• 역할
  1. 선언된 변수를 위로 끌어올린다 = 호이스팅(hoisting)
  2. 외부 환경 정보 구성
  3. this 값 설정

실행컨텍스트란?

• 동일 환경에 있는 코드를 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 이것을 위에서 설명드린 ‘스택’의 한 종류인 콜스택에 쌓아올린다

• 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장할 수 있다

• 컨텍스트의 구성

  1. 구성 방법
     a. 전역공간
     b. eval() 함수
     c. 함수 (우리가 흔히 실행컨텍스트를 구성하는 방법)
     
     

  2. 실행컨텍스트 구성 예시 코드

     // ---- 1번
     var a = 1;
     function outer() {
     	function inner() {
     		console.log(a); //undefined
     		var a = 3;
     	}
     	inner(); // ---- 2번
     	console.log(a);
     }
     outer(); // ---- 3번
     console.log(a);

  3. 실행컨텍스트 구성 순서

     
     코드실행 → 전역(in) → 전역(중단) + outer(in) → outer(중단) + inner(in) → inner(out) + outer(재개) → outer(out) + 전역(재개) → 전역(out) → 코드종료

  4. 실행 컨텍스트 객체의 실체(=담기는 정보)
     a. VariableEnvironment

     • 현재 컨텍스트 내의 식별자 정보(=record)를 갖고 있다
     • 외부 환경 정보(=outer)를 갖고 있다
     • 선언 시점 LexicalEnvironment의 snapshot

     b. LexicalEnvironment

     • VariableEnvironment와 동일하지만, 변경사항을 실시간으로 반영한다

     c. ThisBinding

     • this 식별자가 바라봐야할 객체

LexicalEnvironment(1) - environmentRocord(=record)와 호이스팅

• 개요

  • 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장된다
  • 수집 대상 정보: 함수에 지정된 매개변수 식별자, 함수 자체, var로 선언된 변수 식별자 등
  • 컨텍스트 내부를 처음부터 끝까지 순서대로 훑어가며 수집 (실행 X)

• 호이스팅

  • 변수 정보 수집 과정을 이해하기 쉽게 설명한 '가상 개념'

• 호이스팅 규칙

  1. 매개변수 및 변수는 선언부를 호이스팅 한다
     <적용 전>

     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);
     	console.log(x);
     	x = 2;
     	console.log(x);
     }
     a(1);

  2. 함수 선언은 전체를 호이스팅
     <적용 전>

     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);
     	b = 'bbb'; // 변수의 할당부는 원래 자리에
     
     	console.log(b);
     	console.log(b);
     }
     a();

  3. 함수 선언문, 함수 표현식

     // 함수 선언문은 전체를 hoisting
     function sum (a, b) { // 함수 선언문 sum
     	return a + b;
     }
     // 변수는 선언부만 hoisting
     var multiply; 
     console.log(sum(1, 2));
     console.log(multiply(3, 4));
     //
     multiply = function (a, b) { // 변수의 할당부는 원래 자리
     	return a + b;
     };

  • 함수 선언문보다는 표현식을 사용하자!

LexicalEnvironment(2) - 스코프, 스코프 체인, outerEnvironmentReference(=outer)

스코프

• 식별자에 대한 유효범위

스코프 체인

• 식별자의 유효범위를 안에서부터 바깥으로 차례로 검색해나가는 것

outerEnvironmentReference(이하 outer)

• 스코프 체인이 가능토록 하는 것
• 외부 환경의 참조정보

스코프 체인의 동작

1. outer는 현재 호출된 함수가 선언될 당시의 LexicalEnvironment를 참조한다
2. outer 자신이 선언된 시점의 가장 가까운 요소부터 차례대로 접근 가능
3. 차례대로 올라가다 보면 전역 컨텍스트의 LexicalEnvironment를 참조하게 된다

var a = 1;
var outer = function() {
	var inner = function() {
		console.log(a); // undefined, inner 함수의 var a; 참조
		var a = 3;
	};
	inner();
	console.log(a); // 1, 전역에 있는 var a=1 참조
};
outer();
console.log(a); // 1