Typescript Array.from

Gn0lee·2022년 9월 25일
0

Tech 이모저모

목록 보기
6/18

회사 업무 중 새로운 배열을 리덕스에 저장해야하는 상황을 마주했다. 그래서 new Array()를 이용하여 리덕스에 저장하였다. 빈 배열을 저장는 것이라면 위 방법이 큰 문제는 없지만 초기값을 설정해 주는 것이 매우 귀찮았다.

예를들면 [1,2,3,4] 를 선언한다고 생각해보면 다음과 같이 코드를 작성할 수 있다.

new Array(4).fill(0).map((_,idx) => idx + 1)

하지만 위 코드는 문제가 있다. 코드를 작성한 나는 1,2,3,4를 만들기 위해 임시로 0을 채웠다고 알지만 다른 팀원이 보면 이해하기가 힘들다. 그리고 뭘 채웠다가 또 map 함수를 돌리고 단계가 너무 많다. python이라면 알아보기 쉽게 구현했을텐데 아쉬울 뿐이다. 그리고 위 결과물의 타입이 간단해서 문제가 없지만 배열내 원소의 타입이 복잡하면 코드가 상당히 길어진다. 마지막으로 Array에 Type을 Generic으로 부여해도 map 함수에서 쓸모가 없어진다.

그래서 나는 Array의 from method를 활용하기로 했다.

Array.from({length:4}, (_,idx) => idx + 1)

처음 코드보다 읽기도 수월하고 단계가 적어서 이해하기가 더 쉬운 것 같다. 그리고 map function이 인자 안에 있어서 파악하기가 수월하다고 생각한다. 하지만 내가 from 메소드를 선택한 이유는 타입지정이다. new Array()의 경우 타입 1개를 지정할 수 있다. 예를 들면 new Array<number>(4) 이런 방식으로 타입을 지정할 수 있다. 하지만 이 상태에서 fill 후 map을 호출하면 별다른 의미가 없다. 하지만 Array의 from 메소드는 약간 다르다.

Array의 from 메소드는 두가지 타입을 제너릭에 입력 가능하다. 예를 들면 Array.from<T,P>({length:4},mapFn)이런 방식으로 지정 가능하다. 첫번째 인자 T는 기전 new Array의 타입을 지정하는 것과 같다. 선언하는 배열의 원소 타입이다. 두번째 인자 P는 map Function의 결과물의 타입이다. 이것을 찾느라 거의 2시간을 삽질한 것 같다. 왜 타입스크립트 공식문서에는 이런 내용이 없는걸까..🥲 아니면 내가 못찾는 것일지도..? 물론 new Array 방식으로도 map function의 결과물의 타입을 지정할 수 는 있다. 하지만 나는 가독성면에서 from 메소드가 훨씬 낫다는 생각을 하였다.

Mdn에는 ECMA-262 표준 제6판에서 추가되어 어떤 표준 구현체에서는 사용할 수 없을지도 모른다고 한다. 하지만 여러 브라우저에서 모두 지원하는 것으로 보아 내 수준에서는 큰 문제가 있을 것 같지는 않다.

profile
정보보다는 경험을 공유하는 테크 블로그입니다.

0개의 댓글