최근 reduce()를 사용하는 일이 나오기 시작했는데 제대로 사용을 못하는 문제로 인하여 작성하게 된 글입니다.
javascript에서 reduce()는 반복 프로세스를 통해서 배열을 단일 값으로 축소하는 데 사용됩니다.
누적기와 함께 배열의 각 요소에 제공된 콜백 함수를 적용하고 단일 누적 결과를 반환해줍니다.
구문
array.reduce(callback, initialValue);- array: 축소 시키려는 배열입니다.
- callback: 배열의 각 요소에 대해 호출되는 함수로 4개의 인수를 사용합니다.
- accumulator: 이전 반복의 누적된 결과입니다.
- currentValue: 현재 처리 중인 요소입니다.
- currentInext: (선택사항) 처리 중인 요소의 현재 인덱스입니다.
- array: (선택사항) 호출된 배열입니다. reduce - initialValue: (선택사항) 누산기의 초기 값입니다. 제공되지 않으면 배열의 첫 번째 요소가 초기 누산기 값으로 사용되고 두 번째 요소부터 반복이 시작됩니다.
작동방식
1. initialValue 초기 값이 들어옵니다 ( 없으면 배열의 첫 번째 요소가 초기 값이 됩니다. )
2. initialValue 콜백 함수는 두 번째 요소( 또는 제공되지 않았을 경우 첫 번째 요소 )부터 시작해서 각 요소에 대해 호출됩니다.
3. 각 반복에서 콜백 함수는 현재 accumulator값, currentValue 처리중인 요소의 선택적으로 currentIndex및 array 자체를 받습니다.
4. accumulator콜백 함수는 다음 반복에서 새로운 값이 될 값을 반환해야 합니다.
5. reduce() 메서드는 계속해서 배열을 반복하면서 각 요소에 콜백 함수를 적용하고 그에 따라 누산기를 업데이트 합니다.
6. 모든 요소가 처리되면 최종 누산기 값이 작업 결과로 반환됩니다.
.js ( 더하기 )
const num = [1, 2, 3, 4, 5];
const sum = num.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
console.log(sum); // 15
.js ( 곱하기 )
const num = [1, 2, 3, 4, 5];
const product = num.reduce((acc, current) => {
return acc * current
}, 1);
console.log(product); // 120
.js ( 배열 합치기 )
const arr = [[1, 2], [3, 4], [5, 6]];
const newArr = arr.reduce((acc, current) => {
return acc.concat(current);
}, []);
console.log(newArr); // [1, 2, 3, 4, 5, 6]
.js ( 중복 횟수 )
const fruits = ["apple", "banana", "apple", "orange", "banana", "apple"];
const fruitCount = fruits.reduce((acc, current) => {
acc[current] = (acc[current] || 0) + 1;
return acc;
}, {});
console.log(fruitCount); // { apple: 3, banana: 2, orange: 1 }
.js ( 그룹화 )
const students = [
{ name: "Alice", grade: "A" },
{ name: "Jun", grade: "B" },
{ name: "shiro", grade: "A" }
];
const groupByGrade = students.reduce((acc, student) => {
const grade = student.grade;
acc[grade] = (acc[grade] || []).concat(student);
return acc;
}, {});
console.log(groupByGrade);
/*
{
A: [ { name: "Alice", grade: "A" }, { name: "Shiro", grade: "A" } ],
B: [ { name: "Jun", grade: "B" } ]
}
*/
.js ( 최대값 찾기 )
const num = [10, 5, 8, 20, 15];
const max = num.reduce((acc, current) => {
return Math.max(acc, current);
}, -Infinity);
console.log(max); // 20
.js ( 문자열 결합하기 )
위와 아래 차이는 첫번째 글자에 공백이 들어가냐 안들어가냐 차이입니다.
const words = ["Hello", "World", "!!!"];
const sentence = words.reduce((acc, current) => {
return acc + " " + current;
}, "");
console.log(sentence); // Hello World !!!
//----------//
const words = ["Hello", "World", "!!!"];
const sentence = words.reduce((acc, current) => {
return acc + " " + current;
});
console.log(sentence); // Hello World !!!
.js ( 초기 값을 사용한 데이터 변환 )
const data = [1, 2, 3, 4, 5];
const result = data.reduce((acc, current) => {
acc[current] = current * 2;
return acc;
}, {})
console.log(result); // { 1: 2, 2: 4, 3: 6, 4: 8, 5: 10 }
reduce() 메서드를 사용하면 위처럼 다양한 활용이 가능합니다.
그러나 한편으로는 배열 크기와 제공하는 콜백 함수의 복잡성에 따라 잘 생각하고 사용해야 합니다.
1. 배열 크기: 매우 큰 배열에 적용할 경우 reduce()메서드의 반복 특성으로 인해 성능 문제가 발생할 수 있으며, 콜백 함수의 계산 비용이 많이 드는 경우 더욱 그렇습니다.
2. 콜백 함수: 콜백 함수의 복잡성은 성능에 영향을 미칠 수 있습니다. 콜백 함수가 비용이 많이 드는 작업을 수행하거나 시간 복잡도가 높은 경우 코드 속도가 느려질 수 있습니다.
3. 가독성 및 유지 관리 용이성: reduce()메서드는 많은 작업을 위한 강력한 도구지만 코드 가독성과 유지 관리용이성을 우선시하는 것이 중요합니다. 정말 간단한 작업에 사용한다면 코드가 덜 명확해 질 수 있습니다.
'JavaScript | TypeScript > Javascript 시작하기' 카테고리의 다른 글
| [ Javascript ] URL 복사하기 [ Feat. execCommand() 오래된 내용 ] (0) | 2023.09.05 |
|---|---|
| [ Javascript ] 전자 서명 만들기 (0) | 2023.08.24 |
| [ Javascript ] 시간을 milliseconds로 변환하기 (0) | 2023.07.31 |
| [ Javascript ] 객체배열에 값만 포함하는 배열 만들기 (0) | 2023.07.25 |
| [ Javascript ] day.js 사용하기 (0) | 2023.06.16 |