[JavaScript] 호이스팅

호이스팅(hoisting)

• 변수를 선언 이전에 참조할 수 있는 현상
• var로 선언된 변수는 선언 이전에 참조할 수 있으며, 이러한 현상을 호이스팅이라 함
• 변수 선언 이전의 위치에서 접근 시 undefined를 반환
• JS에서 변수들은 실제 실행 시 코드의 최상단으로 끌어 올려지게 되며 이러한 이유 때문에 var로 선언된 변수는 선언 시 undefined로 값이 초기화됨
  

console.log(name); // undefined 
// => 선언 이전에 참조
var name = '홍길동'; // 선언

위 코드를 내부적으로는 아래와 같이 이해한다.

var name; // undefined로 초기화
console.log(name); 
        
var name = '홍길동';

반면, let, const는 호이스팅이 일어나면 에러가 발생

console.log(name); // undefined
var name = '홍길동';
        
console.log(email); // Uncaught ReferencedError
let email = 'gildong@gmail.com';
        
console.log(age); // Uncaught ReferencedError
const age = 50;
        

호이스팅 우선순위

같은 이름의 var 변수 선언과 함수 선언 중 어느 쪽이 먼저 선언될까?

• 변수 선언이 함수 선언보다 위로 끌어올려진다.

  var myName = "hi";

  function myName() {
      console.log("yuddomack");
  }
  function yourName() {
      console.log("everyone");
  }

  var yourName = "bye";

  console.log(typeof myName);
  console.log(typeof yourName);

  /** --- JS Parser 내부의 호이스팅(Hoisting)의 결과 --- */
  // 1. [Hoisting] 변수값 선언 
  var myName; 
  var yourName; 

  // 2. [Hoisting] 함수선언문
  function myName() {
      console.log("yuddomack");
  }
  function yourName() {
      console.log("everyone");
  }

  // 3. 변수값 할당
  myName = "hi";
  yourName = "bye";

  console.log(typeof myName); // > "string"
  console.log(typeof yourName); // > "string"

값이 할당되어 있지 않은 변수와 값이 할당되어 있는 변수에서의 호이스팅

  var myName = "Heee"; // 값 할당 
  var yourName; // 값 할당 X

  function myName() { // 같은 이름의 함수 선언
      console.log("myName Function");
  }
  function yourName() { // 같은 이름의 함수 선언
      console.log("yourName Function");
  }

  console.log(typeof myName); // > "string"
  console.log(typeof yourName); // > "function"

값이 할당되어 있지 않은 변수의 경우, 함수선언문이 변수를 덮어쓴다.
값이 할당되어 있는 변수의 경우, 변수가 함수선언문을 덮어쓴다.

TIP 호이스팅 사용 시 주의

• 코드의 가독성과 유지보수를 위해 호이스팅이 일어나지 않도록 한다.
  • 호이스팅을 제대로 모르더라도 함수와 변수를 가급적 코드 상단부에서 선언하면, 호이스팅으로 인한 스코프 꼬임 현상은 방지할 수 있다.
  • let/const를 사용한다.
• var를 쓰면 혼란스럽고 쓸모없는 코드가 생길 수 있다. 그럼 왜 var와 호이스팅을 이해해야 할까?
  • ES6를 어디에서든 쓸 수 있으려면 아직 시간이 더 필요하므로 ES5로 트랜스컴파일을 해야한다.
  • 따라서 아직은 var가 어떻게 동작하는지 이해하고 있어야 한다.

참고

https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html