[JS] let, const: 호이스팅이 ‘발생되지 않는 것 처럼’ 동작?

일러두기

• 본 글은 ‘모던 자바스크립트 Deep Dive’ 15장 ‘let, const 키워드와 블록 레벨 스코프’를 참고하여 작성되었습니다.
• 글에 틀린 점이 있다면 댓글로 피드백 부탁드립니다 :)

let, const 키워드로 선언하면 정말 호이스팅이 발생하지 않을까?

• 호이스팅이란, ‘변수의 선언문이 스코프의 선두로 끌어올려진 것처럼 동작하는’ 현상이다.
  그리고 아래의 두 사례를 보고서 ‘아, var 키워드로는 호이스팅이 발생하고, let 키워드로는 호이스팅이 발생하지 않는구나!’라고 이해할 수도 있다. 위 코드는 동작하고, 아래 코드는 에러가 발생해 멈추기 때문이다. 하지만 엄밀히 말하자면 두 경우 모두에서 호이스팅은 발생한다. var의 경우에는 호이스팅이 발생해도 코드가 진행되고, let, const의 경우에는 호이스팅이 발생하면 작동하지 않도록 코드가 멈추기 때문에 ‘호이스팅이 발생하지 않는 것 처럼’ 보일 뿐인 것이다!

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

  console.log(score); //ReferenceError: Cannot access 'score' before initialization
  let score = 8;

• 이 예제를 보면 let, const에서의 호이스팅을 확인할 수 있다.

  let score = 1; // 전역 변수
  {
  	console.log(score); // ReferenceError: Cannot access 'score' before initialization
  	let score = 90; // 지역변수 
  }

  나는 처음 코드를 읽었을 때 ‘console.log(score)를 했으면, 전역변수에서 참조할 식별자인 score이 이미 있기 때문에 1이 출력되어야 하는 것이 아닌가?’ 라는 생각이 들었다. 여기서 ‘1이 출력되지 않았다‘는 것 자체가 let 키워드의 호이스팅을 증명한다. 하지만 코드는 에러가 나 멈추기 때문에 ‘호이스팅이 일어나지 않는 것 처럼’ 동작했다.
  

도식

뭔가 이해하고 나서 그림을 남겨두면 도움이 되는 것 같다. 내가 이해한 대로 그려본 var와 let, const의 차이가 담긴 도식을 하나 그려봤다.

코드가 실행되면 우리가 작성한 코드는 모든 선언들이 실행되는 ‘소스코드 평가’과정과 나머지 코드들이 실행되는 ‘런타임’ 과정의 두 단계를 걸쳐 실행된다. 파란색 화살표로 그 구간을 나누어 두었다.

각 구간별로 살펴보며 var와 const,let의 차이가 어디에서 발생하는지 알아보자

1. 소스코드 평가단계

   모든 ‘선언’들이 처리된다. 어떤 키워드로 선언했든, 모든 변수들은 ‘선언’된다.
   그리고 var와 let-const 키워드의 차이는 선언 이후에 발생한다.
   var 키워드는 선언과 동시에 undefined로 초기화 과정을 거치고,
   const, let 키워드는 선언이 끝이다.

2. 런타임

   이제 코드가 실행된다.

   • var의 경우엔 선언과 동시에 undefined로의 값 초기화가 이루어졌으므로 참조가 자유롭다.
     → 호이스팅이 코드에 영향을 미치는 일을 제지할 방법이 없다!!!
     
   • 하지만 const, let의 경우엔 평가과정에서 선언만을 진행했기 때문에 호이스팅은 일어났지만 선언된 변수에 값을 할당하는 문을 실행하기 이전에 값을 참조하려한다면 참조에러가 발생한다.
     → 코드는 멈춘다. 즉, 호이스팅이 코드에 영향을 미치는 일도 일어나지 않는다!!!!
     

요약

var와 let, const의 차이는 소스코드 평가과정시 값의 초기화 여부에서 발생한다~