5월 취업대비 - Hoisting과 TDZ

 

Hoisting

 

호이스팅이란 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상으로

선언이 코드 실행 보다 먼저 메모리에 저장되는 과정으로 인한 자바스크립트 고유 현상입니다.

 

자바스크립트의 변수 선언은 var로만 가능했으나,

ES6(ES2015)부터 let과 const가 추가 되었습니다.

 

이러한 자바스크립트 동작방식에 의해 사용자에게는 var로 선언한 변수, 함수 선언문은 호이스팅에 의해 가장 상단에 끌어올려지고 const나 let으로 선언한 변수 그리고 함수표현식은 호이스팅이 적용되지 않는것으로 보이지만

사실은 선언 코드가 끌어올려지는것이 아니라, 자바스크립트 Parser가 내부적으로 끌어올려서 처리하는 것입니다.

js의 모든 선언에는 호이스팅이 일어납니다.

var로 선언한 변수는 호이스팅시 undefined로 초기화 되지만, let과 const로 선언한 변수의 경우 호이스팅시에도 변수를 초기화하지 않기때문에 let과 const로 선언한 변수는 호이스팅이 적용되지 않는것 처럼 보입니다.

추가로 함수선언문과 달리 var로 선언한 함수표현식은 호출이후에 작성하면 TypeError가 발생하는데, 그 이유는 var로 선언한 변수가 undefined로 초기화되기 때문입니다.

 

변수 선언, 초기화, 할당 단계

변수 선언

• 변수 선언 단계에서는 값을 저장하기 위한 메모리 공간을 확보한다. 그리고 저장한 메모리를 식별하기 위한 변수 이름을 설정하는 것까지 변수 선언 단계에서 진행된다.

 

변수 초기화

• 변수 선언 단계를 거쳐 메모리 공간을 확보한 후에는 해당하는 메모리 공간에 undefined를 할당하여 초기화한다.

 

변수 할당

• 초기화 단계까지 마쳐 undefined가 할당된 변수에 원하는 값을 재할당한다.

 

var : 중복 선언 가능 ( 초기화 가능/ 이 경우 마지막에 할당된 값이 변수에 저장됨 => 기존 선언해둔 변수의 존재를 깜박하고 값을 재할당 하는 등의 실수가 발생할 수 있음 )

let, const : 중복 선언 불가능 

 

var , let : 재할당 가능한 변수

const : 재할당 불가능한 상수

 

 

3. Scope

스코프란 유효한 참조 범위를 말하는데

함수 내부에서 선언된 변수는 함수 내부에서만 참조가 가능하며 이 경우 변수의 스코프는 함수 내부로 한정됩니다.

 

자바스크립트는 var로 선언한 변수의 스코프와 let, const로 선언한 변수의 스코프가 다릅니다.

 

 

var : 함수 레벨 스코프(function-level scope)

var는 함수 내부에 선언된 변수만 지역변수로 한정하며, 나머지는 모두 전역변수로 취급합니다.

 

let, cost : 블록 레벨 스코프(block-level scope)

let, const는 함수 내부는 물론, if문이나 for문 등의 코드 블럭{ ... } 에서 선언된 변수도 지역변수로 취급합니다.

당연히 함수 내부에서 선언된 변수도 외부에서 참조할 수 없습니다.

 

정리

var는 함수 내부에 선언된 변수만 지역 변수로 인정하는 함수 레벨 스코프

let, const는 블록 내부에서 선언된 변수까지도 지역변수로 인정하는 블록 레벨 스코프

* 참고로 블록은 if문이나 for문 등에서 중괄호{ } 로 둘러싸인 코드 영역을 말합니다.

 

 

 

결국 var,let, const가 호이스팅이 다르게 일어나는 것처럼 보이는 이유는 let, const의 호이스팅 과정이 var와 다르게 진행되기 때문입니다.

let/const로 변수를 선언하는 경우 코드 실행 전에는 변수 선언만 해두며( 초기화가 이뤄지지 않음 => 선언 전에 참조를 하면 에러가 발생하게 됨 ), 초기화는 코드 실행 과정에서 변수 선언문을 만났을 때 수행합니다.

 

그래서 호이스팅이 발생하기는 하지만, 값을 참조할 수 없어서 호이스팅이 발생하지 않는 것처럼 보입니다.

변수의 선언과 초기화 사이에 일시적으로 변수 값을 참조할 수 없는 구간을 TDZ(Temporal Dead Zone)라고 합니다.

 

 

 

 

 

 

 

 

 

 

reference.

변수 생성 과정,호이스팅 정리.Moon Seongseok(21.08).23.05색.https://velog.io/@moon3356/%EB%B3%80%EC%88%98-%EC%83%9D%EC%84%B1-%EA%B3%BC%EC%A0%95-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85-%EC%A0%95%EB%A6%AChttps://d2.naver.com/helloworld/59361

[JS] 6.함수 스코프 & 블록 스코프 & 렉시컬 스코프.궁둥's Devlog.(2022.04).23.05검색.https://eun-ng.tistory.com/16

Javascript Hoisting.개발일지.(2022.10).https://puringles.tistory.com/145