[Javascript] 호이스팅이란 무엇인가?

 

 

 

1. 호이스팅이란?

Javascript 엔진은 코드를 실행하기 전, 컴파일러가 실행되기 전 단계에서 변수와 함수를 위한 공간을 메모리에 확보한다. 이때 변수와 함수의 선언 부분이 끌어올려진(hoisted) 것처럼 보여지는 현상을 호이스팅이라고 한다. Javascript에서 변수를 선언하면, 해당 변수는 스코프 내에서 사용할 수 있게 된다. 하지만 선언과 할당은 다르기 때문에, 변수를 선언하고 초기화하지 않으면 undefined 값으로 할당된다. 호이스팅은 변수나 함수를 선언할 때만 발생하며, 할당은 호이스팅 되지 않는다.

 

2. 변수 호이스팅

변수가 선언되면, 해당 변수는 스코프의 최상단으로 끌어올려지게 된다. 이렇게 되면 변수를 선언하기 전에 해당 변수를 사용해도 에러가 발생하지 않는다. 또한, let과 const 키워드로 선언한 변수는 호이스팅이 발생하지 않는다. let과 const 키워드로 변수를 선언하면, 해당 변수는 스코프 내에서 선언되기 전까지는 존재하지 않기 때문에, let과 const 키워드로 선언한 변수를 선언하기 전에 사용하게 되면, 에러가 발생한다.

변수를 선언할 때 var 키워드를 사용하면 해당 변수의 선언 부분만 위로 끌어올려지는 것 같은 현상을 보인다. 아래의 코드를 보면 이미 메모리에 var a가 undefined 형태로 초기화되어 메모리에 추가되었기 때문에 console.log(a)가 참조에러를 발생시키지 않고 undefined라는 로그를 찍는다. 

console.log(a); // undefined
var a = 10;

그런데 let, const는 초기화 되지 않은 상태로 선언만 메모리에 저장된다. 초기화 되지 않으면 변수를 참조할 수 없기 때문에 참조에러를 일으킨다. 

console.log(b); // Error
let b = 20;

console.log(c); // Error
const c = 30;

 

3. 함수 호이스팅

함수 또한 호이스팅이 발생한다. 함수를 선언하면, 해당 함수는 스코프의 최상단으로 끌어올려지게 되는데, 이러한 동작 방식으로 인해, 함수를 선언하기 전에 함수를 호출할 수 있다. 그러나 함수선언문은 호이스팅 적용이 되지만, 함수 표현식으로 작성된 함수는 호이스팅 되지 않는다.

hello(); // "Hello!"

function hello() {
  console.log("Hello!");
}

sayHello(); // ReferenceError
const sayHello = () => {
  console.log("Hello!");
}

위 코드에서 hello 함수는 끌어올려져서 선언 전에 호출해도 함수안의 console.log가 잘 출력되지만 표현식으로 작성된 sayHello는 참조에러를 발생시킨다. 

 

4. 주의할 점

코드의 가독성과 유지보수를 위해서 호이스팅이 동작하는 방식을 알고 주의해서 코드를 짜야한다. 그렇기 때문에 변수선언시 var 키워드 사용을 지양하고 대신 let, const를 사용하는 것이 권고되고 있고, 함수를 작성할 경우에도 선언문보다는 표현식으로 작성하는 것이 좋다. 

무엇보다도 Javascript가 어떻게 해석되고 동작하는지 잘 이해하고 코드를 작성하는 것이 좋다!!