Array reduce 메소드는 JavaScript 배열 객체에 내장된 함수로, 배열의 각 항목을 순회하면서 단일 값을 얻는 데 사용되는 메소드입니다. 주로 배열 내의 요소들을 누적하거나 결합하여 특정 계산을 수행할 때 사용합니다.
array.reduce(callbackFunction[, initialValue]);
callbackFunction: 배열의 각 요소에 대해 실행할 함수
initialValue (선택적): accumulator의 초기 값으로 설정할 값입니다. 초기 값이 없으면 배열의 첫 번째 요소를 기본 값으로 사용합니다.
작동 원리:
reduce 메소드는 배열의 모든 요소에 대해 콜백 함수를 실행하고, 그 결과 값을 누적합니다. 마지막 요소까지 누적된 결과가 반환됩니다.
예시:
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 15
위 예제에서는 배열 내의 모든 숫자를 더하여 총합을 구하는 과정을 진행합니다. 초기 누적 값은 0으로 설정되어 있으며, 콜백 함수에서 누적 값을 반복적으로 업데이트합니다.
Array reduce 메소드는 배열의 합계, 최댓값, 최솟값, 평균값 등을 계산할 때 유용하며, 객체 또는 배열을 변환하거나 특정 조건에 맞는 요소들을 누적하는 데 사용할 수 있습니다. 이를 통해 사용자 정의 비즈니스 로직과 연산 작업에 유연하게 대응할 수 있습니다.
자바스크립트 배열에서 요소의 중복 개수를 확인하는 방법은 여러 가지가 있습니다. 다양한 방법을 예시로 들고 이 중 가장 효율적인 메서드를 추천하겠습니다.
const countDuplicates = (arr) => {
const counts = {};
arr.forEach((item) => {
counts[item] = (counts[item] || 0) + 1;
});
return counts;
};
const countDuplicates = (arr) => {
return arr.reduce((acc, cur) => {
acc[cur] = (acc[cur] || 0) + 1;
return acc;
}, {});
};
이 중에서 가장 효율적인 방법은 평균적으로 모든 요소에 대해 단 한 번의 순회만이 필요한 reduce()와 객체를 사용하는 방법입니다. 상황에 따라 forEach()와 객체를 사용하는 방법도 효율적일 수 있으나, 개인적으로는 함수형 프로그래밍 스타일을 지향하는 reduce()를 추천드립니다.
삼항 연산자를 사용하고 indexOf
메소드를 사용하여 배열의 중복을 제거하는 함수 예시는 다음과 같습니다:
const removeDuplicates = (arr) => {
return arr.reduce((acc, cur) => {
return acc.indexOf(cur) === -1 ? [...acc, cur] : acc;
}, []);
};
이 코드의 동작과 내부 구조를 상세하게 설명하겠습니다.
removeDuplicates
함수를 정의합니다. 이 함수는 매개변수로 배열 arr
을 입력받습니다.
arr
배열의 reduce 메소드를 호출합니다. 이 메소드는 두 개의 인자를 받습니다 - 리듀서 함수와 초깃값(빈 배열, []
).
리듀서 함수는 두 개의 매개변수를 받습니다: acc
는 누적값(accumulator value)이고, cur
은 현재 요소입니다. 리듀서 함수는 배열의 요소를 순회하며, 각 요소에 대해 실행됩니다.
return acc.indexOf(cur) === -1
에서 indexOf()
메서드를 사용하여 누적 배열 acc
에 현재 값 cur
이 포함되어 있는지 확인합니다. 만약 cur
값이 acc
배열에 없어서 반환한 인덱스가 -1이라면, 삼항 연산자는 true
가 됩니다.
삼항 연산자의 결과가 true
일 때, 현재 요소 cur
가 누적 배열 acc
에 중복되지 않은 새로운 값으로 간주되어, [...acc, cur]
를 반환하여 cur
값을 배열 acc
에 추가합니다.
반대로 삼항 연산자의 결과가 false
일 때, acc
배열이 그대로 반환되고 현재 요소 cur
는 추가되지 않습니다.
순회가 끝난 후, 중복이 제거된 배열이 최종 결과로 반환됩니다.
자바스크립트의 reduce 메소드에 대한 깊이 있는 설명 감사드립니다. 예시를 통해 더욱 이해하기 쉬웠습니다.