본문 바로가기

코드스테이츠 FE 45기

Section 4 기술 면접 준비

Section 4 기술 면접 준비

 

Hoisting과 Temporal Dead Zone

 

호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. 즉, 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 끌어올려서, 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있도록 하는 자바스크립트 고유의 특징이라고 할 수 있습니다. 이 호이스팅은 변수와 함수의 선언과 관련되어 나타납니다.

다만  let과 const 로 선언된 변수의 경우에는 Temporal Dead Zone, 즉 일시적 사각지대라는 현상이 나타납니다. 이 현상은 변수의 생성과정과 관련되어 있는데요. 변수는 3단계를 거쳐 생성됩니다. 각각 선언 - 초기화 - 할당 단계입니다. let과 const 와 달리 var는 선언과 동시에 undefined로 기본 초기화가 함께 나타나기 때문에 스코프 내에서 변수를 할당하는 단계가 나타나기 전에 호이스팅되면 undefined 로 호출됩니다. 반면에 let과 const는 선언 단계와 초기화 단계가 분리되어 있고, 초기화 단계는 변수 선언문 코드에 도달했을 떄 이루어지기 때문에, 변수를 초기화 하지 않은 상태에서 호이스팅되면 참조에러가 발생합니다. 따라서 스코프의 시작 지점부터 초기화 시작 지점까지는 변수를 참조할 수 없는데, 이런 현상을 temporal dead zone 이라고 합니다. 

함수 선언의 경우에 함수는 선언과 초기화, 할당 단계가 동시에 진행되기 떄문에 Temporal Dead Zone이 발생하지 않습니다. 다만 함수 선언식에만 호이스팅이 적용되고 표현식에는 적용되지 않는다는 점에 유의해야 합니다.

 

 

TypeScript의 장점과 단점 

타입스크립트의 가장 큰 장점은 에러를 사전에 방지할 수 있다는 점이고, 단점은 코드량이 증가하고 작업 시간이 더 오래 걸릴 수도 있다는 점입니다.

먼저 장점에 대해 설명하겠습니다.

동적 타입 언어인 자바스크립트는 코드에 존재하는 각종 변수나 함수의 반환값 또는 인수의 타입을 사전에 지정할 필요가 없습니다. 이 때문에 문법오류가 발생하거나 개발자의 의도와 다른 결과값이 도출될 수 있습니다. 반면 타입스크립트는 변수에 들어갈 값의 형태에 따라 타입을 지정해주어야 하기 때문에 타입과 관련된 오류를 방지할 수 있습니다.

또한 tsc라는 명령어로 컴파일을 진행하는데, 이 컴파일 단계에서 문법 에러를 잡을 수 있으므로, 사소한 실수들을 런타임 전에 모두 체크할 수 있습니다.

이외에도 타입스크립트를 사용하면 ES6와 ES NEXT를 더 편리하게 활용할 수 있다는 장점이 있습니다. 2015년에 발표된 ES NEXT에서는 수많은 신기능이 대거 추가되었고 자바스크립트가 영역을 넓힐 수 있는 디딤돌이 됐지만, 너무 많은 변화가 있었기 때문에 해당 기술을 브라우저가 지원하지 않아 호환성을 해결하기 위해 Babel 등의 트랜스파일러를 사용해야 했습니다. 타입스크립트는 ES Next 문법을 사용해도 tsconfig.js에 지정된 자바스크립트 버전으로 자동 변환해주기 때문에, 최신 자바스크립트의 편리한 기능들을 호환성 걱정없이 사용할 수 있습니다. 물론 일부 모듈에서는 여전히 Babel 등이 필요하지만 새로운 스펙의 유용한 기능을 안전하게 도입하기에는 무척 편리하고 유리한 언어라고 할 수 있습니다.

 

하지만 타입스크립트에는 단점도 존재합니다.

첫번째로, 개발의 규모가 커지면 커질수록 타입 설정에 더 많은 시간을 투여해야 합니다. 타입 추론을 활용해 자동으로 인식시킬 수 있지만 배열, 객체, 함수 같은 경우엔 사용자가 타입을 선언해서 미리 제한해야 합니다. 이 과정에서 자바스크립트로 개발할 떄보다 시간이 더욱 소요될 수 있습니다. 두번째로는 코드가 길어지면서 가독성이 떨어질 수 있습니다. 같은 코드를 입력하더라도, 모든 객체에 대해 타입을 지정하거나 추론하도록 하고, 또는 제네릭을 사용해 어떤 타입이 들어오더라도 동작할 수 있도록 선언해주어야 하기 때문에 어쩔 수 없이 길이가 길어지며, 그 선언되는 타입들에 대한 이름을 만들어주면서 목적성을 잃기도 합니다. 

마지막으로 타입스크립트는 자바스크립트에서 생기는 근본적인 오류를 해결할 수 없습니다. 타입 스크립트는 자바스크립트의 슈퍼셋 언어이지만, 원본은 자바스크립트이기 때문에 자바스크립트에서 발견하기 힘든 난해한 버그가 여전히 타입 스크립트에서 나타날 수 있습니다. 

 

'코드스테이츠 FE 45기' 카테고리의 다른 글

메인 프로젝트 회고  (0) 2023.09.20
Pre-Poject 회고  (0) 2023.08.23
Section 3 회고  (0) 2023.07.06
Section 3 기술 면접 준비  (0) 2023.07.06
Redux  (0) 2023.06.23