record & 호이스팅_v3.7

✅ 실행 컨텍스트 객체의 실체(=담기는 정보)

1. VariableEnvironment(VE : record & outer )
   1. 현재 컨텍스트 내의 식별자 정보(=record)를 갖고있어요.
      1. var a = 3
      2. 위의 경우, **var a**를 의미
   2. 외부 환경 정보(=outer)를 갖고있어요.
   3. 선언 시점 LexicalEnvironment의 snapshot
2. LexicalEnvironment(LE : 실시간 반영)** 
   1. VariableEnvironment와 동일하지만, 변경사항을 실시간으로 반영해요.
3. ThisBinding
   1. this 식별자가 바라봐야할 객체

• (2) VariableEnvironment, LexicalEnvironment의 개요
  • VE vs LE
    1. VE : 스냅샷을 유지해요.
    2. LE : 스냅샷을 유지하지 않아요. 즉, 실시간으로 변경사항을 계속해서 반영합니다.
    결국, 실행 컨텍스트를 생성할 때, VE에 정보를 먼저 담은 다음, 이를 그대로 복사해서 LE를 만들고 이후에는 주로 LE를 활용한답니다.
  • 이 두가지는 담기는 항목은 완벽하게 동일해요. 그러나, 스냅샷 유지여부는 다음과 같이 달라요.
  • 구성 요소(VE, LE 서로 같아요!)
    1. VE, LE모두 동일하며, ‘environmentRecord’와 ‘outerEnvironmentReference’로 구성
    2. environmentRecord(=record)
       1. 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장돼요.
       2. 함수에 지정된 매개변수 식별자, 함수자체, var로 선언된 변수 식별자 등
    3. outerEnvironmentReference(=outer)

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

• 개요
  1. 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장(수집)돼요. **기록된다**라고 이해해보면, **record**라는 말과 일맥상통하죠?
  2. 수집 대상 정보 : 함수에 지정된 매개변수 식별자, 함수 자체, var로 선언된 변수 식별자 등
  3. 컨텍스트 내부를 처음부터 끝까지 순서대로 훑어가며 수집
  4.  💡 순서대로 수집한다고 했지, 코드가 실행된다고 하지는 않았습니다!

✅ 호이스팅 (Hoist : 감아올리다)

변수정보 수집을 모두 마쳤더라도 아직 실행 컨텍스트가 관여할 코드는 실행 전의 상태에요(JS 엔진은 코드 실행 전 이미 모든 변수정보를 알고 있는 것)

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

 

💡 가상개념이라는 말은, 실제로는 그렇진 않더라도 사람이 이해하기 쉬운 말로 풀어 표현했다는 것을 의미해요 😄

 

• 호이스팅 규칙
  1. 호이스팅 법칙 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);

<매개변수 적용>

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

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

<호이스팅 적용>

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

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

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

자, 우리는 예상을

1 → undefined → 2로 예상했지만

실제로는

1, 1, 2 라는 결과가 나왔네요

호이스팅이라는 개념을 모르면 예측이 불가능한 어려운 결과입니다.

1. 호이스팅 법칙 2 : 함수 선언은 전체를 호이스팅합니다. 마찬가지로, 2가지 action points에 따라 진행해봅시다.

<적용 전>

//action point 1 : 결과 값 예상해보기
//action point 2 : hoisting 적용해본 후 결과를 다시 예상해보기

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

<호이스팅 적용>

//action point 1 : 결과 값 예상해보기
//action point 2 : hoisting 적용해본 후 결과를 다시 예상해보기

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

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

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

해석을 편하게 하기 위해서 함수선언문을 함수 표현식으로 바꿔볼게요!

//action point 1 : 결과 값 예상해보기
//action point 2 : hoisting 적용해본 후 결과를 다시 예상해보기

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

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

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

이번에도 우리의 예상은 틀렸네요.

에러(또는 undefined), ‘bbb’, b함수

라고 나올 것 같았지만, 실제로는

b함수, ‘bbb’, ‘bbb’

라는 결과가 나왔어요. 이 또한 호이스팅을 고려하지 않고는 결과를 예측하기가 매우 어려웠어요. 호이스팅을 다루는 김에, 함수의 정의방식 3가지와 주의해야 할 내용을 살짝 짚고 넘어가 보도록 하겠습니다 😉