🔥🕺🏼 시작적인 자바스크립트 : 호이스팅

(https://dev.to/lydiahallie/javascript-visualized-hoisting-478h) 을 번역한 글입니다.

호이스팅은 모든 JS 개발자가 짜증나는 에러를 구글링하고 결국 스택오버 플로우에서 들어본 용어 중 하나이다. 거기서 사람들은 '이 에러들은 호이스팅(hosisting) 때문이야'라고 들어봤을 것이다. 🙃 그래서 도대체 호이스팅이 뭘까? (참고로 - 스코프는 다른 포스트에서 다룬다, 난 포스트는 작고 집중적이게 하는 것을 좋아한다.)

너가 자바스크립가 처음이라면, 아마 "이상한" 동작들을 경험했을 것이다. 몇몇 변수들이 무작위적으로 undefined되고 ReferenceErrors를 뱉는 등의 경험말이다. 호이스팅은 파일 상단에 변수들과 함수들이 삽입된다고 설명되지만, 아니다. 그런일은 일어나지 않는다. 동작들이 마치 그렇게 보일 수 있어도 말이다. 😃

JS 엔진이 스크립트를 가져올 때, 가장 먼저, 우리의 코드에 있는 데이터를 위해 메모리를 세팅한다. 이 시점에서 실행되는 코드는 없다, 단순히 실행을 위해 모든 것을 준비할 뿐이다. 함수 선언과 변수가 저장되는 방식은 다르다. 함수들은 완벽하게 전체 함수를 참조하여 저장한다.

1|| 함수에는 전체 함수들에 대한 참조가 저장되어 있다.

변수에선 살짝 다르다. ES6는 두 가지 변수 선언 키워드인 let과 const를 소개했다. let과 const로 변수선언을 하면 초기화 되지 않은 상태로 저장한다.

2 || let과 const로 선언된 변수들은 uninitialized로 저장되어 있다.(ES6의 class들 포함함)

var 키워드로 변수선언을 하면, 기본적으로 값(value)이 undefined로 초기화되어 저장된다.

3 || var로 선언된 변수들은 undefined로 저장되어 있다.

지금 생성단계(creation phase)가 끝났다, 이제 실제로 코드를 실행할 수 있다. 우리가 파일 상단에 3개의 console.log문을 가지고 있으면 어떤 일이 일어나는지 보자. 변수나 함수들은 모두 선언되기 전이다.

함수가 전체 함수 코드의 참조를 저장하기 때문에, 함수를 생성하는 줄 이전에도 호출할 수 있다. 🔥

4 || execution phased동안에는, 함수들을 선언하기 전에, 호출할 수 있다. 왜냐하면 메모리 안에 전체 함수가 참조되어 있기 때문이다.

변수들이 선언되기 전에 var 키워드로 선언된 변수를 참조할 때, 단순하게도 저장된 undefined!인 기본값을 반한한다. 그렇지만, 때때로 "예기치못한" 동작이 나타날 수 있다. 대부분 경우 초기화되지 않은 변수를 참조한다는 의미이다. (아마 undefined의 값을 갖도록 원하지 않을 것이다.) 😬

5 || 선언되기 전에 var키워드로 선언된 변수들을 참조할 때, 값들은 기본 undefined로 될 것이다.

var 키워드 같은 undefined인 값을 우현히 참조할 수 있는 경우를 막기위해, 우리가 초기화되지 않는 변수들을 접근하려고 할 때 ReferenceError가 발생한다. 그 실제로 선언되기 전의 "지점(zone)"을 temporal dead zone라고 부른다. TDZ(temporal daed zone)는 변수들의 초기화전에 참조할 수 없게한다.

6 || 일단 우리가 변수들을 선언한 줄을 넘어가기만 하면, 메모리 안에서 변수들은 다시 써진다.

엔진이 실제로 변수들이 선언된 라인을 넘어가면, 메모리에서 변수들은 실제로 선언된 값들로 덮어씌워진다.

(웁스, 이제 7이 되려고 한다. 빨리 끝내야겠다.!!😬)

모두 끝났다 ! 🎉 다시 정리해보자.

• 함수들과 변수들은 실행 컨텍스를 위해 메모리에 저장된 다음에, 우리의 코드들은 실행된다. 이것을 호이스팅이라고 부른다.
• 함수들은 전체 함수가 참조되어 저장된다, var 키워드로 사용된 변수들은 undefined값들을 가지고, let과 const를 가진 변수들은 초기화되지않은(uninitialized)채로 저장된다.

호이스팅란 말이 조금 덜 막연하게 되었기를 바란다. 지금 우리는 우리 코드가 실행될 때 무엇이 일어나는지를 관찰했다. 항상 그렇듯이, 지금 이해가 되지 않더라도 걱장하지마라. 계속해서 익숙해질 것이다. 편한하게 물어봐라, 나는 돕는것을 사랑한다. 😃