Hoisting (호이스팅)

Hoisting이란, var 선언문이나 function 선언문 등 모든 선언문이 해당 Scope의 처음으로 옮겨진 것 처럼 동작하는 특성을 말한다. 즉 자바스크립트는 모든 선언문이 선언되기 이전에 참조가 가능한 것이다.

 

- 변수 호이스팅 - 

console.log(num);    // undefined
var num = 123;
console.log(num)     // 123
{
	var num = 456;
}
console.log(num);    // 456

 

첫번째 라인에서 선언되지 않은 num을 출력하니까 에러가 뜰 것 같지만 콘솔에는 undefined가 출력된다. 그 이유는 모든 선언문은 hoisting 되기 때문이다.

var num = 123; 이 hoisting 되어 첫 줄 앞에 var num;이 옮겨진 것처럼 동작한다. 이때 num에는 undefined로 초기화가 일어나며(선언, 초기화 단계가 실행된다.) 실제 234 값이 할당되는 곳은 두번째 줄에서 실행이 된다.

 

javascrpit는 블록 레벨 스코프를 가지지 않고 함수 레벨 스코프만 갖는다. num은 전역 변수이므로 전역에 선언한 변수 num에 두번째 num에서 재할당 되기 때문에 456을 갖는다. 

 

var 키워드를 사용한 변수는 중복해서 선언이 가능하다.

 

 

- 함수 호이스팅 -

변수의 Hoisting이 변수 선언문 및 초기화였다면 함수는 함수 선언문 방식일때만 Hoisting이 된다. ( 함수 선언문을 제외한 방식들은 변수선언과 같이 함수 자체가 아직 선언이 되지 않은거라 오류가 발생한다. )

또한 let과 const변수 선언에서는 호이스팅이 발생하지 않는다.

 

함수 표현식(변수를 만들고 할당함)일 때에는 호이스팅이 일어나지 않는데, 함수 선언식일 때에는 호이스팅이 일어난다.

 

function [name]([param1[, param2[, ..., paramN]]]) {
   statements
}

^ 함수 표현식

console.log(notHoisted) // undefined
//  even though the variable name is hoisted, the definition isn't. so it's undefined.
notHoisted(); // TypeError: notHoisted is not a function

var notHoisted = function() {
   console.log('bar');
};

^ 함수 표현식은 호이스팅 X

function name([param[, param,[..., param]]]) {
   [statements]
}

^ 함수 선언식

var hoisted = "foo" in this;
console.log(`'foo' name ${hoisted ? "is" : "is not"} hoisted. typeof foo is ${typeof foo}`);
if (true) {
  function foo(){ return 1; }
}

// In Chrome:
// 'foo' name is hoisted. typeof foo is undefined
//
// In Firefox:
// 'foo' name is hoisted. typeof foo is undefined
//
// In Edge:
// 'foo' name is not hoisted. typeof foo is undefined
//
// In Safari:
// 'foo' name is hoisted. typeof foo is function

^ 함수 선언식은 호이스팅이 일어난다.

 

호이스팅은 코드의 가독성과 유지보수를 어렵게 만드므로 주의하도록 한다. let, const를 사용하거나 코드의 상단부에서 선언하면 호이스팅을 최대한 방지할 수 있다.

 

참고 - velog.io/@surim014/JavaScript%EC%97%90%EC%84%9C%EC%9D%98-Hoisting%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

JavaScript - Hoisting(호이스팅)에 대해 알아보자

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function

 

 

이름이 귀엽다 호이스팅