호이스팅

호이스팅

호이스팅은 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 위치하도록 하는 것이다.

자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위 최상단에 선언한다.

• 자바스크립트의 파서(parser)가 함수 실행 전 해당 함수를 한 번 훑는다.
• 함수 안에 존재하는 변수/함수 선언에 대한 정보를 기억하고 있다가 실행시킨다.
• 유효 범위는 함수 블록({})이다.

즉, 함수 내부의 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다.

• 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 parser 내부적으로 끌어올려서 처리하는 것이다.
• 따라서, 실제 메모리에서는 변화가 없다.

호이스팅의 대상

var 변수 선언과 함수선언문에서만 호이스팅이 발생한다.

• var 변수/함수 선언만 위로 끌어올려지며, 할당은 끌어 올려지지 않는다.

호이스팅 우선순위

• 변수와 함수 선언 이름이 같을 경우 변수 선언이 함수 선언보다 위로 끌어올려진다.

  /** --- 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"

호이스팅 사용시 주의할 점

코드의 가독성과 유지보수를 위해 호이스팅이 일어나지 않도록 처음부터 코드를 잘 짜는 것이 좋다.

• 함수와 변수를 코드 상단부에 선언하면, 호이스팅으로 인한 스코프 꼬임 현상을 방지할 수 있다.
• let, const를 사용해준다.

---

💡 요약
호이스팅이란 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수의 유효범위 최상단에 위치하도록 하는 것이다.
호이스팅은 함수선언식일 경우와 변수 선언자로 var를 사용할 때만 발생한다.

호이스팅이 발생하면 스코프 꼬임 에러가 발생할 수 있기 때문에, 호이스팅이 발생하지 않도록 처음부터 코드를 잘 작성하는 것이 좋다.
따라서, 함수 상단부에 변수와 함수를 선언하고, 선언자로는 let과 const를 사용하는 것이 좋다.

---

함수 표현식의 경우에는 해당 함수를 선언한 변수명만 호이스팅이 되는 것이다. 함수 표현식 내에서 함수 호이스팅이 일어나지 않는다고 잘못 이해하고 있었음.

자바스크립트가 실행되면서 한번 스크립트를 쑥 훑게 된다. 훑어서 어떤 것들을 사용할 것인지 요약해서 위로 올리게 되는 것이다.