7. Record와 호이스팅

실행 컨텍스트 : 객체에 담기는 정보

실행 컨텍스트는 3가지가 있다.

 

1. Variable Environment,    2. Lexical Environment,    3. This Binding

1. Variable  Environment (VE)

현재 컨텍스트 내의 식별자 정보(record) = VE, LE

var a = 3 일때, var a 가 식별자 정보. (3은 변수)

또한 외부환경 정보(outer)도 갖고있다.

 

정리 : VE는 두가지를 가지고 있다.

식별자정보(record)와 외부환경정보(outer)

 

식별자정보(record) : Environment Record

외부환경정보(outer) : Outer Environment Reference

 

2.Lexical Environment (LE)

기본적으로 Variable  Environment 와 Lexical Environment 는 완전히 같은 개념이다. 차이점은, 실행컨텍스트가 최초에 생길 때 LE는 변경사항을 실시간으로 반영하면서 업데이트되고, VE는 생길떄의 모습을 그대로 간직한다. 그대로 계속 간직하는 것을 스냅샷 (Sanpshot)이라고 한다.

LE는 VE와 완전히 똑같으므로 식별자정보(record)와 외부환경정보(outer)를 갖고있다.

 

정리 : VE와 LE는 완전히 동일하다. 차이점은 VE는 스냅샷을 유지하고, LE는 스냅샷을 유지하지 않는다. 실시간으로 변경된다.

 

3. This Binding 

this가 함수 function안에서 어떤 기능을 할 지 결정해주는 역할을 하는것. 역시 실행 컨텍스트 안에 있다.

 

 

결국, 실행 컨텍스트를 생성할 때, VE에 먼저 정보를 담은 다음 이를 그대로 복사해서 LE를 만들고

이후에는 주로 LE를 활용한다.

---

record는 현재 컨텍스트 관련 코드의 식별자 정보. 변수 저장시 var a 라는 것. 식별자 정보를 컨텍스트에 "기록한다" = record 

 

수집되는 대상 :

(1)정보가 함수 function안에 들어가는 매개변수 식별자, (2)함수function 자체, (3)var로 선언된 변수 식별자 등.

수집 방법 : 컨텍스트 내부를 처음부터 끝까지 순서대로 돌아가며 수집한다.

순서대로 수집하는 것일뿐, 실행되진 않는다.

 

호이스팅 개념은 record(식별자 정보를 수집할 때)에서 나온다. 호이스팅은 실제가 아닌 가상 개념.

호이스팅 : 식별자 정보를 위로 끌어올리는 것. 즉 호이스팅은 식별자정보(record)를 수집하는 과정

 

호이스팅 법칙 1. 매개변수나 변수는 선언부를 호이스팅 한다.

 

//action point 1 : 매개변수 다시 쓰기(JS 엔진은 똑같이 이해한다)
//action point 2 : 결과 예상하기
//action point 3 : hoisting 적용해본 후 결과를 다시 예상해보기

 

매개변수 적용 전

function a (x) {
	console.log(x);
	var x;
	console.log(x);
	var x = 2;
	console.log(x);
}
a(1);

매개변수 적용 전을 보면, 마지막 a(1)로 인해 x=1 적용할 시 우리가 예상하는 값은

첫번째 console.log(x); 1

두번째 console.log(x); undefined (var x 변수지정안됨)

세번째 console.log(x); 2

로 예상할 수 있다.

 

매개변수 적용 후.

x에 1을 넣었다고 가정.

function a () {
	var x = 1;
	console.log(x);
	var x;
	console.log(x);
	var x = 2;
	console.log(x);
}
a(1);

호이스팅 적용

밑에있던 var x; 3개가 위로 올라옴. 나머지는 그대로 씀. x=1, x=2, console.log(x); 3개

function a () {
	var x;
	var x;
	var x;

	x = 1;
	console.log(x);
	console.log(x);
	x = 2;
	console.log(x);
}
a(1);

첫번째 console.log(x);  1

두번째 console.log(x);  1

세번째 console.log(x);  2

우리의 예상과는 달리, 호이스팅 적용시 이렇게 찍힘.

 

 

호이스팅 법칙 2. 함수 선언은 전체를 호이스팅 한다.

 

호이스팅 적용 전

function a () {
	console.log(b);
	var b = 'bbb';
	console.log(b);
	function b() { }
	console.log(b);
}
a();

호이스팅을 적용하기 전에, console.log(b)는 없으므로 undefined, 두번째는 'bbb',  세번째는 b가 함수이므로 function이 찍힐 거라고 예상한다.

 

우리의 예상

첫번째 console.log(b); undefined

두번째 console.log(b);  'bbb'

세번째 console.log(b); function (b가 선언된게 함수이므로 function)

 

 

호이스팅 적용 후

function a () {
	var b;               //변수 선언부 호이스팅
	function b() { }     //함수 선언은 전체를 호이스팅

	console.log(b);
	b = 'bbb';           //변수의 할당부는 원래 자리에

	console.log(b);
	console.log(b);
}
a();

첫번째 console.log(b); function (b가 선언된게 함수이므로 function)

두번째 console.log(b); 'bbb'

세번째 console.log(b); 'bbb'

우리의 예상과는 달리, 호이스팅 적용시 이렇게 찍힘.

 

---

그러나 이 호이스팅은 모든 함수에 적용되는 것은 아니다.

 

함수 선언문, 함수 표현식 (함수 표현식은 익명함수 표현식, 기명함수 표현식으로 나뉨, 기명함수 표현식은 거의안씀)

 

1.함수 선언문. 함수명 a가 곧 변수명 (function 정의부만 존재, 할당 명령이 없는 경우)
function a () { ... }
a(); // 실행 ok


2.함수 표현식. 정의한 function을 별도 변수에 할당하는 경우
2-1.익명함수표현식 : 변수명 b가 곧 변수명(일반적 case)
var b = function () { ... }
b(); // 실행 ok


2-2.기명 함수 표현식 : 변수명은 c, 함수명은 d
(d()는 c() 안에서 재귀적으로 호출될 때만 사용 가능하므로 사용성에 대한 의문)
var c = function d () { ... } 
c(); // 실행 ok
d(); // 에러!

 

기명함수표현식은

var c = function d 처럼 우측의 변수에 함수를 할당하는데도 불구하고 함수에 이름을 적는 것 (기명하는것)

하지만 기명함수표현식은 거의 쓰이지 않으므로, 함수선언문과 익명함수 표현식만 기억하면 된다.

 

여기서, 함수 선언문은 함수 전체가 위로 끌어올려지는 반면, 함수 표현식은 변수 부분만 위로 끌어올려진다.

호이스팅도 변수 선언부만 위로 끌어올려짐.

 

함수 선언문보다, 함수 표현식을 활용하는 습관 기르기.