[JavaScript-64] 배열 reduce 메소드

자, 이번 내용은 좀 어렵습니다. 

이 메소드 역시 파라미터 안에 함수를 값으로 갖는데, 함수 외에도 초기값을 파라미터로 갖습니다. 

 

파라미터 내부의 함수의 파라미터는 4개인데, 

작명은 뭐로 하든 상관이 없습니다. 국룰은 acc, item, i, arr인데, 마지막 arr는 호출하고 있는 배열을 받아오는거라 굳이 써줄 필요가 없죠.

item은 배열을 순회하며 받아오는 각 요소들, i는 인덱스로, 우리가 지금껏 살펴본 배열 메소드들과 역할이 동일합니다.

 

처음 보는 파라미터는 첫 번째 파라미터인 acc인데요!

이는 accumulator의 축약입니다(물론, 파라미터 이름은 acc말고 아무거나 지어도 됩니다)

accumulator는 말 그대로 누산기입니다. 

누적합을 구하고, 마지막 최종 값을 반환한다는 것인데요.

 

reduce메소드는, 배열의 각 요소를 순회하며, 

값을 더해서 최종 값을 반환하는 경우에 유용합니다.

예를 들어, 

객체를 요소로 갖는 배열이 있는데, 각 객체에는 차량 모델명과 보유한 대수를 담고 있다고 해보죠.

이떼, 각 객체의 대수 프로퍼티의 프로퍼티 값만을 모두 더하고 싶을 때! 이럴 때 바로 reduce메소드를 사용할 수 있습니다.

 

네, 이해합니다.

reduce메소드는 코드로 봐도 어려운 문법인데, 

줄글로 주욱 늘어 쓰니, 얼마나 어렵겠습니까!

차근차근 설명드릴테니, 우선 코드로 보시죠!

 

const cars = [
    {brand: 'benz', model: 'E220', num: 3},
    {brand: 'benz', model: 'S400', num: 5},
    {brand: 'audi', model: 'A6', num: 12},
    {brand: 'bmw', model: '320i', num: 7},
    {brand: 'audi', model: 'RS5', num: 5},
    {brand: 'benz', model: 'E350', num: 3},
    {brand: 'benz', model: 'A200', num: 2},
    {brand: 'bmw', model: '535i', num: 11}
    ]

const totalNum = cars.reduce(function(acc, item) {
    return acc + item.num;
    }, 0};

console.log(totalNum);

자, 이제부터는 확실히 우리가 다루는 코드의 수준이 많이 올라왔습니다.

주눅 들지 말고, 하나 하나 살펴봅시다. 

 

우선, cars라는 변수는 배열입니다. 

배열인데, 각 요소들이 객체인거죠. 또, 각 객체들은 세 개의 프로퍼티들을 갖고 있어요.

 

그러고 나서, totalNum이라는 변수를 만들었습니다.

저는 이 변수에 모든 자동차 댓수의 총 합을 담을 예정입니다.

그래서, cars라는 배열에 reduce메소드를 적용할겁니다!

 

reduce메소드는, 배열의 요소들을 더하는데 유용하다고 했죠?

마찬가지로 reduce함수도 파라미터 안에 함수를 써줘야 하고,

함수의 첫 파라미터는 누적합을 담아둘 acc파라미터, 두 번째는 순회하며 각 요소들을 받아올 item파라미터로 만들었습니다.

 

reduce메소드가 cars배열을 순회하며 받아오는 배열의 아이템들은 객체겠죠?

우리는 그 객체 중에서도, num프로퍼티의 값만 더하고 싶은거니까,

const totalNum = cars.reduce(function(acc, item) {
    return acc + item.num;
    }, 0};

console.log(totalNum);

이렇게 return부분엔 item을 더해주는게 아니라, item.num을 더해준거죠.

자, reduce메소드에서 return 뒷부분은, 누산기에 더해지는 값입니다.

또, 함수 전체 뒤의 0은 acc의 초기값입니다. 

 

즉, 누적합을 담는 acc는 처음엔 0이다가, 

배열의 첫 요소를 지나가고 나면, 그 요소의 num값을 더한 것이 return되는데

어디로 return된다? acc로 된다~

그럼 다음 acc는 초기값 0이 아니라, 0 + 첫 item의 num이다~

 

이해 가시죠?