Hoisting - 호이스팅

hoisting의 사전적 의미: 끌어 올리기

호이스팅은 현재 문맥의 식별된 정보를 수집하는 추상적인 개념이다.
자바스크립트에서 선언과 밀접한 관련을 가진다. 변수 선언과 함수 선언을 스코프 내의 최상위로 끌어 올린다.

예제

실제 코드

console.log(funcA());
console.log(funcB());
console.log(funcC());

function funcA() {
  return 'funcA';
}
var funcB = function b() {
  var c = 1;
  return 'funcB';
}
var funcC = function() {
  return 'funcC';
}

위 코드는 아래처럼 순서가 바뀌어 실행된다.
현재 위 코드를 그대로 실행시킨다면, 함수가 호출 되기전에 console이 출력서 함수가 정의되지 않았다는 오류가 발생한다.

호이스팅 진행 한 (가상의)코드

function funcA() {
  return 'funcA';
}
var funcB;
var funcC;

console.log(funcA());
console.log(funcB());
console.log(funcC());

funcB = function b() {
  var c = 1;
  return 'funcB';
}
funcC = function() {
  return 'funcC';
}

정리

• 호이스팅은 우선순위가 없고, 작성된 순서대로 호이스팅된다.
• 모든 변수 선언문은 스코프 내에서 최상위로 호이스팅된다.
• 함수 선언식은 함수 전체가 호이스팅 되고, 함수 표현식은 변수명(함수명)만 호이스팅된다.
• 변수 선언의 할당 부분과 변수선언은 분리되어 할당부분은 원래 위치에 남고 선언된 변수명만 호이스팅 된다.
  • 변수가 최상위로 끌어올려질 때 변수 선언문(즉, 변수명)만 초기화 되어 끌어올려지고, 변수에 할당된 변수의 값은 변수가 실제 선언된 위치 남아 있게 된다.
• 코드가 실행되기 전에 진행되는 전처리 작업 중 하나라고 볼 수 있다.

---

🔎 참고자료 🔎
- MDN
- 생활코딩
- PoiemaWeb
- javascript info
- 코어 자바스크립트
- 러닝 자바스크립트
- 인사이드 자바스크립트