JS의 list 함수 끝판왕 reduce와 친해지기 :)

분명 일상이는 나에게 타입 가드에 대해 설명해주고 있었는데

갑자기 Math.max 가 number[] 타입이어서 .. 자기가 설정한 타입의 list에 max를 쓰려니 타입이 안되구 어쩌구 저쩌구

그러더니 잠깐 , , max를 왜 써? 하고는

갑자기 분위기 리듀스!

 

const myMax = Math.max(...scores) as AnswerNumber;

max를 쓰면, 내 myMax number[] 가 아니라 AnswerNumber 타입이라는 것을 aliasing 해주어야 했다.

scores.reduce((acc, cur) => (acc < cur ? cur : acc), 0)

그러지 말고 리듀스로 바꿔버리기 .. 오 ..?

 

그리고 시작된 리듀스와 친해지기 시간 🥲

 

자 다음 문제를 풀어보시오 ~

1. 짝수 원소는 제거한다.

2. 모든 원소값을 2배한다.

[1, 2, 3, 4].filter(item => item % 2 === 1).map(item => item * 2);

문제의 요구사항대로 찬찬히 해보았지만 이렇게 풀면 두 번에 걸쳐 일하게 되죠

[1, 2, 3, 4].reduce((acc, cur) => {
  if (cur % 2 === 1) {
    acc.push(cur * 2);
  }
  return acc;
}, [] as number[]);

reduce의 초깃값을 [] 빈배열로 두고 ([]=acc)

현재 cur값이 홀수라면 acc에 cur값을 2배하여 push!

reduce 한번에 값이 2배가 된 홀수만 남겠네요

 

그리고 이때 TypeScript라면

초깃값에 []만 입력하면 []가 never타입이 되어버려 number값을 넣을 수 없다고 TS가 말할겁니당.

그렇기 때문에 [] as number[] 이라고 타입을 지정해 주어야 한다 ~

 

 

그럼, 이제 다음 문제 ~.

const myList = ['a', 'b', 'c', 'd']; 를 이용하여

{ a: 0, b: 1, c: 2, d: 3 }

myList의 값이 객체의 키가 되고, 인덱스가 객체의 값이 되게 만들어보쇼. 

const myList = ['a', 'b', 'c', 'd'];
const myObject = {};
myList.map((item, idx) => {
  myObject[item] = idx
}

이것도 간단하긴 한데 ?! 하지만 리듀스로 한번 해봅시당.

const myList = ['a', 'b', 'c', 'd'];
const myObject: Record<string, number> = {};
myList.reduce((acc, cur, idx) => {
  acc[cur] = idx;
  return acc;
}, myObject)

reduce에서도 idx를 쓸 수 있다는 사실 ... (지금 알았음)

 

그리고 역시 TS 환경이라면 빈 객체에 타입을 지정해주어야 하는데

reduce 외부에서 타입을 정한 myObject 변수를 초깃값으로 사용해줘도 된다.

하지만 혹시나 사이드 이펙트 발생 가능성이 있을 수 있으니 함수 내에서 사용하는 것을 추천한다고 하네요.

 

---

 

나는 보통 list를 핸들링 할 때 map을 가장 많이 쓰고 filter를 두 번째로 많이 쓰는 것 같은데

reduce는 사실 익숙하지 않아서, 어느 상황에서 써야 하는 지 몰라서,

문법은 공부했지만 평소 쓰질 않으니 막상쓰려면 잘 기억이 안 나는 지경에 이른다.

(reduce를 언제 씀? 리스트 원소 전부 sum할때 ..?)

ㅋㅋ

이번 기회로 reduce랑 .. 좀 더 친해지길 바라!