호이스팅이란?

호이스팅이란?

호이스팅이란 자바스크립트에서 변수 및 함수선언문이 스코프 내의 최상단으로 끌어올려지는 현상을 말한다.

선언문만 끌어올려지며, 대입문은 끌어올려지지 않는다.

예 - 변수

console.log(a);
var a = 2;

컴파일러는 var a = 2; 코드를 2개의 구문으로 본다.

• var a
• a = 2

var a는 변수 선언문으로 컴파일할 때 처리하고, a = 2은 실행할 때까지 나눕니다.

var로 선언된 변수 a는 호이스팅되고, 콘솔에는 다음과 같은 결과가 출력됩니다.

undefined;

// 실제 동작
var a;
console.log(a); // undefined
a = 2;

• var은 선언,초기화가 동시에 이루어지기 때문에 undefined를 출력
• const,let은 선언만 호이스팅 되기 때문에 Reference Error를 출력

예 - 함수선언문

함수 선언은 변수 선언보다 우선적으로 스코프의 최상단으로 끌어올려진다.

func(); // '함수 호이스팅!'

function func() {
  console.log("함수 호이스팅!");
}

위의 코드는 다음과 같이 동작한다.

// 실제 동작
function func() {
  console.log("함수 호이스팅!");
}

func();

함수 표현식은 호이스팅이 일어나지 않는다.

예 - 변수, 함수 선언 우선순위

함수 선언은 변수보다 우선으로 호이스팅된다

var mymy = "변수 선언";

function mymy() {
  console.log("함수 선언");
}

console.log(typeof mymy); // function

호이스팅의 단점

1. 변수 중복 정의

var x = 10;
var x;
console.log(x); // 10

var x은 중복 선언이지만, 호이스팅으로 인해 무시가 되고 첫번째 선언문이 유지됩니다.

2. 할당 전 변수에 접근

x는 호이스팅이 일어나 선언 전에 호출을 하였지만, 오류가 발생하지 않는다.

console.log(x); // undefined
var x = 10;