JavaScript Visualized: 🔥🕺🏼 Hoisting

reference: https://dev.to/lydiahallie/javascript-visualized-hoisting-478h

호이스팅은 모든 JavaScript 개발자들이 짜증나는 오류를 발견하여 StackOverflow까지 구글링했을 때 듣게 되는 용어 중 하나입니다.🙃 그럼, 호이스팅이 뭔가요? (참고 - 스코프는 다른 포스트에서 다뤄질 것입니다. 전 포스트를 가능한 하나의 주제로 집중시키고 싶어요)

만약 여러분들이 JavaScript가 처음이라면, 어떤 변수들이 임의로 undefined, ReferenceError를 내는 등의 “이상한” 행동을 하는 걸 보셨을 거예요. 호이스팅은 종종 변수와 함수가 파일의 상단에 놓여지는 것으로써 설명됩니다만 그게 아니죠. 실제로 일어나는 일은 그게 아닙니다. 실제로 그렇게 되는 것 같이 보이더라도 말이예요. 😃

JavaScript 엔진이 script를 해석할 때, 가장 먼저 하는 것은 코드 내에 있는 데이터를 위한 메모리를 세팅하는 것입니다. 이 시점에서는 코드가 실행되지 않고, 실행을 위한 모든 준비만 하는 단계이고, 함수 선언과 변수를 저장하는 방법이 다릅니다. 함수는 함수 전체에 대한 참조를 저장합니다.

1 || 함수는 함수 전체에 대한 참조를 저장합니다.

변수는 약간 다릅니다. ES6는 새로운 2개의 키워드를 소개하는데요: let과 const입니다. let이나 const키워드로 선언된 변수는 uninitialized로 저장됩니다.

2 || let과 const 키워드로 선언된 변수는 uninitialized로 저장됩니다. (ES6 classes를 포함)

var키워드로 선언된 변수는 기본 값이 undefined로 저장됩니다.

3 || var 키워드로 저장된 변수는 기본값이 undefined입니다.

이제 생성 단계가 끝났습니다. 이제 실제로 코드를 실행할 수 있게 됐죠. 어떤 함수나 변수가 선언되기 전에 파일의 상단에 있는 3개의 console.log가 있다면 어떤 일이 벌어지는지 보도록 하겠습니다.

함수는 함수의 전체 코드에 대한 참조를 저장하기 때문에, 그것들이 생성되기 이전이더라도 우린 그걸 호출할 수 있습니다. 🔥

4 || 실행 단계에서, 메모리에 함수 전체에 대한 참조를 하기 때문에 우린 선언되지 않은 함수를 호출할 수 있습니다.

선언 전에 var키워드로 선언된 변수를 참조할 때, 다음과 같이 저장된 기본 값을 반환할 것입니다: undefined! 그러나, 이건 때때로 “unexpected”를 초래할 수 있습니다. 대부분의 경우 이것은 의도하지 않은 참조를 뜻합니다. (아마 실제로 undefined라는 값을 원하진 않을거예요) 😬

5 || var 키워드로 선언된 변수를 선언 전에 참조할 때, 그것의 기본값은 undefined가 됩니다.

var키워드일 때처럼, 실수로 undefined를 참조하는 상황을 막기 위해, uninitialized 변수에 접근하려 할 때는 ReferenceError가 발생합니다. 실제 선언 전의 “영역”을 일시적 사각지대라고 부릅니다: 그것의 초기화 전에 변수를 참조할 수 없는 거죠 (ES6의 class 또한 포함됩니다!)

6 || 변수의 선언 전에 unnitialized를 참조하려고 할 때 ReferenceError가 발생합니다.

실제 변수를 선언하는 라인이 엔진에 전달되면, 메모리 내의 값이 실제로 선언된 값으로 덮어씌워집니다.

(그림 내 숫자가 7이 되어야 하네요. 곧 업데이트 할께요 😬)

7 || 메모리의 값은 변수가 선언된 라인이 전달 되면 덮어씌워집니다.

---

다 끝났습니다! 🎉 정리해보죠:

• 함수와 변수는 실제 코드가 실행되기 전에 실행 컨텍스트를 위해 메모리에 저장됩니다. 이를 호이스팅이라고 합니다.
• 함수는 함수 전체에 대한 참조를 저장하고, var키워드의 변수는 undefined로, let과 const키워드로 된 변수는 uninitialized로 저장됩니다.

실제 코드가 실행 될 때 어떤 일이 일어나는지 봤기 때문에, 이제 호이스팅이라는 용어를 좀 더 이해하셨길 바랍니다. 언제나 그렇듯 완전히 느낌이 오지 않더라도 걱정마세요. 실제로 해볼수록 더 익숙해지실 겁니다. 궁금한 점 있으시면 언제든 연락주세요. 😃