[JS] 호이스팅

📌 호이스팅

인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 말한다. 
선언문을 코드의 선두로 끌어올려진 것처럼 동작하는 것은 자바스크립트의 고유한 현상이다.

console.log(x) //print: undefined
var x = 1

 

다른 언어일 경우에 선언을 하기 전 print를 하게 되었다면 정의되지 않았다는 문구를 받게 될 것이다. 

하지만 자바스크립트는 에러가 나오지 않고 undefined를 출력하게 된다.  이것이 호이스팅이다. 

 

📌 자바스크립트 엔진 동작 과정(간략)

크게 소스코드의 평가(호이스팅)과 소스코드의 실행으로 나누어서 과정을 처리하게 된다. 

1. 소스코드의 평가
   이 과정에서는 실행 컨텍스트를 생성하고 변수, 함수 등 선언문만 먼저 실행하여 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프에 등록이 된다.
2. 소스코드의 실행
   런타임이다. 변수나 함수의 참조를 실행 컨텍스트가 관리하는 스코프에서 검색하여 취득하고 이를 소스코드의 실행 결과는 다시 실행 컨텍스트가 관리하는 스코프에 등록된다. 

위의 코드를 예를 들어 설명하면

var x = 1;

아래의 코드는 소스코드의 평가 과정에서 var x를 먼저 실행한다. 그래서 정의는 되지 않았지만 실행 컨텍스트가 관리하는 스코프에 등록이 되게 되면서 undefined으로 초기화 된다. 

var x; // undefined으로 초기화
console.log(x) //print: undefined
x = 1

 

이외에도 var, let function, class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅 된다. 이중 함수가 가장 먼저 실행이 된다. 

📌 호이스팅을 하는 이유

인터프리터 언어는 실행을 한줄에 하나씩 하기 때문에 그때 그때 마다 메모리를 확보하게 된다면 , 메모리 선점을 계속하는 것이 비효율적이다. 그렇기 때문에 선언문을 위로 끌어올림으로서 메모리 선점/생성을 하는 것이 실행 속도와 메모리 관리 측면에서 유리하다.

그래서 파이썬에서는 실행 흐름에 따라 평가되기 때문에 해당 코드 줄이 실행되기 전에 객체가 생성되지 않아, 함수 호출은 반드시 정의 이후에 가능하다. (NameError) 

---

var, funtion은 -> 함수 스코프

let과 const 는  -> Block 스코프

 

📌 let, const 호이스팅

let과const는 처음에 아래와 같이 호스팅된다. 

notInitializedYet(freshness) ->  값이 할당이 될 때 변경이 되게 된다.  (fresh)

 

함수 호이스팅

블럭 속에 있는 함수인 경우엔  globalThis.f = undefined; 로 호스팅 되게 된다. 

 

if, else와 같은 경우 실행이 될 수 도 있고 아닐 수도 있다. 그렇기 때문에 전역으로 올라가서 존재는 하나, undefined로 올라가게 된다. 

그래서 function 을 전체를 올리지 않는다.

 

아래와 같이 실행하는 경우, 코드 평가 단계에서 함수가 먼저 호이스팅되고, var가 호이스팅 되기 때문에 f는 더이상 함수가 아닌 var f가 된다. 
그래서 f(a)를 실행하게 되면 is not a function이라는 오류가 생기게 된다 !

function f(a){}

var f = 1

f(a)

📌 TDZ (Temporary Dead Zone)

 

let과 const도 호이스팅되지만, 초기화 전에 접근하면 ReferenceError가 발생한다. 
이를 TDZ라고 한다., 변수의 선언과 초기화 사이의 구간에서 해당 변수를 참고할 수 없다 !

let/ const 의 경우 hoisting 될 때 <NotInitializedYet>으로 정의된다. 이 상태에서는 acess불가능하다. -> Freshness 상태

선언부가 있던 원래 위치(라인)이 실행될 때  위의 상태(freshness) 가 해제된다.

 

TDZ의 영향을 받지 않는 구문

- var, function, import 문

👍 배운점

값을 덮어쓰게 됨으로써 오류 발생 가능성을 높이기 때문이다. 그래서 나온 게 let과 const 이다. TDZ는 선언 전에 변수를 사용하는 것을 허용하지 않는다.

그래서 내가 느꼈을 땐 최대한 변수의 초기화와 선언 부는 스코프 레벨에서 최상단에 놔야 오류 발생을 줄이고, 코드 가독성도 높일 수 있을 것 같다!  
var, function 과 같은 함수 스코프는 동일한 변수일 경우 먼저 후에 호이스팅 된 변수에 대해 씹히게 된다.
var는 쓰지말자 !