본문 바로가기

Front-end/Basic

호이스팅(Hoisting) 이란 ?

자바스크립트의 호이스팅(Hoisting)은 어떻게 이루어져 있는가

변수를 선언하고 초기화 했을 때 선언 부분이 최상단으로 끌어올려지는 현상


예를 들어, 코드 상단에서 console.log(a) 를 찍고 하단에서 var a=1; 이라고 했을 때
a는 undefined라고 나온다. 이런 현상을 호이스팅이라고 한다.
함수의 경우 함수표현식은 호이스팅이 적용되지 않으나 일반 함수선언문은 함수 호이스팅이 적용된다.

호이스팅(Hoisting)의 개념

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것

호이스팅이란

  • 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다.
    • 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다.
    • 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다.
    • 유효 범위: 함수 블록 {} 안에서 유효
  • 즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다.
    • 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다.
    • 실제 메모리에서는 변화가 없다.

호이스팅의 대상

  • var 변수 선언과 함수선언문에서만 호이스팅이 일어난다.
    • var 변수/함수의 선언만 위로 끌어올려지며, 할당은 끌어 올려지지 않는다.
    • let/const 변수 선언과 함수표현식에서는 호이스팅이 발행하지 않는다.

https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html

[JavaScript] 호이스팅(Hoisting)이란 - Heee's Development Blog

Step by step goes a long way.

gmlwjd9405.github.io

https://sunnykim91.tistory.com/m/121