[자바스크립트] 호이스팅이 뭘까 ,, (Hoisting!!!!!!!)

처음 자바스크립트를 공부하면서 많이 들어본 개념이고 
호이스팅 뭔지 어렴풋이 느낌적인 느낌으로는 알지만 말로 설명하라고 하면 못하겠다 (= 모르는 거)
작년에 면접 볼 때 호이스팅이 뭐냐는 질문에 그,, 그,, 변수 끌어올리는 겁니다!라고 대답한 흑역사가 있다..^^
이번 기회에 호이스팅에 대해서 제대로 알아보자,,,,,, 🧐

호이스팅,  그것이 알고 싶다.

먼저 호이스팅의 사전적 개념을 들고 와 보면 끌어올리는 것이 맞긴 맞다.. ^^ 근데 무엇을 끌어올리느냐?
자바스크립트에서 호이스팅은 선언된 변수 및 함수를 코드의 최상단으로 끌어올리는 것이다.
단, 선언된 변수 및 함수의 유효 범위 내에서! 최상단으로 끌어올리는 것임을 알아야 된다.
또한 선언된 변수에 할당된 값까지 모두 끌어올리는 것이 아니라 선언 부분만 분리되어 최상위로 올라간다.

코드를 통해 상세히 이해해보자

console.log(test);

var test = 'test';

위와 같은 간단한 코드가 있다

test라는 var 변수에 'test라는 값을 할당하였는데
이 var 변수는 선언 및 값이 할당되기 전에 이미 최상단에 console.log로 호출되고 있다.

호이스팅 된 결과를 살펴보면

// [hoisting] test 변수의 선언부가 호이스팅됨
// var test; 

console.log(test); // 결과 : undefiend, 호이스팅된 변수의 선언부를 출력

var test = 'test';

console.log(test); // 결과 : test, 할당된 값이 출력

위와 같이 변수의 선언부만 최상단으로 올라가서 첫 번째 출력에서는 undefiend가 출력된다 

그런데 var 변수가 아닌 let, const 변수를 사용하면 어떻게 될까?

console.log(test); 

let test = 'test';

실행결과 : Uncaught ReferenceError

let, const 변수는 호이스팅이 안 되는 것인가요? 정답은 Nooooo,,,,
이 질문에 대한 이해를 돕기 위해선 TDZ에 대한 이해가 필요하다

Temporal Dead Zone (TDZ)

var와 let/const 변수의 차이점 중 하나는 let/const는 TDZ에 의해 제약을 받는다는 점이다.
자바스크립트에서 변수는 선언 > 초기화 > 할당이라는 3단계를 거치는데 
var 변수는 선언과 초기화(undefined) 단계가 동시에 진행되는 반면
let, const는 선언과 초기화 단계가 분리되어 진행된다

그렇기 때문에 var, let, const 모두 선언부가 호이스팅 되어도
var 변수는 초기화가 진행되었기 때문에 undefined가 출력되고
let, const는 선언만 되고 초기화가 진행되지 않았기 때문에  (즉, 메모리에 할당이 되지 않았기 때문에)
참조 에러 (Reference Error)가 발생한 것이다.

TDZ는 초기화되자 않은 변수에 접근하려는 경우, 개발자에게 에러 피드백을 제공한다
그렇기 때문에 var 변수가 아닌 let, const 변수를 사용하는 것이 개발자 입장에서 예기치 못한 결과를 방지할 수 있다!

 

하나 더!

위에서는 변수의 호이스팅만 살펴봤는데, 함수의 호이스팅도 알아보자
함수는 함수 선언식과 함수 표현식이 있는데
위에 설명한 이유로 인해 함수 선언식 보다 함수 표현식을 사용하기를 권장한다.
코드로 살펴보자

함수 선언식

console.log(sum(1,2));

function sum(num1, num2){
    return num1 + num2
}

함수 선언식으로 실행할 경우 결괏값이 3이 나오는 것을 확인할 수 있다
함수가 정의되지 않았음에도 불구하고 호이스팅되어 sum 함수를 호출한 것이다

함수 표현식

console.log(sum(1,2));

var sum = function (num1, num2){
    return num1 + num2
}

반면 함수 표현식으로 정의된 sum() 함수를 호출하면 TypeError가 뜨는 것을 확인할 수 있다.
함수 표현식으로 function을 작성할 경우, 함수가 생성된 이후에 호출이 가능하므로
예기치 못한 에러를 방지하기 위해서는 함수 표현식 사용을 권장한다