아이템 27 - 함수형 기법과 라이브러리로 타입 흐름 유지하기

 1. 타입 흐름 유지하기

타입 정보가 그대로 유지되면서 타입 흐름이 계속 전달되는 것은 개발자로 하여금 타입 체크에 대한 신경을 줄일 수 있게 도와준다. 직접 루프를 구현하는 것보다 내장된 함수형 기법과 로대시 같은 유틸리티 라이브러리를 사용하는 것이 타입 정보를 그대로 유지하는데 적합하다. 타입 정보가 그대로 유지되는 것엔 다음과 같은 장점을 가지고 있다.

1.  타입 흐름을 개선한다.
2.  가독성을 높인다.
3. 명시적인 타입 구문의 필요성을 줄인다.

몇 가지 예시를 통해 절차형 프로그래밍, 함수형 프로그래밍 그리고 로대시를 통해 구현하여 어떤 특징이 있는지 살펴보자.

2. CSV 데이터 파싱하기

다음과 같은 CSV 데이터가 있다. 이를 파싱해보자.

const csvData = `연도,제조사,모델,설명,가격
1997,Ford,E350,ac abs moon,3000.00
1999,Chevy,Venture Extended Edition,,4900.00
1999,Chevy,Venture Extended Edition,Very Large,5000.00
1996,Jeep,Grand Cherokee,MUST SELL! air moon roof loaded,4799.00`;

const rawRows = csvData.split('\n'); // 열을 기준으로 나누기
const headers = rawRows[0].split(','); // 헤더부분을 , 기준으로 나누기

2-1. 절차형 프로그래밍

const rows = rawRows.slice(1).map((rowStr) => {
  const row: Record<string, string> = {}; // row 객체에 대한 타입 선언이 필요하다.

  rowStr.split(',').forEach((value, j) => {
    row[headers[j]] = value;
  });

  return row;
});

위 코드에서 row객체는 타입 선언이 필요하다. 때문에 Recod<string, string> 와 같은 인덱스 시그니처 타입을 선언하였다.(없으면 타입 에러가 나요.)

2-2. 함수형 프로그래밍

const rows = rawRows
  .slice(1)
  .map((rowStr) =>
    rowStr
      .split(',')
      .reduce(
        (row: Record<string, string>, value, i) => ( // row 객체에 대한 타입 선언이 필요하다.
          (row[headers[i]] = value), row
        ),
        {}
      )
  );

위 코드에서도 row객체에 대한 타입 선언이 필요하다. 절차형 프로그래밍과 다른 점은 메서드의 사용이다. 절차형 프로그래밍에서는 forEach 메서드를 사용하여 각각의 순회를 통해 row객체를 만들어 반환을 했다. 함수형 프로그래밍에서는 reduce 메서드를 사용하여 row 객체를 만들어 반환을 했다. 즉, 직접 루프를 구현을 했느냐 안 했느냐의 차이이다.

2-3. 로대시의 zipObject 함수를 이용

const rows = rawRows
  .slice(1)
  .map((rowStr) => _.zipObject(headers, rowStr.split(',')));

코드가 매우 짧아진 것을 확인할 수 있다. 또한 별도의 타입 선언을 하지 않는 것을 볼 수 있다. 이는 zipObject 메서드가 반환하는 타입(Dictionary)이 이미 정해져 있기 때문이다.

다음은 로대시에서 제공하는 Dictionary 타입이다.

   interface Dictionary<T> {
        [index: string]: T;
    }

이러한 Dictionary 타입을 zipObject 메서드가 반환하기 때문에 별도의 타입 구문이 없어도 rows의 타입(_.Dictionary<string>[])을 정확히 사용할 수 있다.

3. 크루 명단을 단순 목록으로 만들기

다음과 같은 크루 명단이 있다.

interface woowacrew {
  name: string;
  team: string;
  salary: number;
}

const 데일리조: { [team: string]: woowacrew[] } = {
  공원: [{ name: '노아', team: '공원', salary: 10 }],
  준: [
    { name: '타미', team: '준', salary: 11 },
    { name: '제로', team: '준', salary: 9 },
    { name: '코난', team: '준', salary: 12 },
  ],
  왼손: [{ name: '쿠마', team: '왼손', salary: 8 }],
  크론: [{ name: '루루', team: '크론', salary: 7 }],
};

레벨 2 데일리조의 명단이다. 크루들은 name, team, salary 속성을 가지고 있다. 또한 코치에 따라 데일리조가 다르다. 즉, 데일리조 객체는 키가 코치이름이고 값이 크루들을 포함한 배열이다.

이와 같은 데일리조 객체를 단순 목록으로 만들어보자.

3-1. 루프를 사용한 방법

let 모든크루들: woowacrew[] = []; // 타입 구문 필요
for (const 데일리크루들 of Object.values(데일리조)) {
  모든크루들 = 모든크루들.concat(데일리크루들);
}

for... of 문을 사용한 방법이다. 반복을 통해 모든크루들 배열에 각 데일리조에 속한 크루들을 push 하고 있다. 이때 concat 메서드를 사용한다.

모든크루들 배열에 woowacrew[ ] 와 같이 타입 선언을 한 것을 볼 수 있다. 이와 같이 루프를 사용하게 된다면 타입 선언을 해야 타입 체크가 된다.

3-2. Array.prototype.flat 메서드를 사용한 방법

const 모든크루들 = Object.values(데일리조).flat();

flat 메서드는 다차원 배열을 평탄화해 준다. 타입 시그니처는 T[][] => T[] 같다. 이렇듯 자바스크립트의 내장 함수를 사용하게 되면 모든크루들 배열은 별다른 타입 선언 없이 다음과 같은 타입이 추론된다. 

const 모든크루들: woowacrew[]

4. 결론

1. 내장된 함수형 기법들, 로대시와 같은 라이브러리는 함수 호출 시 전달된 매개변수 값을 건드리지 않고 매번 새로운 값을 반환한다.
2. 로대시와 같은 라이브러리 혹은 내장된 함수형 기법을 사용하여 타입 정보가 잘 유지되는 점을 활용하자.
3. 내장된 함수형 기법을 잘 활용하자.
4. 로대시와 같은 라이브러리를 중간에 추가할 때 신중하자.