[Javascript] 배열 내 특정 요소의 개수 구하기

데이터 분석, 사용자 입력 처리, 필터링 등의 작업에서 특정 값이나 요소의 출현 빈도를 파악해야 할 때가 있습니다. 예를 들어, 웹 애플리케이션에서 사용자가 선택한 항목의 수를 계산하거나, 특정 키워드가 포함된 게시물의 개수를 세는 등 다양한 상황에서 배열 내 특정 요소의 개수를 파악해야 할 수 있습니다.

이를 위해 우리는 배열의 각 요소를 반복하고 특정 요소와 일치하는지 확인해야 합니다.

반응형

 

배열 반복을 통한 요소 개수 세기

// 배열 반복을 통한 요소 개수 세기
function countArrayItem(arr, target) {
  let count = 0;
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] === target) {
      count++;
    }
  }
  return count;
}

const arr1 = [1, 2, 2, 3, 4, 2, 5];
console.log(countArrayItem(arr1, 2)); // 출력: 3

이 방법은 가장 기본적인 방법으로, 배열을 순회하면서 각 요소가 특정 값과 일치하는지 확인하고 일치할 때마다 카운트를 증가시킵니다.

그리고 최종 카운트된 값을 리턴합니다.

 

filter() 메서드를 이용한 요소 개수 세기

filter() 메서드는 주어진 함수의 조건을 만족하는 모든 요소를 모아 새로운 배열로 반환합니다. 이 메서드는 원본 배열을 변경하지 않고 새로운 배열을 반환합니다.

<구문>
array.filter(callback)

<파라미터>
1. array: filter()를 호출하는 배열
2. callback: 각 요소에 대해 호출될 함수로, 한 개의 인자를 받습니다.
    · element: 배열에서 현재 처리 중인 요소

<리턴값>
주어진 조건을 만족하는 모든 요소를 포함하는 새로운 배열

callback 함수는 각 요소에 대해 호출되며, 조건을 만족하는 요소는 새로운 배열에 포함됩니다. 만약 callback 함수가 true를 반환하면 해당 요소는 결과 배열에 포함되고, false를 반환하면 제외됩니다. 최종적으로 조건을 만족하는 모든 요소가 포함된 새로운 배열이 반환됩니다.

// filter() 메서드를 이용한 요소 개수 세기
const arr2 = ['apple', 'banana', 'apple', 'orange', 'apple'];
const countApple = arr2.filter(fruit => fruit === 'apple').length;
console.log(countApple); // 출력: 3

filter() 메서드는 주어진 함수에 따라 배열의 요소를 필터링하여 새로운 배열을 생성합니다. 이 예시에서는 'apple'과 같은 특정 요소만 필터링하여 그 길이를 반환하여 해당 요소의 개수를 세는 방법입니다.

=>(화살표) 함수에 익숙하지 않으신 분들은 다음 글을 참고하시면 됩니다~

2023.05.31 - [IT] - [Javascript] 화살표 함수 (arrow function, ()=>{}) ???

[Javascript] 화살표 함수 (arrow function, ()=>{}) ???

reduce() 메서드를 이용한 요소 개수 세기

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고 하나의 결과값을 반환합니다. 이 메서드는 배열을 순회하면서 누적된 결과값을 계산하거나 배열을 변형하는 데 사용됩니다.

<구문>
array.reduce(callback, initialValue)

<파라미터>
1. array: reduce()를 호출하는 배열
2. callback: 각 요소에 대해 호출될 함수로, 네 개의 인자를 받습니다. 
    · accumulator: 누적된 결과값
    · currentValue: 현재 처리 중인 요소
    · currentIndex (선택적): 현재 처리 중인 요소의 인덱스
    · array (선택적): reduce()를 호출한 배열
2. initialValue (선택적): 초기값. 만약 지정되지 않으면 배열의 첫 번째 요소가 초기값이 되며, 빈 배열에서 호출되면 오류가 발생합니다.

reducer 함수는 각 요소에 대해 호출되며, 그 결과로 누적된 값을 반환합니다. 이 누적된 값은 다음 요소에 대해 다시 reducer 함수가 호출될 때 이전 요소의 결과값으로 사용됩니다. 최종적으로 리듀서 함수가 반환하는 값이 reduce() 메서드의 최종 결과값이 됩니다.

// reduce() 메서드를 이용한 요소 개수 세기
const arr3 = [true, false, true, true, false, true];
const countTrue = arr3.reduce((acc, val) => val ? acc + 1 : acc, 0);
console.log(countTrue); // 출력: 4

reduce() 메서드는 배열의 각 요소에 대해 주어진 함수를 실행하고 하나의 결과값을 반환합니다. 이 예시에서는 true인 요소만 카운트하여 최종적으로 카운트된 값을 반환하는 방법입니다.

 

좀 더 자세히 설명하면

1. arr3 배열에는 true와 false가 혼합되어 있습니다.
2. reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 함수를 실행하고 하나의 결과값을 반환합니다. 여기서는 초기값으로 0을 설정했습니다.
3. 리듀서 함수는 누적값 acc와 현재 요소 val을 인자로 받습니다.
4. 리듀서 함수 내부에서는 현재 요소 val이 true인 경우 누적값 acc에 1을 더하고, 그렇지 않으면 그대로 반환합니다.
5. 최종적으로 리듀서 함수는 true인 요소의 개수를 누적값으로 반환합니다.

reduce() 메서드는 배열을 순회하면서 복잡한 연산을 수행할 때 유용하며, 코드를 간결하게 작성할 수 있는 장점이 있습니다.

 

반응형

 

마무리...

배열의 특정 요소 개수를 세는 다양한 방법을 살펴보았습니다. 이러한 기술은 데이터 처리와 분석, 사용자 입력 처리 등 다양한 프로그래밍 시나리오에서 유용하게 활용될 수 있습니다. 각 방법은 상황에 따라 선택할 수 있으며, 이를 통해 코드를 더욱 효율적으로 작성할 수 있습니다. 배열의 요소를 효과적으로 조작하고 처리하기 위해 reduce(), filter()와 같은 배열 메서드를 적절히 활용하면 코드의 가독성과 성능을 향상시킬 수 있습니다.