자바스크립트 입문_LexicalEnvironment, 호이스팅(hoisting)

(본 포스팅은 위키북스의 '코어자바스크립트' 책을 공부하면서 작성되었습니다_내돈내산)

 

• LexicalEnvironment: 컨텍스트를 구성하는 환경정보들을 사전에서 접하는 느낌으로 모아놓은 것
  ( 예: 현재 컨텍스트의 내부에는 a,b,c와 같은 식별자들이 있고 그 외부 정보는 D를 참조하도록 구성되어있음.)
  environmentRecord와 outerEnvironmentReference로 구성되어있음.
• environmentRecord : 현재 컨텍스트와 관련된 코드의 식별자 정보가 저장됨. (함수에 지정된 파라미터 식별자, 선언한 함수의 자체, var로 선언된 변수의 식별자 등). 컨텍스트 내부 전체를 순서대로 훑어가며 정보를 수집함.     

---

• 호이스팅(hoisting) : 자바스크립트 엔진이 environmentRecord에 담김 식별자 정보들을 최상단에 끌어올려놓은다음 코드를 실행한다고 생각하는 변수정보의 수집과정을 이해하기 쉽게 설명한 가상의 개념(실제로는 아님)

<원본코드>

function a(x) {		// 수집대상 1(매개변수)
    console.log(x); // (1)
    var x;			// 수집대상 2(변수선언)
    console.log(x);	// (2)
    var x = 2;		// 수집대상 3(변수선언)
    console.log(x);	// (3)
}
a(1)

<호이스팅_매개변수를 변수 선언/할당과 같다고 간주해서 변환한 상태>

function a() {		
    var x = 1;		// 수집대상 1(매개변수)
    console.log(x); // (1)
    var x;			// 수집대상 2(변수선언)
    console.log(x);	// (2)
    var x = 2;		// 수집대상 3(변수선언)
    console.log(x);	// (3)
}
a()

<호이스팅 마침>

function a() {
    var x; 			// 수집대상 1의 변수 선언 부분
    var x;			// 수집대상 2의 변수 선언 부분
    var x;			// 수집대상 3의 변수 선언 부분
    
    var x = 1;		// 수집대상 1의 할당 부분
    console.log(x); // (1)
    console.log(x);	// (2)
    var x = 2;		// 수집대상 3의 할당 부분
    console.log(x);	// (3)
}
a()

• environmentRecord는 현자 실행된 컨텍스트의 대상코드내에 어떤 식별자들이 있는지에만 관심이 있음. 그러므로 변수선언부분을 끌어올리고 할당과정은 원래 자리에 남겨두는 형식이 이루어짐.
• 위 코드의 실행결과는 (1) 1 / (2) 1 / (3) 2 가 됨. 호이스팅 전에는 파악하기 힘들었지만 호이스팅 작업을 거친 후 코드를 보았을 때 결과를 쉽게 알 수 있음.