Hoisting 호이스팅과 TDZ

Hoisting은 무엇일까?

호이스팅(Hoisting)
: JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미

• 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다.
• 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다.
• 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다.
• 유효 범위: 함수 블록 {} 안에서 유효
  즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다.
• 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다.
  실제 메모리에서는 변화가 없다.

 

TIP 호이스팅 사용 시 주의

코드의 가독성과 유지보수를 위해 호이스팅이 일어나지 않도록 한다.
호이스팅을 제대로 모르더라도 함수와 변수를 가급적 코드 상단부에서 선언하면, 호이스팅으로 인한 스코프 꼬임 현상은 방지할 수 있다.
let/const를 사용한다.
var를 쓰면 혼란스럽고 쓸모없는 코드가 생길 수 있다. 그럼 왜 var와 호이스팅을 이해해야 할까?
ES6를 어디에서든 쓸 수 있으려면 아직 시간이 더 필요하므로 ES5로 트랜스컴파일을 해야한다.
따라서 아직은 var가 어떻게 동작하는지 이해하고 있어야 한다.

 

 

 

호이스팅 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

[JavaScript] 호이스팅(Hoisting)이란 - Heee's Development Blog

 

 

TDZ는 무엇일까?

TDZ ( Temporal Dead Zone )는 해석하면 "일시적 사각지대" 이다.

 

TDZ에 영향을 미치는 const, let, class 를 사용할 때 항상 순서를 주의해서 사용해야 겠고, TDZ는 선언하기 전에 변수를 사용하는 것을 허용하지 않는 다

반대로 var 변수는 선언 전에도 사용할 수 있기 때문에 코드가 엉키거나 오류를 일으키는 원인이 될 수 있기 때문에 var 사용은 피하고 let과 const 사용하는 것이 좋다.

 

 

[ JS ] JS의 TDZ란 무엇일까?