JavaScript 호이스팅 (Hoisting), let 과 var를 통한 예제

호이스팅이란? ( Hoisting )

 

호이스팅을 변수 및 함수 선언이 물리적으로 작성한 코드의 상단으로 옮겨지는 것으로 가르치지만, 실제로는 그렇지 않습니다. 변수 및 함수 선언은 컴파일 단계에서 메모리에 저장되지만, 코드에서 입력한 위치와 정확히 일치한 곳에 있습니다. -출처 MDN

 

mdn에 의하면 호이스팅이란 위 내용과 같다.

간단하게 말하자면, 어디에 선언했는 지에 상관없이 선언을 제일 위로 끌어 올려주는 것처럼 실행된다는 의미로 해석할 수 있을 것 같다.

 

예제로 이해를 도와보자면, var 키워드를 사용할 수 있다.

 

  // var (don't ever use this!)  // let 추가 전까지는 var가 사용 되었음
  // var hoisting (move declaration from bottom to top)
  // has no block scope //

{
  console.log(age);   // undefined  //
  age = 4;
  console.log(age);
  var age;           // 값 선언 전에 사용 할 수 있음 // 
}

 

위의 코드를 보게 되면 선언되지 않은 age가 가장 먼저 콘솔에 출력될 수 있도록 코드가 작성되어있다.

그럴 경우 age에는 할당된 값이 없으므로 undefined가 출력된다.

 

여기서 var 키워드의 문제점 또한 확인할 수 있는데 만약 var가 아닌 let 키워드를 사용했다고 생각해보자.

 

{
  console.log(age);   // ERROR!
  age = 4;
  console.log(age);
  let age;           
}

 

let의 경우 에러가 발생하여 직관적으로 확인할 수 있다. 

var의 경우 이러한 문제로 인해 let키워드가 추가된 이후에는 사용을 지양하고 있다.