[Javascript] TDZ와 Hosting에 대해서 알아보자

1. 개요

 회사에서 개발 중 이해하지 못하는 버그가 발생되었다. C++과 Java만 쓰던 나에게는 아직 JS의 문법이 어려운 것 같다. 오늘은 내가 마주친 버그와 이 버그를 이해(?)하기 위해 공부한 내용을 적어보고자한다.

2. 본론

2.1 C++에 익숙한 내가 마주친 버그

 

아래의 C++ 코드를 보자.

 

#include <iostream>

using namespace std;

int main() {
    int tmp = 0;
    cout << tmp << endl;
    
    if(tmp == 0){
        if(tmp == 1){
            cout << tmp << endl;
        }
        
        int tmp = 1;
        cout << tmp << endl;
    }

    return 0;
}

 

 tmp라는 변수가 if문의 블럭 밖에서 선언되고 또 그 안에서 한번 더 선언됐다. C++은 이런경우 더 가까운 변수를 참조하는 것으로 되어있다. 따라서 if문 안에 있는 if문은 if문 밖에서 정의된 tmp변수를 참조한다.

 

 그럼 이것과 비슷하게 작성된 JS 코드를 보자.

 

let tmp = 1;
console.log(tmp);

if(tmp === 1){
    if(tmp === 2){
        console.log(tmp);
    }
    
    let tmp = 2;
    console.log(tmp);
}

 

  두번째 if문에서 "ReferenceError"가 발생한다. 이 버그가 도저희 이해가 안 갔는데, 검색을 좀 해보면서 원인을 찾게 되었다.

2.2 호스팅

 JS에는 오스팅이라는 개념이 있다. 아래는 문서 링크이다.

---

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

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

---

변수의 유효범위 안에서 변수의 선언이 해당 범위의 가장 윗단에서 실행되는 것을 "값 호스팅"이라고 한다. 그러니 저 코드는 당연하게도 문제가 발생할 수 밖에 없다.

---

---

 if문 안에 tmp변수의 유효범위는 if문 블럭이다(빨간 네모로 표시된 부분). 그러니까 두번째 tmp 변수가 선언되는 시점은 if문이 시작되는 순간부터이다. 다시말해 if문 안에 if(tmp === 2) 구문에서 참조되는 tmp 변수는 첫 번째 tmp변수가 아니라 if문 안에 있는 tmp 변수라는 것이다.

 

 자 그럼 버그는 왜 나는 것인가? 만약 선언이 됐다면 undefined 값을 참조하게 되지 않을까?

 

ReferenceError가 발생한 이유는 TDZ 때문이다.

2.3 TDZ

 TDZ는 " Temporal Dead Zone"의 약자로, 변수 초기화 전 선언된 변수에 접근을 제한하는 영역을 의미한다. (일시적으로 죽어있는 공간인가...?)

 

 자 그럼 내 코드이 버그 원인을 정의할 수 있다.

---

1. 두번째 tmp 변수의 선언이 Hosting으로 인하여 if문 시작과 동시에 진행됨.

2. TDZ에서 해당 tmp변수가 초기화 되기 전에 접근을 시도했기에 Reference Error 발생

---

 이를 그림으로 표현하면 다음과 같다.

 (빨간 부분이 tmp의 사용 범위, 파란 부분이 TDZ이다.)

---

---

 TDZ에 들어가있는 tmp변수의 참조로 인해 이런 버그가 발생한 것... 개인적인 생각으로는 그냥 초기화 한 구문에서 선언을 처리하면 되지 않을까...? 한다.. 왜 Hosting이라는 기능이 있는지는 다시 찾아봐야겠다.

 

3. 결어

 간단한 JS의 개념을 몰라서 이런 버그가 발생했다고 생각한다. 그래도 버그 발생의 원인을 정확하게 알 수 있어서 좋았다. 추후에 공부한 내용도 블로그에 올려보고자 한다.