[JS 기본 개념] reduce() (배열의 합 구하기) <공사중>

기본개념

 

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

console.log(sumWithInitial);
// expected output: 10

이걸 쉽게 표현하면 

 

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4

const sumWithInitial = array1.reduce(
  (a, b) => a + b, 0
);

console.log(sumWithInitial);
// expected output: 10

이렇게 사용하면 된다. 

 

여기서 0은 초기값인데  이걸 설정해주지 않으면 

 

인덱스 1 부터시작하고  설정해주면  인덱스 0부터 시작한다. 

 

예를 들어 초기값을 설정해준다면 

 

array1 에서  1+2+3+4 이렇게 모두 계산한 합을 출력해주는데 

 

초기값을 설정 안 해주면 

 

2+3+4 의 합을 출력해준다. 

 

(주의 !  빈 배열에 초기값 없이 reduce()를 호출하면  typeError오류가 발생합니다. )

 

다시 말하자면

 

[1, 2, 3, 4, 5].reduce( (prev, curr) => prev + curr ) // 2+3+4+5

[1, 2, 3, 4, 5].reduce( (prev, curr) => prev + curr , 0 ) // 1+2+3+4+5

[1, 2, 3, 4, 5].reduce( (prev, curr) => prev + curr , 100 ) // 100+1+2+3+4+5

 

이렇게 이해하면 된다. 

 

 

작동 매커니즘 이해

 

초기값이 accumulator에 처음 할당이 되고  초기값을 설정했으니 인덱스 0부터 시작되니  10 + 0 부터 계산을 시작한다

그리고 두 번째 인덱스인 1을 더하면 10+1 이런식으로 진행이 된다. 

 

심화

    객체 배열에서의 값 합산 

       

const sum = [{x: 1}, {x:2}, {x:3}].reduce(
    (a, b) => a + b.x
    ,0
);

console.log(sum) // logs 6

       바로 위에 작동 매커니즘을 이해했다면 왜 a.x + b.x 가 아니고 a + b.x 인지 이해할 수 있다. 

 

 

   중첩 배열 펼치기

const flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  ( accumulator, currentValue ) => accumulator.concat(currentValue),
  []
);

// 펼친 결과: [0, 1, 2, 3, 4, 5]

---

concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다. 

 

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

---

    객체 내의 값 인스턴스 개수 세기

 

const names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

const countedNames = names.reduce(function (allNames, name) {
  if (name in allNames) {
    allNames[name]++;
  }
  else {
    allNames[name] = 1;
  }
  return allNames;
}, {});
// countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

이것도 작동 매커니즘만 알면 쉽다. 

 

초기값이 빈 객체인 {} 이다 

 

따라서 allNames 는 {}라는 값이 할당되고 계산이 시작된다.

 

처음 `Alice` 인스턴스 받으면 빈 객체이기에 else조건으로 넘어가서 

 

allNames[Alice] = 1이 된다. 

 

그 뒤로 전부  = 1이되는데 마지막에 `Alice`가 한 번 더 나와서 

 

if조건을 true로 통과해서 allNames[Alice] = 2가된다.

 

최종적으로 모든 배열을 돌고  return을 수행한다. 

 

---

arrow function

const counteName = names.reduce((allNames, name) => {
    if(name in allNames){
        allNames[name]++
    }else{allNames[name]=1
    } 
    return allNames;
},{} );
console.log(counteName)

---