javascript reduce 배열 메서드

배열 메서드 중 reduce가 있는데 이는 다른 메서드 보다 더 까다로워서 따로 작성을 하였다.

reduce 란?

map이 배열의 각 요소를 변형한다면 reduce는 배열 자체를 변형한다. reduce라는 이름은 이 메서드가 보통 배열을 값 하나로 줄이는 데 쓰이기 때문에 붙었다.

• MDN 으로 reduce 더 자세히 알아보기
• reduce를 시각적으로 확인해 보기
  
  

array.reduce( callback( accumulator, currentValue [, index [, array ] ])[, initialValue ] )

현재값 : currentValue (cur , val)
누적값 : acc
현재 인덱스 : inx
원본 배열 : src

• 대표적으로 아래 코드의 동작을 보다 편리하게 작성하기 위해서 reduce() 를 사용한다.

let arrayDemo = [1,2,3,4,5,12];
let sum = 0;

for(let i = 0; i < arrayDemo.length; i++){
      sum = sum + arrayDemo[i];
}
console.log(sum);

// 1 + 2 + 3 + 4 + 5 + 12
// 출력 : 27

예시 1

let array = [5,4,1,2,9];

function sum (acc, val){
  console.log(acc);

   return acc + val;
}

let answer = array.reduce(sum,0);

debugger로 확인해보기

예시 2 : reduce()로 배열안에 가장 큰 값을 찾아내기.

---

** for문으로 작성하기 **

let wordbox = 0;
let arr = ['world','a','app','dongsel'];

for(let i = 0; i < arr.length; i++){
  if(arr[i].length >= wordbox){
       wordbox = arr[i].length;
  }
}

// 결과 : 7 ('dongsel');

---

** reduce로 작성하기 **

let array = [5,4,9,2,1];

function findMax(acc,val){

 if(acc < val) {
    acc = val;
}
 return acc;
}

let biggest = array.reduce(findMax);
console.log(biggest);

코드에 대한 설명

if 문을 통해 acc 와 val 값을 비교합니다.
if 문 란은 배열의 0 자리인 5를 acc에.
if 문 란은 배열의 1 자리인 4를 val 자리에 가져와 acc 와 val을 비교합니다.
만약 acc 보다 val가 클 경우에 acc에 val 값을 넣습니다.
acc : 5 , val : 4 = acc : 5

두번째 경우는 배열의 2 자리인 9를 val에 가져와 acc : 5 와 비교합니다.
acc : 5 , val : 9 = acc : 9
이 경우 acc 보다 val 값이 더 크기 때문에 조건문에 따라 acc보다 큰 값이 val 을 acc에 넣습니다.

---

 

reduce의 또 다른 개념 설명

reduce() : 배열의 값을 줄여서 하나의 값으로 만들어주는 것. (숫자,문자,배열 등) 하나의 값으로 return 시킴.

const arr = [10, 20, 30, 40, 50];

arr.reduce(function(acc, cur, index, src(원본배열)) {
 
}

코드 설명 :
초기 값을 설정해주면 acc 는 0 부터 시작
초기 값을 설정 안해주면

 cons arr = [ ] 

[ ] 안에 있는 10의 값 부터 시작.
현재 값이란 각 원소

arr = [10,20,30,40,50]

을 순회 할 때 마다 만나는 원소의 값들을 말한다.
// 배열안에 있는 모든 원소의 값을 합쳐 하나의 값으로 만들기.

(acc : 누적값) (cur : 현재값)

arr.reduce(function(acc, cur, index, src(원본배열)) {
           
return acc + cur

}, 0)

위 코드에 대한 자세한 설명

index는 0번째
누적값(return) 0
현재값 10
return 값 10

---

index 1 번째
누적값(return) 10
현재값 20
return 30

---

index 2 번째
누적값 30
현재값 30
return 60

---

index 3번째
누적값 60
현재값 40
return 100

---

index 4번째
누적값 100
현재값 50
return 150

arr 배열 안에 있는 원소 x2 씩 변경하기.

출력값 : [20, 40, 60, 80, 100]

 

 

 

2개 객체 배열 비교하기

var result1 = [
    {id:1, name:'Sandra', type:'user', username:'sandra'},
    {id:2, name:'John', type:'admin', username:'johnny2'},
    {id:3, name:'Peter', type:'user', username:'pete'},
    {id:4, name:'Bobby', type:'user', username:'be_bob'}
];

var result2 = [
    {id:2, name:'John', email:'johnny@example.com'},
    {id:4, name:'Bobby', email:'bobby@example.com'}
];

var props = ['id', 'name'];

var result = result1.filter(function(o1){
    // filter out (!) items in result2
    return !result2.some(function(o2){
        return o1.id === o2.id;          // assumes unique id
    });
}).map(function(o){
    // use reduce to make objects with only the required properties
    // and map to apply this to the filtered array as a whole
    return props.reduce(function(newo, name){
        newo[name] = o[name];
        return newo;
    }, {});
});