기본개념
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)
'Javascript > 개념' 카테고리의 다른 글
[JS - 개념] 정규표현식 (0) | 2022.06.11 |
---|---|
[JS-개념] padEnd() (0) | 2022.06.11 |
[JS 기본 개념] Sort() (0) | 2022.03.22 |
자바스크립트 기초 #2 (0) | 2021.01.02 |
자바스크립트 기초 #1 (0) | 2021.01.02 |