reduce()의 기본 형태와 사용법

Author: Gidon Ryu

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.

reference: MDN

기본적인 형태는 다음과 같습니다.

Array.reduce( callBackFunction( accumulator, cuurentValue, currentIndex, source ) )

보통 여러분이 reduce()를 처음 접할 때는 배열 내의 모든 숫자를 더해주는 역할로써 접하게 됩니다.

const arr = [1, 2, 3, 4, 5];

arr.reduce(function(a,c){
    return a+c;
})
// 결과값: 15

reduce()를 다양하게 사용하고 싶으면, 여기서 몇 가지를 염두에 두어야합니다.

arr.reduce(function(a,c){
    return a+c;
})

• 초기값이 설정이 되어있지 않기 때문에 a는 배열의 0번째 요소를 가져오게 됩니다.
• c는 1번째 요소부터 마지막 요소까지를 가져오게 됩니다.
• 이때 a를 바구니라고 생각하고 조건에 따라 c값이 a바구니 안에 들어간다고 생각하면 됩니다.
• 만약 a의 초기 값을 정해주고 싶은 경우에

  arr.reduce(function(a,c){
    return a+c;
  },0 or [] or '')
  

  이와 같이 숫자 문자열, 배열 등을 넣으면 됩니다.

reduce()가 재밌는게, 콜백함수에 따라 map, filter 등의 역할도 수행할 수 있는 메서드입니다.

map()은 내부 요소를 조건에 맞게 값을 변형해주는 메서드입니다.

let arr = [1,2,3,4,5];

arr.map(function(number){
    return number + 1;
})
//결과값: [2,3,4,5,6]

이를 reduce()를 이용하면

1. 일단 a의 초기값을 빈 배열로 만들어야 합니다.

   let arr = [1,2,3,4,5]
   arr.reduce(function(a,c){
   },[])//이 빈 배열이 초기값 a
   

2. 이제 빈 배열이라는 바구니 안에 c를 넣기 전에 변형을 합니다.

   arr.reduce(function(a,c){
    c = c + 1;
   },[])
   

3. a 속에다 집어넣고 콜백함수를 return합니다.

   arr.reduce(function(a,c){
    c = c + 1;
    a.push(c);
    return a;
   },[])
   //결과값: [2,3,4,5,6]
   

filter는 조건에 맞는 요소들만 남기는 메서드입니다.

let arr = ["monkey", "tiger", "giraffe"];

arr.filter(function(c){
    if (c.indexOf('i') === -1){
        return c;
    }
})
//결과값: ["monkey"]

이것도 마찬가지로 reduce를 통해서 구현할 수 있습니다.

방법은 똑같습니다.

1. 초기값을 배열로 만듭니다. ```js let arr = [“monkey”, “tiger”, “giraffe”];

arr.reduce(function(a,c){ },[]);

2. 콜백함수 안에 조건을 적습니다.
```js
arr.reduce(function(a,c){
    if (c.indexOf('i') === -1){}
},[])

1. 이제 배열 안에 조건에 맞는 c값을 넣고 a를 리턴합시다.

   arr.reduce(function(a,c){
    if (c.indexOf('i') === -1){
        a.push(c);
    }
    return a;
   },[])
   // 결과값: ["monkey"]
   

reduce, map, filter 모두 기존의 배열을 유지한 채 새로운 배열(또는 값)을 만드는 메서드입니다. 그렇기 때문에 새로운 값을 유지하기 위해서는 변수로 선언을 해주어야 합니다.