Home Javascript Hoisting(호이스팅)
Post
Cancel

Javascript Hoisting(호이스팅)

호이스팅에 관해 정리한 글입니다.

Hoisting 이란?

  • Hoisting의 의미 : 들어 올리기

변수나 함수를 해당 변수 및 함수 유효 범위의 최상단에 선언하는 것.
Javascript parsing 단계에서 재정렬 된다.

1
2
3
4
5
6
7
8
JavaScript에서 호이스팅(hoisting)이란, 인터프리터가
변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.

var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다.
반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.

- mdn -

물리적으로 코드가 이동하는 것이 아니다.

변수 호이스팅

  • 변수 호이스팅은 var로 선언한 변수에서만 일어난다.
1
2
console.log(a);
var a; // undefined
  • 함수 내부에서 변수가 선언되었을 경우, 선언만 함수의 최상위로 이동하고
    함수 외부에서 선언되었을 때는 전역 범위에서 최상위로 이동한다.

  • var로 선언한 변수는 호이스팅시 undefined로 변수를 초기화 한다.

1
2
3
4
5
6
7
function hello() {
    console.log(a); //undefined
    var a = 2;
    console.log(a); //2
}

hello();

let과 const로 선언한 변수도 호이스팅의 대상이지만, 호이스팅의 영향을 받지 않는다.

Temporal dead zone (TDZ)

함수 호이스팅

  • 함수 선언식의 경우에만 호이스팅이 일어난다. 함수 표현식은 호이스팅이 일어나지 않는다.

함수 선언식

1
2
3
4
5
hello(); // hello

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

함수 표현식

1
2
3
4
5
hello(); // hello is not a function(undefined)

var hello = function () {
    console.log("hello");
};

참고자료 (reference)

호이스팅
JavaScript - Hoisting(호이스팅)에 대해 알아보자
Javascript - Hoisting(호이스팅)이란?
#01. JavaScript의 Parsing - 01
[JavaScript] 호이스팅(Hoisting)이란


틀린점, 오타에 대한 것은 언제든지 알려주세요!

This post is licensed under CC BY 4.0 by the author.