모던 자바스크립트 Deep Dive 1주차 회고록

스터디 진행방식 

 스터디 인원들과 7월 22일 첫 만남을 가졌고, 인프런을 통해 처음으로 스터디를 구했는데 , 다들 열심히 하려고 하시고, 좋으신 분들 같아서 만난 당일에 기분이 상당히 좋았던 것으로 기억한다. 처음 만나서, 스터디원들과 ' 모던 자바스크립트 Deep Dive ' 책을 읽어오고, 만나서 책에서의 핵심 부분 과 질문을 뽑아서 그에 대하여 이야기 해보기로 했다. 그리고, 7월 29일 첫 스터디를 진행했고 , 다음 내용은 해당 스터디에 대한 회고록이자, 내가 몰랐던 내용들은 머리 속에 더 오래 남기기 위해 기록하는 것이다.

 

4장 '변수' 부터 7장 '연산자' 까지 읽어서 오기로 했고, 이 부분에 대해서 이야기했다. 나는 책을 읽으면서 , 자바스크립트가 변수 선언을 수행하는 단계 , 그 뿐만 아니라, 변수를 선언하면서 메모리가 어떠한 방식으로 바뀌는 지 부분에 대해서 매우 신기함을 느꼈다. 자바스크립트를 처음 접하시는 분 이라면 4장 '변수' 부분을 무조건 읽어보시길 바란다. 

 그렇다면, 4장 '변수'에서 스터디를 통해서 배운 부분에 대해 이야기해보려고 한다. 우선, 4장에서 내가 배워야 할 부분에 대해서 생각해보자면, 중요한 3가지는 "선언 단계와 초기화 단계" , "실행 컨텍스트" , "변수 호이스팅" 이라고 생각한다. 그 중 이 글에서는  '변수 호이스팅'에 대해서 설명해보도록 하려고 한다

 

변수 호이스팅 

 자바스크립트 엔진은 소스코드를 한줄로 순차적으로 실행하는 " 런타임 " 이전에 , 소스코드의 평가 과정을 거치면서, 변수 선언문 을 포함한 모든 선언문을 소스코드에서 먼저 찾아내 실행한다. 이 때에, 선언문들이 코드의 선두 , 즉 , 제일 먼저 실행되는 것처럼 동작하는데, 이를 자바스크립트의 호이스팅이라고 한다. 이를 코드의 예시를 통해서 , 보면 다음과 같다. 

console.log(test);
var test = ' 호이스팅 ' ;
// 이 실행의 결과는 
// undefined 가 된다.
// 호이스팅이 일어나지 않는다면, 변수가 선언되기 전이므로, 
// 참조 에러가 발생해야하는 것이 맞지만
// 호이스팅이 일어나면서, undefined 가 출력된다.

 이러한 호이스팅은 변수 뿐만 아니라, function , class 등의 키워드를 사용해서 선언하는 것들은 호이스팅 됨을 확인할 수 있다. 여기서 주의할 것은 함수 선언식은 호이스팅 되지만, 함수 표현식은 선언하는 것이 아니기 때문에, 호이스팅이 되지 않음을 기억할 필요가 있다.

그렇다면 , let 과 const는 변수의 호이스팅이 발생할까요 ? 특정 블로그에서 , let 과 const 는 호이스팅이 되지 않는다고 이야기 합니다. 위와 같이 테스트해보면, 참조에러가 발생하기 때문입니다. 그러나, 이는 맞지 않는 사실입니다. let 과 const 는 호이스팅이 발생하나, var 와 다르게, 초기화를 해주지 않기 때문에, 참조 에러 ( Reference Error ) 가 발생하는 것이지, 호이스팅이 발생하지 않는 것은 아닙니다. 여기서 이러한 것을 이해하기 위해서 , TDZ ( Temporal Dead Zone , 일시적 사각지대 ) 이 매우 중요하다고, 팀원들이 알려줘서 이에 대해서 알아보려고 한다.

  let 과 const 가 var 와 다르게, 변수 선언을 하는 과정에서 둘이 서로 다르기 때문이다. var 의 경우에는 선언 단계 와 초기화 단계를 거쳐서 변수가 선언 되지만, let 과 const 는 선언 단계를 지나고,  초기화 단계에 들어가기 전에 TDZ 에 들어가게 됩니다. 다시 말하자면, TDZ ( 일시적 사각지대 ) 는 스코프의 시작 지점부터 초기화 직전 까지의 변수를 참조할 수 없는 구간을 일컫습니다. 그러하여,  var 의 경우에는 위에서 처럼 코드를 입력하면 , undefined 가 출력 되지만, let 과 const 는 참조 에러가 발생하게 되는 이유 입니다. 

 

그렇다면 어떻게 해야 const 와 let 이 변수의 호이스팅이 발생하는 지 알아보려고 한다. let 의 블록 레벨 스코프를 활용하여 , let 의 변수의 호이스팅이 일어나는 지 확인해보려고 한다.

let text = ' 호이스팅 ' ; 
{
    console.log(text) ;  //  -- 1
     let text = ' 텍스트입니다';
}
실행 결과 : Uncaught ReferenceError: Cannot access 'text' before initialization

위와 같이 실행하면 , 1 번의 결과값이 무엇이라고 생각 되시나요? 만약에 , 변수의 호이스팅이 일어나지 않는다면 ,  1번의 실행 결과 값은 ' 호이스팅 ' 이 되어야 합니다. 하지만, { }  코드 블록 안에서 ,  let text 를 통해 변수의 호이스팅이 발생하고, TDZ ( 일시적 사각지대 ) 안에 들어가게 되면서, 위와 같은 참조에러가 발생하게 되는 것 입니다. 저희는 위의 실행 결과를 통해 let 과 const 가 TDZ 존에 들어감 과 동시에 변수의 호이스팅이 발생하는 것을 확인 해 볼 수 있습니다 . 

 

배정밀도 64비트 부동소수점 형식

 다음으로 , 내가 스터디를 진행하면서 느낄 수 있었던 것은 나는 별로 중요치 않다고 생각하고 넘어갔던 부분이 다른 사람들에게 있어서는 자바스크립트의 중요한 부분으로 느꼈던 것이다 .

그 부분은 바로 " 자바스크립트의 숫자 타입의 값은 배정밀도 64 비트 부동소수점 형식을 따른다는 것이다 " .  

 나처럼 자바스크립트를 제대로 알지 못하는 경우에는 이게 무슨 말인지 이해도 되지 않고, 그냥 그런가 보다 하고 넘길지도 모른다. 그러나, 해당 형식으로 인해 우리가 이해하지 못하고 지나갔던 부분이 설명되는 경우가 여러 있다. 유튜브나 특정 커뮤니티에서 자바스크립트를 설명하면서 밑의 예시가 본 경우가 존재 할 수 도 있다고 생각이 든다.

0.1 + 0.2 === 0.3 
// 실행결과 : false

  위와 같은 실행결과가 뜨는 이유가 바로 자바스크립트의 숫자 타입이 배정밀도 64비트 부동소수점 형식을 따르기 때문인 것이다. 이를 생각하고 , 정확한 숫자 계산을 위해서는 이부분에 대해 더 신경써야 할 필요가 있고, 이를 해결하기 위한 라이브러리를 사용해볼 필요도 있을 수도 있다. 

 

 이외에도 , ' 모던 자바스크립트 Deep Dive ' 를 보면 , 자바스크립트를 알아야 할 중요한 개념들이 여러 존재한다 . 많은 이들이 이 책을 보고 공부하면 많은 도움이 될 것이다.