Hoisting(호이스팅)

in Dev / Javascript on JavaScript

Hoisting

함수 선언부가 유효 범위 안에서 최상단으로 끌어올려지는 현상을 말한다.

호이스팅(Hoisting)은 자바스크립트에서 변수와 함수 선언을 코드의 맨 위로 “끌어올린다”는 개념이다. 즉, 변수나 함수를 선언하기 전에 사용할 수 있다.

변수 호이스팅 예제

변수 호이스팅을 통해 선언 전에 변수를 사용해도 에러가 발생히자 않지만, 그 값은 **undefined**로 설정된다.

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

코드 실행 순서는 다음과 같이 변한다.

  1. var a; (선언이 맨 위로 끌어올려짐, 초기화는 아직 안 됨)
  2. console.log(a); (undefined 출력)
  3. a = 5; (값 할당)
  4. console.log(a); (5 출력)

함수 호이스팅 예제

함수 선언은 코드의 맨 위로 완전히 끌어올려진다. 즉, 함수 선언 전에도 함수를 호출할 수 있다.

  console.log(foo()); // "Hello!"
  function foo() {
    return "Hello!";
  }

코드 실행 순서는 다음과 같이 변한다.

  1. function foo() { return "Hello!"; } (함수 선언이 맨 위로 끌어올려짐)
  2. console.log(foo()); (“Hello!” 출력)

주의할 점

  • let과 const로 선언한 변수는 호이스팅 되지 않는다. (또는 더 정확히 말하면 호이스팅 되지만 초기화 단계가 없이 접근이 불가능하다.)
  • 함수 표현식은 호이스팅 되지 않는다.
* TOC {:toc}

© 2021. All rights reserved.