02. 호이스팅(Hoisting)

📌 2-1 호이스팅(Hositing)이란?

사전적 의미로는 끌어올리다. 라는 뜻으로 변수가 아래에 선언이 되어있어도 최상단으로 끌어 올려진 것처럼 작동하는 것을 호이스팅(Hositing)이라고 한다.

💡 호이스팅의 종류로는 크게 변수 호이스팅과 함수 호이스팅이 있다.

📌 2-2 함수 호이스팅(Hositing)이란?

함수가 코드의 최상단으로 끌어 올려진 것 처럼 작동하는 현상

log(); // Log출력 (함수 호이스팅으로 인해 함수가 아래에서 선언되었지만 실행이 됨)
// 함수 선언문
function log() { 
    console.log('Log');
}

💡 함수 선언문으로 함수를 생성하면 런타임 이전에 함수안에 있는 함수객체들을 할당까지 완료한다.

📌 2-3 함수 호이스팅을 방지하기

💡 함수 호이스팅을 막는방법은 바로 함수 표현식을 사용하는 방법이 있다.
💡 변수에 함수를 할당하는 식으로 함수 호이스팅을 방지할 수 있다.

log(); // 오류출력
const log = function () {
    console.log('Log');
}
// ES6 문법으로 사용하면 이런식의 모양이다.
const log = () => {
    console.log('Log');
}

📌 2-4 함수 호이스팅의 const, let, var의 차이점

log(); // 오류출력
const log = () => {
    console.log('Log');
}

log(); // 변수 호이스팅 발생
var log = () => {
    console.log('Log');
}

💡 let, const를 사용할 때와 var를 사용할 때의 오류 메세지가 다르다.
💡 var를 사용하여 함수 표현식으로 함수를 생성한 경우에는 바로 변수 호이스팅이 발생한다.
💡 변수 호이스팅이 발생하여 undefined로 값이 초기화 되어 함수가 아니다라는 메세지가 출력된다.