[TIL]231016_호이스팅(Hoisting)

호이스팅의 개념에 대해 배웠는데 잘 이해가 가지않아서 정리를 해보려고 한다.

📍우선 알고넘어가야 할 개념

VE(VariableEnvironment) / LE(LexicalEnvironment)

공통점

• 담기는 항목은 완벽하게 동일함
• environmentRecord(=record) ⬅️ 이 과정이 hoisting
  a. 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장됨
  b. 함수에 지정된 매개변수 식별자, 함수자체, var로 선언된 변수 식별자 등
• outerEnvironmentReference(=outer)

차이점

• VE : 스냅샷을 유지함
• LE : 스냅샷을 유지하지 않음 / 실시간으로 변경사항을 계속해서 반영함

💡Hoisting?

• JS의 인터프리터가 선언된 변수, 함수, 클래스의 선언부를 스코프(scope)에 따라 최상단으로 끌어올려지는 것처럼 보이는 것
• 변수정보 수집을 모두 마쳤더라도 아직 실행 컨텍스트가 관여할 코드는 실행 전의 상태
• 변수 정보 수집 과정을 이해하기 쉽게 설명한 '가상 개념'

✔️ 선언과 할당 모두 끌어올리지 않는다. 선언부만 끌어올리고 할당은 이루어 지지 않는다.

✔️ 호이스팅은 실제 메모리에 영향을 주지 않는다.

💡Hoisting은 언제 발생하는가?

• 'function' 키워드로 함수를 선언할 때
• 'var' 키워드로 변수를 선언할 때

✅ Hoisting 규칙

• 매개변수 및 변수는 선언부를 호이스팅 한다.
• 함수 선언은 전체를 호이스팅 한다.

var, let, const

• var : 선언과 동시에 초기화가 이루어진다. 선언과 동시에 undefined가 할당됨
• let, const : 선언만 될 뿐 초기화는 이루어지지 않는다.

함수 선언문

✔️ 함수 선언문은 호이스팅 된다.

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

함수 표현식

✔️ 함수 표현식은 호이스팅 되지 않는다.

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

• 변수를 선언하는 키워드 3가지 ➡️ var(변수), let(변수), const(상수)
  const로 선언한 변수(상수)는 호이스팅 되지 않는다.
  let로 선언한 변수는 호이스팅 되지 않는다.
  var로 선언한 변수는 선언은 되지만 할당은 되지 않는다.(undefined)
• 선언 / 할당 / 초기화

// 함수 선언문은 전체를 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;
};

📌 협업을 많이 하고 복잡한 코드일수록
전역 공간에서 이루어지는 코드 협업일수록 함수표현식 을 활용하는 습관을 들이자!