[TIL #26] Hoisting 이란?

JavaScript를 주 언어로 사용하는 개발자라면.. 꼭 알아야 할 개념인, 또한 기술 면접에서도 자주 언급되는 Hoisting에 대해서 다뤄보자 🏃‍♂️

Hoisting 이란?

인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당 하는 것을 의미합니다.
var로 선언한 변수의 경우 Hoisting 시 undefined로 변수를 초기화합니다. 반면 let 과 const로 선언한 변수의 경우 Hositing 시 변수를 초기화하지 않습니다.
출처 MDN

JavaScript 엔진이 var로 선언한 변수나, 함수의 선언문을 유효범위의 최상단으로 끌어올리는 것을 의미하며 선언과 할당의 분리라고 간단하게 설명 할 수 있다.

var 변수 Hoisting

사람이 작성한 코드

if(ture){
  var name = "minkyoung";
}
console.log(name);

Hoisting이 적용된 코드

var name;	// 선언
if(ture){
  name = "minkyoung";	// 할당
}
console.log(name);

위의 설명에서 언급한 유효범위란 앞선 포스트에서 언급했던 Scope를 의미한다.
var의 경우에는 Function Scope이므로 유효 범위 또한 Function Scope를 의미하게 된다.

사람이 작성한 코드

function f1() {
  if(ture){
    var name = "minkyoung";
  }
  console.log(name);
}

function f2() {
  for(var i=0; i<3; i++){
    // do something
  }
  console.log(i);
}

if(ture){
  var num = 100;
}
console.log(num);

Hoisting이 적용된 코드

var num;	// 선언

function f1() {
  var name;	// 선언
  if(ture){
    name = "minkyoung";	// 할당
  }
  console.log(name);
}

function f2() {
  var i;	// 선언
  for(i=0; i<3; i++){	// 할당
    // do something
  }
  console.log(i);
}

if(ture){
  num = 100;	// 할당
}
console.log(num);

위에서 언급했듯이 var는 Function Scope를 가지기 때문에 변수 선언이 함수 내에서 최상단으로 끌어올려 진 것을 확인 할 수 있다.

---

함수 Hoisting

사람이 작성한 코드

sum(3,9);

function(a, b) {
  return (a+b);
}

Hoisting이 적용된 코드 (함수 선언식)

function(a, b) {
  return (a+b);
}

sum(3,9);

위와 같은 함수 선언식 방식으로 함수를 선언 했을 때에는 문제 없이 함수 선언이 위로 Hoisting 되는 것을 확인 할 수 있다. 하지만 함수 선언식이 아닌 함수 표현식 var sum = function(a,b){}으로 함수를 선언하게 된다면 에러가 발생하게 된다.

Hoisting이 적용된 코드 (함수 표현식)

var sum;	// 선언

sum(3,9);	// 호출

sum = function(a,b){	// 할당
  return a+b;
}

var sum은 결국 변수로 취급되므로 위에서 언급했던 선언과 할당의 분리가 발생하게 된다.
그로 인해서 var sum의 선언은 맨 위로 끌어올려졌지만 함수는 아래에 그대로 남아있기 때문에 함수를 호출 했을때 비어있고 그 이우에 함수가 정의되게 된다.

참고 자료
참고 자료