[JavaScript] 호이스팅(Hoisting) 이란?

호이스팅(Hoisting) 이란?

Hoisting은 “끌어올리다” 라는 뜻을 가지고 있다. 그렇다면 도대체 무엇을 끌어올린다는 것 일까?

Hoisting은 모든 변수의 선언문을 유효범위 내에 최상위로 끌어올리는 역할을 한다.

유효범위는 변수의 위치에 따라 다른데, 전역 범위와 함수 범위 이 두가지로 나뉜다.

• 전역 범위: 함수 밖에서 선언한 것으로 해당 스크립트의 최상단으로 끌어올린다.
• 함수 범위: 함수 안에서 선언한 것으로 해당 함수안의 최상단으로 끌어올린다.

여기서 주의해야할 점은 "변수 선언문"만 끌여올려진다는 것이다. 변수에 값이 대입되는 구문은 Hoisting되지 않는다.

아래의 예시를 통해 자세히 알아보자.

console.log(name);

var name = "Jihyun";

console.log(name);

// Expected Output:
// "undefined"
// "Jihyun"

위의 첫번째 줄 코드에서 name을 로그했을 때 에러를 예측했을 것이다.

하지만 앞서 말했듯이 모든 변수의 선언문은 Hoisting 개념에 의해 최상위로 끌여올려진다.

따라서 [var name;]구문은 사실상 첫번째 줄 코드 보다 상위에 있다.

그리고 변수 name에 값이 대입되는 [name = “Jihyun”;]구문은 Hoisting되지 않고 코드를 작성한 순서대로 실행된다.

위의 코드는 아래의 코드 흐름과 대응한다.

var name;

console.log(name);

name = "Jihyun";

console.log(name);