움짤로 보는 자바스크립트 동작 원리(2) - Hoisting

원문 (영어) : https://dev.to/lydiahallie/javascript-visualized-hoisting-478h
저자 : Lydia Hallie

👩🏻‍💻Thanks to Lydia for this amazing article about Javascript!

---

만약 당신이 자바스크립트가 익숙하지 않다면, 어떤 변수들이 랜덤하게 'undefined'로 되어서 ReferenceError가 던져지는 이상한 경험을 해본 적이 있을 것이다. 호이스팅은 '변수와 함수들을 파일의 맨 위쪽에 놓은 것'이라고 주로 설명되는데,
그렇게 보일 수 있지만 맞지 않다. 

자바스크립트 엔진이 스크립트를 받게 되면, 처음으로 하는 일은 바로 코드 안의 데이터를 위해 메모리를 세팅하는 일이다.
이 때 코드는 실행되지 않으며, 단순히 실행을 위한 준비를 하는 것이라고 보면 된다.
함수가 정의되는 방식과 변수들이 저장되는 방식은 다르다.
함수는 전체 함수에 대한 참조와 함께 저장된다.

변수들은 조금 다르다. ES6는 변수 선언에 대해 2가지 새로운 키워드를 소개했다 : let과 const이다.
let이나 const로 선언된 변수들은 초기화되지 않은 상태로 저장된다.

var로 선언된 변수들은 디폴트로 'undefined'로 저장된다.

자, 이제 생성단계가 끝이났고 우리는 실제로 코드를 실행해볼 수 있다.
만약 파일 맨 위에(함수나 변수를 선언하는 부분 전에) console.log 구문이 세 개 있으면 어떻게 되는지 보자.

함수들은 전체 함수 코드에 대한 참조와 함께 저장되었기 때문에 우리는 함수를 생성하기 전에 호출할 수 있다.

만약 우리가 var로 쓰여진 변수들을 변수 선언 전에 참조하면 'undefined'(디폴트 값)를 리턴받을 것이다!
하지만 이는 때때로 생각치 못한 동작을 발생시키기도 한다.
대부분 당신이 의도치않게 해당 변수를 참조했을 때 이러한 상황이 발생한다.
(당신은 아마 변수의 값이 undefined이길 바라지 않았을 것이다..!)

뜻하지 않게 undefined 변수를 참조하는 것을 막기 위해, 초기화되지 않은 변수들에 접근할때마다 ReferenceError이 발생한다.
변수들의 '실제적인 선언' 전의 "zone"은 "temporal dead zone"이라고 부른다.
따라서 우리는 선언하기 전의 변수들을 (ES6의 클래스도 포함됨) 참조할 수 없다.

엔진이 변수를 실질적으로 선언한 라인을 넘어가면, 메모리에 있는 값들이 우리가 실제로 선언한 값들로 덮어씌워진다.

6번이 아니라 7번 움짤이다..!!!!

---

Quick Recap : 

- 함수와 변수들은 우리가 코드를 실행하기 전에 실행 컨텍스트를 위해 메모리에 저장된다
= hoisting (호이스팅)
(실행 컨텍스트 : 자바스크립트 코드가 실행/연산되는 범위를 나타낸 추상적인 범위)

- 함수는 전체 함수들에 대한 참조와 함께 저장된다.
( var + 변수 => undefined / let, const + 변수 => uninitialized)