Array.reduce() 활용하기
Post

Array.reduce() 활용하기

27/10/2022 05/11/2022
Da-Bin Jeong
3

들어가기

  • 회사에서 프로젝트를 진행하면서 Array.map()을 주로 사용하고 있다.
  • 다른 개발자 분께서 Array.reduce()를 많이 쓴다고 하시는 걸 들었는데, 보통 누적 값의 합을 계산할 때 쓰는게 아닌가?
  • 라고 생각하다 다른 여러 활용 방안이 있다는 것을 알게 되었다!
  • 정리하자! +_+

먼저 Array.reduce() mdn에서 살펴보기

  • 구문은 이렇다고 한다.
1

    arr.reduce(callback[, initialValue])
  • 콜백 안에는 4개의 인자를 가질 수 있다.
    1. 누적 값 (acc)
    2. 현재 값 (cur)
    3. 현재 인덱스 (idx) //옵션
    4. 원본 배열 (src) //옵션
  • 보통 1,2번 값을 많이 쓰고 값을 누적해서 더할 때 사용하는 예는 아래와 같다.
1
2
3
4

    const arr = [1, 2, 3, 4, 5];
    const sum = arr.reduce((acc, cur) => acc + cur, 0)
    return sum;
    // result 15;
  • 이렇게 쓰면 초기 값을 0으로 썼기 때문에
  • 숫자 15로 Return된다~!
  • 이게 일단 기본이고!

Array.map()처럼 사용하는 방법

  • 초기 값에 []빈 배열을 넣는다
  • 매번 반복할 때 누적값.push를 통해 계산 후 결과 값을 추가한다.
  • 그럼 map처럼 이용할 수도 있고, filter처럼 이용할 수 있고,
  • array를 원하는 형태로 변경할 수 있다.
1
2
3
4
5
6
7
8

    const arr = [{name: '나', age: 20}, {name: '그대', age: 30}, {name: '우리', age: 25}];
    const result = arr.reduce((acc, cur) => {
        cur.name && acc.push(cur.name);
    }, []);
    return result;
    // result ['나', '그대', '우리'];
  • 이렇게 새로운 배열로 반환했다!

배열을 객체로 변환하기

  • 초기 값을 빈 객체로 두고 계속 해서 배열의 내용을 누적 시키는 방법이다.
1
2
3
4
5
6
7
8

    const arr = [{name: '나', age: 20}, {name: '그대', age: 30}, {name: '우리', age: 25}];
    const result = arr.reduce((acc, cur) => {
        const {name, age}= cur;
        return { ...acc, [name]: age + '살' }
    }, {})

    // result {나: '20살', 그대: '30살', 우리: '25살'}
  • 나, 그대, 우리를 object로 변환시켰다.

비동기 순차 실행하기

  • 기본값에 Promise.resolve()을 놓고 누적값.then(다음 프로미스 콜백함수로 실행)
    • 하는 경우 비동기를 순차적으로 실행하는 것을 보장할 수 있음

마치며

  • 프로그램의 구현 방법에는 여러 스타일이 있어서 Array.reduce 거의 사용하지 않고 개발을 했었는데,
  • 앞으로는 많이 애용하게 될 것 같다.
  • 이상~!

Reference

TIL, JavaScript