자바스크립트 호이스팅과 TDZ

😎 자바스크립트 호이스팅과 TDZ

 

✅ 호이스팅

호이스팅(Hoisting)
코드 실행 전 변수와 함수의 메모리 공간을 미리 할당하는 것.
코드에서 선언된 위치와 상관없이 변수 및 함수를 사용할 수 있다는 의미이다.
즉, 변수 및 함수 선언이 스코프의 최상단으로 끌어올려지는 것 같은 현상을 의미한다.

 

호이스팅 규칙

호이스팅은 크게 함수 호이스팅과 변수 호이스팅으로 나뉜다. 

1. 선언된 함수는 상단에서 참조, 호출 가능.
2. 선언된 var 는 상단에서 참조, 할당 가능.
3. 선언된 let, const 는 상단에서 참조, 할당 불가능.

 

[함수 선언문과 함수 표현식에서 호이스팅 방식의 차이]

function declaration(){ //함수 선언문
	console.log('함수 선언문')
}
declaration()


const expression = function(){ //함수 표현식
    console.log('함수 표현식')
}
expression()

 

 

  -함수 선언문 : 함수 전체를 호이스팅

  -함수 표현식 : 변수의 선언부 & 할당부를 나누어서 호이스팅 > 선언부 먼저 호이스팅

declaration() // '함수 선언문'
expression() // ReferenceError: Cannot access 'expression' before initialization

function declaration(){
	console.log('함수 선언문')
}

const expression = function(){
    console.log('함수 표현식')
}


// 위의 내용은 아래와 같다

function declaration(){ // 함수 선언문 : 전체 호이스팅
	console.log('함수 선언문')
}
const expression // 함수 표현식 : 변수만 선언

declaration() // 함수 선언문 실행 :'함수 선언문'
expression() // ReferenceError: Cannot access 'expression' before initialization

function(){ // 함수 표현식 : 할당부는 그대로
    console.log('함수 표현식')
}


// 정상 작동하려면
const expression = function(){
    console.log('함수 표현식')
}
declaration() // '함수 선언문'
expression() // '함수 표현식'
function declaration(){
	console.log('함수 선언문')
}

 

[let, const, var, function의 실행 원리]

*let, const, var

  -var는 함수 레벨 스코프 / let, const는 블록 레벨 스코프

  -var은 호이스팅 가능/ let, const는 호이스팅 에러 발생 (TDZ 존재)

  -var는 이미 선언된 이름과 같은 이름으로 변수를 중복 선언해도 에러가 나지 않지만

     let, const는 이미 존재하는 변수와 같은 이름의 변수를 중복 선언하면 에러 발생
  -var, let은 변수 선언시 초기 값을 주지 않아도 되지만 const는 반드시 초기값을 할당해야 함

  -var, let은 선언 후 값 변경(재할당) 가능 / const는 선언된 값 변경 불가능 (객체안의 프로퍼티 변경까지 제한은 아님)

 

*function

   *함수 호이스팅은 다른 무엇보다 가장 먼저 이루어지고, 함수 호이스팅은 선언문만 해당된다.

  -함수 작성 > 브라우저 엔진이 함수의 이름 (ex-function name(){})을 식별자로 저장 > 함수 객체 생성 후 참조

> 함수 실행 구문에서 name을 만나면 값을 가져옴 > 그 다음 구문이 () 이라면 실행

> 만약 스코프에서 식별자를 못 찾았다면, 참조 에러(ReferenceError) 출력

> 식별자는 찾았지만 실행할 수 없는 타입이라면 타입 에러(TypeError) 출력

not() // ReferenceError: not is not defined
let name = 'kim'
name() // TypeError: name is not a function

 

 

✅ TDZ

TDZ (Temporal Dead Zone) - 일시적 사각지대
스코프 시작 ~ 초기화 시작 사이의 구간을 의미한다.

 

즉, 변수가 선언되고 초기화 전까지의 구간이다.

TDZ는 선언 전 또는 초기화 전인 상태의 변수 사용을 허용하지 않기 때문에

TDZ 구간에 선언되지 않거나 초기화 전인 변수를 참조하게 되면 에러가 발생한다.

 

변수 생성 단계

1. 선언 단계 (Declaration phase)

변수를 실행 컨텍스트의 변수 객체에 등록하는 단계 (var는 여기서 2번 초기화 단계까지 동시에 진행)

let variable  /  var variable = undefined

 

2. 초기화 단계 (Initialization phase)

실행 컨텍스트에 등록한 변수의 메모리를 만드는 단계
메모리가 만들어지면 처음에는 undefined가 할당된다.

variable = undefined

 

3. 할당 단계 (Assignment phase)

사용자가 undefined로 할당된 변수에 다른 값을 할당하는 단계

variable = "value"

 

let, const 생성 단계

var 생성 단계

함수 선언문 생성 단계

 

• var는 선언과 초기화 단계가 동시에 진행된다.
  실행 시점 스코프 최상단에서 해당 변수에 대한 메모리가 있기 때문에
  선언부 위치에 상관 없이 참조, 할당이 가능하다.
• let, const는 선언, 초기화, 할당 단계가 각각 따로 진행된다.
  호이스팅 시, 선언만 이루어지고 실행 시점에서 실제 선언부를 만날 때까지 초기화가 되지 않는다.
  이 시점 차이만큼 해당 변수에 대한 메모리는 존재하지 않기 때문에
  선언부 상단에서 참조, 할당이 불가능하다.
• function (함수 선언문)은 선언, 초기화, 할당 단계가 동시에 진행된다.
  선언부 위치에 상관 없이 참조, 호출이 가능하다.

 

❗ 정리

• let, const, class 같은 경우는 TDZ에 영향을 받는다.
• var, function(선언문), import는 TDZ에 영향을 받지 않는다.
• 의도치 않은 동작을 방지하기 위해 var 대신 let 또는 const를 사용하자.

 

 

 

참고

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

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