Array reduce foreach 배열 요소 중복 개수 확인 / 중복 제거

agnusdei·2023년 7월 22일
0

Array reduce 메소드는 JavaScript 배열 객체에 내장된 함수로, 배열의 각 항목을 순회하면서 단일 값을 얻는 데 사용되는 메소드입니다. 주로 배열 내의 요소들을 누적하거나 결합하여 특정 계산을 수행할 때 사용합니다.

  1. 구문과 매개변수:
array.reduce(callbackFunction[, initialValue]);
  • callbackFunction: 배열의 각 요소에 대해 실행할 함수

    • accumulator: 이전 요소들의 누적 결과로, 콜백 함수의 반환값이 누적되는 변수입니다.
    • currentValue: 처리할 현재 요소
    • currentIndex (선택적): 처리할 현재 요소의 인덱스
    • array (선택적): reduce 메소드가 호출된 배열
  • initialValue (선택적): accumulator의 초기 값으로 설정할 값입니다. 초기 값이 없으면 배열의 첫 번째 요소를 기본 값으로 사용합니다.

  1. 작동 원리:
    reduce 메소드는 배열의 모든 요소에 대해 콜백 함수를 실행하고, 그 결과 값을 누적합니다. 마지막 요소까지 누적된 결과가 반환됩니다.

  2. 예시:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 15

위 예제에서는 배열 내의 모든 숫자를 더하여 총합을 구하는 과정을 진행합니다. 초기 누적 값은 0으로 설정되어 있으며, 콜백 함수에서 누적 값을 반복적으로 업데이트합니다.

Array reduce 메소드는 배열의 합계, 최댓값, 최솟값, 평균값 등을 계산할 때 유용하며, 객체 또는 배열을 변환하거나 특정 조건에 맞는 요소들을 누적하는 데 사용할 수 있습니다. 이를 통해 사용자 정의 비즈니스 로직과 연산 작업에 유연하게 대응할 수 있습니다.

자바스크립트 배열에서 요소의 중복 개수를 확인하는 방법은 여러 가지가 있습니다. 다양한 방법을 예시로 들고 이 중 가장 효율적인 메서드를 추천하겠습니다.

  1. forEach()와 객체(Object)를 사용하는 방법:
const countDuplicates = (arr) => {
  const counts = {};
  arr.forEach((item) => {
    counts[item] = (counts[item] || 0) + 1;
  });
  return counts;
};
  1. reduce()와 객체(Object)를 사용하는 방법:
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;
  }, []);
};

이 코드의 동작과 내부 구조를 상세하게 설명하겠습니다.

  1. removeDuplicates 함수를 정의합니다. 이 함수는 매개변수로 배열 arr을 입력받습니다.

  2. arr 배열의 reduce 메소드를 호출합니다. 이 메소드는 두 개의 인자를 받습니다 - 리듀서 함수와 초깃값(빈 배열, []).

  3. 리듀서 함수는 두 개의 매개변수를 받습니다: acc는 누적값(accumulator value)이고, cur은 현재 요소입니다. 리듀서 함수는 배열의 요소를 순회하며, 각 요소에 대해 실행됩니다.

  4. return acc.indexOf(cur) === -1에서 indexOf() 메서드를 사용하여 누적 배열 acc에 현재 값 cur이 포함되어 있는지 확인합니다. 만약 cur 값이 acc 배열에 없어서 반환한 인덱스가 -1이라면, 삼항 연산자는 true가 됩니다.

  5. 삼항 연산자의 결과가 true일 때, 현재 요소 cur가 누적 배열 acc에 중복되지 않은 새로운 값으로 간주되어, [...acc, cur]를 반환하여 cur 값을 배열 acc에 추가합니다.

  6. 반대로 삼항 연산자의 결과가 false일 때, acc 배열이 그대로 반환되고 현재 요소 cur는 추가되지 않습니다.

  7. 순회가 끝난 후, 중복이 제거된 배열이 최종 결과로 반환됩니다.

1개의 댓글

comment-user-thumbnail
2023년 7월 22일

자바스크립트의 reduce 메소드에 대한 깊이 있는 설명 감사드립니다. 예시를 통해 더욱 이해하기 쉬웠습니다.

답글 달기