호이스팅(Hoisting)의 개념

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.

호이스팅은 어떻게 동작하는가

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

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

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

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

호이스팅 대상

var 변수 선언과 함수선언문에서만 호이스팅이 일어난다.

var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.
let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.

예시

var 변수 , let/const 변수

console.log("Hello");
var a =  1 
let b =  2
const c = 3

<!-- JS Parser 내부의 호이스팅(Hoisting) 결과 -->
var a; [선언] 호이스팅o
consolo.log("Hello");
b = 2; [할당] 호이스팅x
c = 3; [할당] 호이스팅x

함수선언문 vs 함수표현식

son7();
spurs();

// 함수선언문
function son7() {
  console.log("Hello");
}

// 함수표현식
var spurs() = function() {
  console.log("Hello2");
}

/** --- JS Parser 내부의 호이스팅(Hoisting)의 결과 - 위와 동일 --- */
  var spurs; // [선언] 호이스팅x (변수만 호이스팅)

  function foo() { // [함수선언문] 호이스팅o
          console.log("hello");
  }

  son7();
  spurs(); // ERROR!! 

  spurs = function() { 
          console.log("hello2");
  }

* 함수선언문과 달리 함수표현식은 호이스팅이 불가능하다. 이때는 변수의 스코프 규칙을 따른다.

호이스팅 우선순위

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

호이스팅 사용 시 주의사항

코드의 가독성과 유지보수를 위해 호이스팅이 일어나지 않도록 한다.

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

그럼 var를 사용해야하나? 왜 호이스팅을 배워야할까?

ES6 최적화를 위해서는 아직 시간이 더 필요하기 때문에 ES5로 트랜스 컴파일을 해야한다.
따라서 아직은 var와 호이스팅의 동작원리를 이해하고 있어야한다.

Reference

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