호이스팅(Hoisting)

호이스팅이란?

코드에서 선언된 변수 및 함수를 끌어올려서 유효 범위의 최상단에 선언하는 것이다.

※ 실제로 코드가 끌어올려지는 것이 아니라 자바스크립트 parse가 미리 함수를 훑어서 정보를 기억하고 있는 것이다. 따라서, 메모리에서 변화는 없다.

따라서, 변수의 선언과 초기화 전에 변수를 참조하더라도 에러가 발생하지 않는다. 변수에 대한 선언을 기억하고 있어 메모리의 공간을 확보한 후, undefined로 초기화하기 때문이다. 이러한 현상을 호이스팅이라고 한다.

console.log(name); // undefined
var name = 'apple';
console.log(name); // 'apple'

호이스팅의 대상

선언만 끌어 올리고, 할당은 끌어올리지 않는다.

• var 변수

  • var은 변수 생성 시 선언과 동시에 초기화가 이루어져 호이스팅 현상 발생
  • let / const는 변수 생성 시 선언과 초기화로 분리되어 진행된다. 변수를 생성하고 선언까지 한 후 일시적 사각지대(TDZ)가 선언과 초기화 사이에 생기고, 할당문에서 변수 값이 할당 될 때 초기화 및 값 할당이 이루어진다.
  • let과 const는 호이스팅이 발생하지 않아, 선언보다 먼저 참조하면 에러가 발생한다.
    • 엄밀히 말하면 let 과 const는 block-scoped 단위로 호이스팅이 발생한다. 하지만, TDZ때문에 값을 할당하기 전에 변수가 선언되어 있어야 한다. let은 선언후 나중에 값 할당이 가능하지만, const는 선언과 동시에 값으 할당해야한다.

• 함수 선언문

  fruitName('apple');
  function fruitName(name) {
      console.log(name);
  };
  // 'apple'

  함수 선언문에서 선언부가 미리 끌어올려지기 때문에 fruitName에 대한 정보를 기억하고 있다. 따라서, 선언 전에 호출해도 에러가 발생하지 않는다.

  // 함수 표현식
  fruitName('apple'); // error
  var fruitName = function() {
      console.log(name);
  };
  // 함수 표현식이 var이면 TypeError
  // let/const이면 RefernceError

  하지만, 함수 표현식은 선언 전에 호출하려고 하면 에러가 발생한다. 호이스팅이 적용되지 않기 때문이다.

우선 순위

• 변수가 함수보다 더 위로 끌어올려진다.
• 값이 할당되지 않은 변수의 경우엔 함수로 덮여 씌워진다.

var fruitName;

function fruitName() {
    console.log("apple");
}

fruitName = "banana";

console.log(typeof fruitName) // String

var fruitName; // 할당 x

function fruitName() {
    console.log("apple");
}

console.log(typeof fruitName) // function

※ 주의 사항

• 코드의 가독성과 유지 보수를 위해 호이스팅이 일어나지 않도록 한다.
  • 함수와 변수를 코드 상단에 선언하면, 호이스팅으로 인한 스코프 꼬임 현상 방지
• let / const 사용

참고

• https://developer.mozilla.org/ko/docs/Glossary/Hoisting
• https://happycording.tistory.com/entry/let-const-%EB%9E%80-%EC%99%9C-%EC%8D%A8%EC%95%BC%EB%A7%8C-%ED%95%98%EB%8A%94%EA%B0%80-ES6
• https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html