[JavaScript]배열에서 특정 조건을 만족하는 요소의 개수 구하는 방법

배열에서 특정 조건을 만족하는 요소의 개수 구하는 방법

이번 포스팅은 JavaScript 배열에서 특정 조건을 만족하는 요소의 개수를 구하는 몇 가지 방법을 소개합니다.

---

방법 1. 반복문

가장 심플한 방법으로 반복문을 사용하여 특정 조건을 만족하는 요소의 개수를 구할 수 있습니다.

 

배열의 요소 개수만큼 반복문을 순회하여 특정 조건을 만족하면 count를 증가시킵니다.

 

다음 예제는 숫자 타입인 배열에서 10보다 큰 요소의 개수를 구합니다.

const numArray = [0, 10, 5, 20, 8, 40];
let count = 0;

for(index = 0; index < numArray.length; index++) {
  if(numArray[index] > 10) count++;
}

console.log('10보다 큰 요소의 개수: ' + count);

[실행 결과]

10보다 큰 요소의 개수: 2

---

방법 2. filter 메서드

두 번째 방법으로 배열에서 제공하는 filter() 메서드를 사용합니다.

 

filter() 메서드는 배열에서 특정 조건을 만족하는 요소로 구성된 새로운 배열을 반환합니다.

arr.filter(callback(element[, index[, array]])[, thisArg])

filter() 메서드는 콜백 함수와 콜백 함수를 실행할 때, this로 사용되는 값을 매개변수로 가집니다.

 

콜백 함수는 세 개의 매개변수를 가지며, 두 번째(index)와 세 번째 매개변수(array)는 생략할 수 있습니다. 

 

element

- 현재 배열의 요소입니다.

- 생략할 수 없습니다.

 

index

- 현재 배열의 인덱스입니다.

- 생략할 수 있습니다.

 

array

- filter() 메서드를 호출한 배열

- 생략할 수 있습니다.

 

[특정 조건을 만족하는 배열의 요소의 개수 구하는 방법]

순서 1. filter() 메서드를 호출하여 배열을 순회합니다.

순서 2. filter() 메서드의 콜백 함수에서 배열의 요소가 특정 조건을 만족하는지 확인합니다.

순서 3. filter() 메서드 반환 결과의 길이(length)를 구합니다.

 

다음 예제는 filter() 메서드를 사용하여 숫자 타입인 배열에서 10보다 큰 요소로 구성된 새로운 배열을 생성하고 새로운 배열의 길이를 구합니다.

const numArray = [0, 10, 5, 20, 8, 40];
const newArray = numArray.filter((item) => item > 10);

console.log('10보다 큰 요소의 개수: ' + newArray.length);
console.log(newArray);

[실행 결과]

10보다 큰 요소의 개수: 2
[20, 40]

 

다음 예제는 filter() 메서드를 사용하여 배열의 인덱스가 2보다 큰 요소로 구성된 새로운 배열을 생성하고 새로운 배열의 길이를 구합니다.

const numArray = [0, 10, 5, 20, 8, 40];
const newArray = numArray.filter((item, index) => index > 2);

console.log('인덱스가 2보다 큰 요소의 개수: ' + newArray.length);
console.log(newArray);

[실행 결과]

인덱스가 2보다 큰 요소의 개수: 3
[20, 8, 40]

---

방법 3. reduce 메서드

마지막 방법으로 reduce() 메서드를 사용하여 특정 조건을 만족하는 요소의 개수를 구할 수 있습니다.

 

[특정 조건을 만족하는 배열의 요소의 개수 구하는 방법]

순서 1. reduce() 메서드를 호출하여 배열을 순회하며, 누적 값(accmulator)을 0으로 초기화합니다.

순서 2. reduce() 메서드의 콜백 함수에서 배열의 요소가 특정 조건을 만족하면, 누적 값(accmulator)을 1 증가시킨 결과를 반환합니다.

순서 3. reduce() 메서드의 콜백 함수에서 배열의 요소가 특정 조건을 만족하지 않으면, 누적 값(accmulator)을 반환합니다.

순서 4. 배열의 순회가 끝나면, reduce() 메서드는 최종 누적 값(accmulator)을 반환합니다.

 

다음 예제는 reduce() 메서드를 사용하여 숫자 타입인 배열에서 10보다 큰 요소로 구성된 새로운 배열을 생성하고 새로운 배열의 길이를 구합니다.

const numArray = [0, 10, 5, 20, 8, 40];
const count = numArray.reduce((accumulator, item) => {
  // 배열의 요소가 특정 조건을 만족하면 누적 값(accumulator)이 1 증가된 결과를 반환합니다.
  if(item > 10) return accumulator + 1;
  // 배열의 요소가 특정 조건을 만족하지 않으면 누적 값(accumulator)을 반환합니다.
  return accumulator;
}, 0); // 누적 값(accumulator)의 초기값을 0으로 설정합니다.

console.log('10보다 큰 요소의 개수: ' + count);

[실행 결과]

10보다 큰 요소의 개수: 2