[JS] 변수 선언 과정으로부터 호이스팅을 이해하자

일러두기

• 본 글은 모던 자바스크립트 Deep Dive 04장, ‘변수’ 절을 참고하여 작성되었습니다.

변수 선언과정

• 우리가 짠 코드는 크게 두 단계에 걸쳐 실행된다.

  1. 소스코드 평가 과정

  2. 소스코드 실행 과정 (런타임)

     이 중 첫번째인 ‘소스코드 평가 과정’ 단계에서 소스코드 내부의 모든 ‘선언’들이 실행된다. 변수 선언도 마찬가지로 이 때 발생한다.

• 예시

  console.log(score); //undefined
  var score;

  왜 실행 에러가 아니라 콘솔 창에 undefined가 출력되는 것일까? 바로 var score 라는 변수 선언문이 소스코드가 한 줄 한 줄 실행되는 런타임에 앞서 ‘소스코드 평가 과정’에서 먼저 선언되었기 때문이다.
  
• 변수 선언 과정 그리고 변수 선언은 다시 크게 두 가지 단계에 걸쳐 진행된다.

  1. 선언 단계 : 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다.

  2. 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다.

     var 선언의 경우 이 두가지 단계가 동시에 진행되기 때문에 var score라는 선언만해도 변수에 undefined가 할당되어 있는 것이다.

변수 호이스팅

• var

  console.log(score); //undefined
  
  score = 80;
  var score;
  
  console.log(score); //80

  1. 첫번째 console.log(score)

     소스코드 평가 과정에서 score 변수가 선언되고, var 로 선언했으므로 선언과 동시에 undefined가 할당되기 때문에 undefined출력

  2. 두번째 console.log(score)

     score = 80; 을 통해 변수에 값이 할당된다.