자바스크립트 핵심 개념 : 호이스팅

1. 호이스팅은 뭔가를 끌어올린다.

hoisting은 끌어올린다는 의미를 가지고 있다.

자바스크립트에서 호이스팅은 과연 무엇을 끌어올릴까?

바로 변수'선언'을 끌어올리고, 함수'선언'을 끌어올린다.

 

2. 그 이론을 눈으로 확인하고 외우자.

 console.log(a());
 console.log(b());
 console.log(c());
 
 function a() { // 함수선언문
  return 'a';
 }
  
 var b = function bb() { // 함수표현식
  return 'bb';
 }
 
 var c = function() { // 함수표현식
  return 'c';
 } 

호이스팅은 '선언'과 관련된 개념이라

자바스크립트 엔진은 이런 식으로 코드가 올라왔을때

족집게처럼 '선언'을 발견하면 딱 찝어서 위로 끌어올린다.

저 코드에서 선언된 부분을 찾아보는 연습을 해보자!

정답은 function a() { return 'a'}; => 선언(함수선언문)
var b, var c => 선언(함수표현식의 선언부분)

 function a() {
  return 'a';
 }
 var b;
 var c;
 
 console.log(a());
 console.log(b()); // 그러므로 에러
 console.log(c()); // 그러므로 에러
 
 b = function bb() {
  return 'bb';
 }
 
 c = function() {
  return 'c';
 } 

자바스크립트 입장에서는 첫번째 코드블럭을 이렇게 해석한다.

이 부분을 더 깊게 이야기해보면, function a() { return 'a'}은 

그 자체가 함수선언문이다.

var b = function과 var c = function은 

함수선언과 함수할당이 동시에 존재하는 형태로,

선언만 딱 분리해서 위로 올린셈이다.

 

3. 이 글의 핵심

자바스크립트에는 호이스팅이라는 법칙이 존재한다는 것을 이해하고

누군가가 호이스팅을 물어왔을 때 단순히 "선언을 끌어올리는 거야."가 아니라,

구체적으로 함수선언문과 함수표현식을 나눠서 선언부분만 떼어올리는 개념을

이해하고 설명해줄 수 있어야 한다.

 

- 정재남님의 자바스크립트 핵심 개념강의를 이해후 풀어쓴 것