[js] 호이스팅

호이스팅?

변수 선언문, 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 것을 말한다.

함수 선언문은 자바스크립트 엔진이 스크립트가 로딩되는 시점에 바로 함수 선언, 초기화, 할당이 한번에 이루어진다. 그래서 선언의 위치와 상관없이 어느 곳에서도 호출이 가능하다.

함수 표현식일 경우의 호이스팅

호이스팅은 발생하지만 변수 호이스팅이 발생한다. 식별자 참조는 가능하지만 함수를 실행할 순 없다.

func1(); // TypeError
var func1 = function() {} // 호이스팅 되지만 undefined로 초기화
    
func2(); // ReferenceError
const func2 = function() {} // 호이스팅 되지만 TDZ 발생할 듯 (이건 내 생각)

동일한 이름의 함수 선언문과 변수 선언문 중에는 변수 선언문이 먼저다.

func();
var func = function(){ console.log('변수 호이스팅') }
function func() {
  console.log('함수 호이스팅');
}

//----------------------------------------------------------

func();
function func() {
  console.log('함수 호이스팅');
}
var func = function(){ console.log('변수 호이스팅') }

// 둘 다 결과는 '함수 호이스팅'

1. func 변수 호이스팅
2. func 함수 호이스팅
3. func 함수 실행 => '함수 호이스팅' 출력
4. var func = function(){ console.log('변수 호이스팅') } 할당

var func; // func 변수 호이스팅 => 변수 호이스팅이 먼저

function func() {}; // 함수 선언문 호이스팅
// 만약 변수에 할당할 값을 선언하지 않았다면 여기서 끝 => typeof func는 function

func = 'Hello'; // func에 string 할당 => 호이스팅 후 초기화

console.log(typeof func); // string