테크면접질문으로 자주 등장하는 호이스팅에 대해 알아보자.
호이스팅(Hoisting)
사전적 의미로 Hoist '끌어올리다' 라는 뜻을 가지고 있다.
예제1
function catName(name) {
console.log("제 고양이의 이름은 " + name + "입니다");
}
catName("호랑이");
/*
결과: "제 고양이의 이름은 호랑이입니다"
*/
예제1은 catName이라는 이름을 가진 함수를 먼저 선언하고 그 아래에 catName함수를 호출했다.
예제2
catName("클로이");
function catName(name) {
console.log("제 고양이의 이름은 " + name + "입니다");
}
/*
결과: "제 고양이의 이름은 클로이입니다"
*/
함수 호출이 함수 자체보다 앞서 존재하지만, 그럼에도 불구하고 이 코드는 undefined가 아니라 정상적으로 값을 출력한다. 여기서 호이스팅이 일어난 것이다. 예제1처럼 함수선언문이 최상단으로 끌어올려져서 선언문 --> 호출 순으로 정상적으로 출력되었다.
호이스팅의 대상
- var 변수 선언과 함수선언문에서만 호이스팅이 일어난다.
- 호이스팅은 선언부분만 호이스팅되고 할당은 호이스팅이 발생하지 않는다.
foo1();
foo2();
function foo1() { //함수 선언문
console.log("hello!");
};
var foo2 = function () { //변수에 함수를 할당한 함수표현식
console.log("welcome!");
};
//JS Parser 내부 hoisting을 마친 상태
var foo2; //변수는 선언부만 끌어올린다.
function foo1() { //함수 전체 호이스팅
console.log("hello!");
};
foo1();
foo2(); // error
foo2 = function () {
console.log("welcome!");
}; //변수의 할당부는 원래 자리에 남겨둔다.
이렇게 함수선언문과 함수표현식에서 서로 다르게 호이스팅이 된다.
Frontend Developer