[YDK_JavaScript] 01 타입_괜히 TS가 나온 게 아니구만

Chaejung·2022년 8월 25일

JavaScript 독서스터디

독서스터디_JavaScript

목록 보기

1/4

HTTP 독서 스터디도 하고 있지만...
프론트엔드 개발자에게 무엇보다 중요한 건 JavaScript!
그래서 하나 더 추가합니다!

두둥탁!

You don't know JS_타입과 문법, 스코프와 클로저

수많은 자바스크립트 책 중에서 이 책을 선택한 이유는 다음과 같습니다.

책이 얇다
(⭐️매우⭐️ 중요합니다.)
사실 모던 자바스크립트, 코어 자바스크립트로 JS의 근본을 다 잡으려 했지만, 저에겐 시간과 여유가 없습니다! 그 시간에 놀고 먹고 잘래요!
제목에 찔려서
📖: 너는 JS를 몰라!
😩: 네... 맞아요... 몰라요...

찔려서 홀린 듯이 교보 문고에서 데려왔습니다.

그리고 추후 다른 스터디원께서 여러 현업에 계신 분들께서 많이들 추천했다는 것을 알려주셨습니다.

공부 및 노트 방식

우선 가볍게 읽는다.

폴리필...? atob 선언문...?
모르는 용어가 나오면 일단 표시만 해두고 스리슬쩍 넘어간다.
더불어 중요하다고 생각한 부분도 표시를 해둔다.
이전에 표시해둔 부분을 중점적으로 한 번 더 읽고,
실습이 필요한 것은 직접 갖고 놀아본다.
중요하다고 생각한 부분을 기술블로그에 작성한다.
기술 면접에 나올 것 같은 것을 예상하여 문제로 만들어본다.

서론이 너무 길었죠!
1장 타입 시작합니다!

중요하다고 생각한 점

값이 없는 vs 선언되지 않은

30쪽 "undefined"(값이 없는)와 "undeclared"(선언되지 않은)를 동의어처럼 생각하기 쉬운데, 자바스크립트에서 둘은 완전히 다른 개념이다.

"undefined"는 접근 가능한 스코프에 변수가 선언되었으나 현재 아무런 값도 할당되지 않은 상태를 가리키는 반면 "undeclared"는 접근 가능한 스코프에 변수 자체가 선언조차 되지 않은 상태를 의미한다.

let a;
a; // undefined
b; // Uncaught ReferenceError: b is not defined
typeof a; // "undefined"
typeof b; // "undefined"

책에서 이야기하듯이 undefined와 undeclared는 구분되는 개념이지만,
typeof의 독특한 처리때문에 혼란이 생긴다!
아무튼 위의 예시에서
a의 경우는 undefined, 즉 선언은 되었지만 아무 값도 할당되지 않은 상태,
b의 경우는 undeclared, 선언조차 되지 않은 상태를 말한다!
~~(있어요?, 없어요, 아 있었는데?, 아니 그냥 없어요)~~

폴리필?

32쪽 존재하지 않는 기능을 추가하기 위해 '폴리필polypill'을 정의하려면 ~ 선언문에서 var 키워드를 빼는 편이 좋다. (중략)

변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의 스크립트를 "폴리필(polyfill)"이라 부릅니다. 폴리필(polyfill)은 말 그대로 구현이 누락된 새로운 기능을 메꿔주는(fill in) 역할을 합니다. 출처

전역 변수를 체크하는 방법

// token.js
let token = localStorage.getItem("accessToken")

typeof 활용

// index.js

// 잘못된 예시
if (token) {
  console.log("토큰이 존재합니다.")
}
// 안전한 예시
if (typeof token !== "undefined") {
  console.log("토큰이 존재합니다.")
}

window 객체 활용

// index.js
if (window.token) {
  console.log("토큰이 존재합니다.")
}

33쪽 하지만 window 객체를 통한 전역 변수 참조는 가급적 삼가는 것이 좋다. 전역 변수를 꼭 window 객체로만 호출하지 않는 다중 자바스크립트 환경(브라우저뿐만 아니라 서버에서 실행되는 node.js)이라면 더욱 그렇다.

의존성 주입 설계 패턴?

34쪽 '의존성 주입Dependency Injection' 설계 패턴을 선호하는 개발자들도 있다. FeatureXYZ가 doSomethingCool()의 바깥이나 언저리에 정의되었는지 암시적으로 조사하는 대신, 다음 코드처럼 명시적으로 의존 관계를 전달하는 것이다.
function doSomethingCool(FeatureXYZ) {
  let helper = FeatureXYZ || 
      function() { /*... FeatureXYZ의 기능 ...*/};
  let val = helper();
  // ...
}

의존성 주입이 뭐지? 싶어서 조금 공부해 봤다.
쉽게 말하자면 객체가 다른 객체를 참조하여(의존하여) 전달하는 디자인 패턴이라고 한다.
장점은 코드의 재사용성을 높여주고, 객체 간의 의존성을 줄일 수 있다.
단점은 의존성 주입을 위한 기반 작업이 필요하고, 코드 추적이 어렵다는 점.
뭔가 추상화랑 유사한 것 같은데, 혹시나 추후에 디자인 패턴을 공부하게 된다면 다시 한 번 더 짚고 넘어가고 싶다.

[위키백과] 의존성 주입
Dependency Injection 디자인 패턴
(Design Pattern) Dependency Injection 이란?

기술 면접 대비

문제: 타입스크립트의 등장 배경과 특징에 대해 설명하세요.

답

자바스크립트는 동적 타입의 언어로 런타임에서 오류를 발견합니다. 따라서 코드 작성 단계에서 타입이 불분명한 경우 오류를 확인할 수 없습니다. 더불어 자바스크립트는 타입 강제를 하지 않아 변숫값이 처음에 할당된 값과 동일하지 않은 타입으로 변경될 수 있는 것과 같이 다양한 방식으로 타입 강제변환이 일어나 예상치 못하는 버그를 발생시킬 수 있습니다.
이러한 문제를 해결하기 위해 정적 타입의 컴파일 언어인 타입스크립트가 등장하였습니다. 코드에 목적을 명시하고 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거합니다. 코드 작성 단계에서 타입을 미리 결정하기 때문에 실행 속도가 매우 빠르다는 장점도 있습니다. 하지만 코드 작성 시 매번 타입을 결정해야 하기 떄문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있습니다.

활용도가 높아지는 웹 프론트엔드 언어, 타입스크립트(TypeScript)