자바스크립트 호이스팅이란

자바스크립트에서 호이스팅(Hoisting)이 무엇인지 알아보기 전에 구글 번역기로 Hoisting의 뜻을 찾아보면 게양으로 나온다. 게양이란 높이 거는 일이다.

 

호이스팅에 대해 알아보니 딱 맞는 단어같다.

 

호이스팅은 자바스크립트가 실행될 때에 코드가 작성한 흐름대로 흘러가지 않고 변수 선언 부분이 위로 올라가는 것에대해 말한다. 모질라 웹 문서에 따르면 물리적으로 작성한 코드가 상단으로 옮겨지는 것은 아니라고 한다.

단지 컴파일 단계에서 변수 및 함수 선언이 메모리에 먼저 저장되기에 위치가 올라가는 것 처럼 보일 뿐이다.

 

예를 들면 아래 두 코드는 같은 결과를 보여준다.

function catName(name) {
  console.log("My cat's name is " + name);
}

catName("Tigger");
/*
위 코드의 결과는: "My cat's name is Tigger"
*/

catName("Tigger");

function catName(name) {
  console.log("My cat's name is " + name);
}
/*
위 코드의 결과는: "My cat's name is Tigger"
*/

 

2번째 코드를 보면 catName함수가 선언되기 전에 catName함수를 호출하는데 함수가 아직 선언되지 않았기 때문에 오류가 날 것 같지만 컴파일이 진행되면서 function catName(name) { ... } 이 먼저 선언되어 메모리에 저장된다. 그렇기에 순서는 상관이 없다.