[JS] 호이스팅(Hoisting)

변수 호이스팅이란?

var이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성이다.

변수의 생성은 아래와 같은 단계를 거쳐 이루어 진다.

선언(변수 객체에 등록) - 초기화(변수를 메모리에 할당, undefined로 초기화) - 할당(실제 값을 할당)

var로 선언했을 경우,

변수는 선언과 초기화가 먼저 한번에 일어나고, 할당은 선언문에 도달했을 때 일어난다.

때문에 할당 이전에 호출할 경우 undefined이다.

선언과 초기화는 미리 일어나기 때문에, 참조 에러는 발생하지 않는다.

console.log(a);    // undefined
var a = "hello";

let이나 const로 선언했을 경우,

var와 달리 선언과 초기화 단계가 분리돼 진행된다.

선언은 미리 이루어지지만 초기화는 변수 선언문에 도달했을 때 이루어진다.

때문에 초기화 이전에 호출하면 참조 에러 발생한다.

console.log(a);    // ReferenceError
let a = "hello";

함수 호이스팅이란?

함수는 선언과 초기화, 할당이 한번에 먼저 일어난다.

때문에 어디서든 호출 가능하다.

다만 함수 선언식이 아닌 변수에 함수를 담은 함수 표현식의 경우 변수 호이스팅이 발생한다.

그래서 함수 선언식만 쓰는 것이 헷갈리지 않아 좋으나,

문제는 함수 선언식으로 쓰인 함수가 많을 경우 너무 많은 코드를 VO(변수 객체)에 저장하게 돼 응답속도 저하된다.

A();    // hello
 
function A(){
    console.log("hello");
}