📌 호이스팅(Hoisting)

---

호이스팅(Hoisting)

"끌어올린다" 라는 뜻으로 변수나 함수 선언문이 스코프 내의 맨 위로 끌어올려지는 현상을 말한다.

1. 변수 호이스팅

자바스크립트는 촉화를 제외한 선언만을 호이스팅 한다. 변수를 먼저 사용한 후에 선언 및 초기화를 한다면 사용하는 시점의 변수는 초기화 상태이다.

1-1. 변수 선언 var

console.log(a); //	호이스팅한 var 선언으로 undefined가 출력
var a; 			// 변수 a 선언
a = 123;		// 초기화

만약 변수의 선언 없이 초기화만 진행한다면 ReferenceError가 발생한다.

console.log(a);	//ReferenceError
a = 123;		//초기화

1-2. 변수 선언 let, const

let과 const로 선언한 변수도 호이스팅의 대상이 되지만 var와 달리 호이스팅 시 undefined로 변수를 초기화하지 않으며 변수의 초기화를 수행하기 전에 읽는 코드가 먼저 나타나면 예외를 발생시킨다.

console.log(a);	  // undefined
console.log(b);	  // ReferenceError
var a = 150;	
let b = 180;	 //let으로 변수 선언 후 이를 수행해야 정상적으로 실행됨

2. 함수 호이스팅

함수 선언문의 경우도 변수 선언과 마찬가지로 호이스팅이 가능하다.

func();	  // Hello
function func() {
  console.log('Hello');
}

또한 함수 호이스팅에는 몇 가지 특징이 존재한다.

• 함수 호이스팅은 함수 표현식에서는 적용되지 않는다.

func(); //TypeError
var func = function() {
  console.log('Hi');
}

var로 변수 func을 선언해 호이스팅이 발생해 ReferenceError는 발생하지않지만 그 값은 undefined이기 때문에 TypeError가 발생한다.

• 변수와 함수 선언문 중 높은 우선순위는 함수 선언문이다.

func();	  // function hoisting
var func = function() {
  console.log('var hoisting');
}
function func() {
  console.log('function hoisting');
}

동일한 이름으로 변수, 함수 선언문이 존재하지만 함수 선언문으 호이스팅이 우선순위가 높기 때문에 결과는 function hoisting이다.

🔗 참고

호이스팅 - MDN
함수 호이스팅과 변수 호이스팅