[항해99] Day27. TIL – TDZ? / 또 다른 오류의 발견?

👩🏻‍💻 Today I Learned 📚

 

⭐ TDZ? 

TDZ(Temporal Dead Zone) 란, 한글로 직역하자면 일시적인 사각지대란 뜻.

→스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 TDZ(Temporal Dead Zone) 라고합니다.

 

⭐ 변수 생성 과정

• 선언 단계(Declaration phase) : 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계를 의미합니다. 이 변수 객체는 스코프가 참조하는 대상이 됩니다.
• 초기화 단계(Initialization phase) : 실행 컨텍스트에 존재 하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만드는 단계 입니다. 이 단계에서 할당된 메모리에는 undefined로 초기화 됩니다.
• 할당 단계(Assignment phase) : 사용자가 undefined로 초기화된 메모리의 다른 값을 할당하는 단계 입니다.
  
  

⭐ var vs let 라이프 사이클

• var

var 키워드 변수는 변수 선언전에 선언 단계와 초기화 단계를 동시에 진행
Javascript는 실행 컨텍스트 변수 객체의 변수를 등록하고 메모리를 undefined로 만들어 버림
그렇기 때문에 변수를 선언하기 전에 호출을 해도 undefined로 호출이 되는 호이스팅이 발생

• let

선언단계와 초기화 단계가 분리되어서 진행
그렇기 때문에 실행 컨텍스트에 변수를 등록했지만, 메모리가 할당이 되질 않아 접근할 수 없어 참조 에러(ReferenceError)가 발생하는 것 이고, 이것을 보고 우리가 호이스팅이 되질 않는다!! 라고 오해할 수 밖에 없었던 것

 

 

💜 TODAY

📌팀과제를 마무리 지으면서 처음 접해보는 단어들을 많이 만났다. var과 let 변수에 대해서는 알고 있었지만 이들의 라이프사이클이라던가 TDZ라는 건 정말 처음 들어보는 개념이였다. 단순히 var과 let과 const 의 차이점이 뭔가요? 라는 것에만 집중했었는데 그들이 어떻게 실제로 움직이는지에 대해서는 한번도 생각해본 적이 없었다! 이번 기회에 다시 한번 차이점에 대해서 알아보게 되었다.

 

📌이번 주의 개인 과제를 마무리 짓고 이미 제출까지 다 마친 이후에 같은 팀원분의 오류 해결을 도와주다가. 그분의 Redux코드를 살짝 보게 되었다. 자연스레 나의 코드와 비교를 하게 되었는데, 왜인지 나는 action 함수가 배로 선언되어있었다. ㅎ …. 리덕스를 사용하기 위해서 액션함수를 선언하고 나중에 파이어베이스 연결을 하면서 미들웨어 액션 크리에이터 함수를 쓰기 위해서 또 한번 액션 함수를 선언했었다. 덕분에 나의 리덕스 파일에는 액션함수 선언은 많고 그에 비해 reducer 수는 적고… 액션 함수를 함께 쓰면 되는건데, 나는 왜 반복적으로 한번 더 선언해주었던가?…
최적화를 위해서 그럴 필요가 없는데, 홀린 듯이 함수를 정리하기 시작했다.
그러고 다시 오류를 맞이했다. ㅎㅎㅎㅎㅎㅎㅎ 금방 해결되었지만 개인과제 마감날이였기에 손이 달달달…
이미 배포한 건 새로 수정하지 않았고, 깃헙만 업데이트해서 새로운 코드로 변경해두었다!