Javascript_Hoisting

Javascript Hoisting

Hoisting 이란?

Hositing은 자바스크립트로 이루어진 파일이 실행되기 전에 필요한 변수값들을 모두 유효 범위의 최상단에 선언하는 것을 말함. (함수 내부에서는 함수 내부 최상단에 선언)

Hoisting은 var변수와 함수선언문에서만 일어난다.
(함수표현식에서는 일어나지 않는다. 그래서 함수표현식을 권장한다고 함)

Hoisting 예시_ 함수선언문, 함수표현식

f1();
f2();


function f1() { // 함수선언문
        console.log("호이스팅됨");
}
var f2 = function() { // 함수표현식
        console.log("호이스팅안됨");
}

// <결과>
// 호이스팅됨
// f2가 함수가 아니라는 Error발생

다음과 같이 함수선언문에서는 호이스팅이 되기 때문에 정상적으로 "호이스팅됨"이 출력됨.
하지만 함수표현식은 호이스팅이 되지 않기 때문에 에러가 발생함.


let과 const에서는 좀 호이스팅이 일어나긴 하는데 조금 다른 결과를 가짐

let, const에서 Hoisting

f1();
function f1() {
   console.log(안녕);
   let 안녕 = 'Hello!';
} 

//<결과>
// Error..

함수는 함수선언문으로 작성되어있기 때문에 호이스팅되어 잘 실행됨. 하지만 함수 내부에 let 변수가 있기 때문에 Error가 발생함. let 변수는 호이스팅이 되긴하지만 undefined라는 값이 할당되지 않는다고 함. 이는 선언과 할당 사이에 시간차가 있기 때문.


근데 사실 var 변수는 쓸일이 거의 없으니 함수선언문과 함수표현식의 호이스팅 관계만 잘 알고있으면 될듯.