[javascript] 자바스크립트 배열 정렬과 필터링을 함께 사용하는 방법

배열을 정렬하고 특정 조건을 기반으로 배열을 필터링해야 하는 경우가 있습니다. 자바스크립트에서는 이 두 가지 작업을 함께 수행할 수 있습니다. 이 게시물에서는 자바스크립트의 Array.prototype.sort()Array.prototype.filter() 메서드를 함께 사용하여 배열을 정렬하고 필터링하는 방법에 대해 알아보겠습니다.

배열 정렬 및 필터링하기

먼저, 배열을 정렬하고 필터링하는 방법을 살펴보겠습니다.

const numbers = [15, 4, 8, 12, 3, 20, 10];

const filteredAndSorted = numbers
  .filter(number => number >= 10) // 10 이상의 숫자 필터링
  .sort((a, b) => a - b); // 오름차순 정렬

console.log(filteredAndSorted); // [ 10, 12, 15, 20 ]

위 예제에서는 numbers 배열에서 10 이상의 숫자를 필터링한 후, 오름차순으로 정렬한 결과를 filteredAndSorted 배열에 저장하였습니다.

내림차순으로 정렬하기

만약 배열을 내림차순으로 정렬하고 싶다면, 정렬 함수의 순서를 바꾸어주면 됩니다.

const numbers = [15, 4, 8, 12, 3, 20, 10];

const filteredAndSortedDescending = numbers
  .filter(number => number >= 10) // 10 이상의 숫자 필터링
  .sort((a, b) => b - a); // 내림차순 정렬

console.log(filteredAndSortedDescending); // [ 20, 15, 12, 10 ]

위 예제에서는 numbers 배열에서 10 이상의 숫자를 필터링한 후, 내림차순으로 정렬한 결과를 filteredAndSortedDescending 배열에 저장하였습니다.

정렬 및 필터링 함수 분리하기

때로는 정렬 및 필터링을 별도의 함수로 분리해야하는 경우도 있습니다. 아래는 이러한 경우를 다룬 예제입니다.

const numbers = [15, 4, 8, 12, 3, 20, 10];

function filterAndSortArray(arr, condition, comparator) {
  return arr.filter(condition).sort(comparator);
}

const filteredAndSorted = filterAndSortArray(
  numbers,
  number => number >= 10, // 조건: 10 이상의 숫자
  (a, b) => a - b // 정렬: 오름차순
);

console.log(filteredAndSorted); // [ 10, 12, 15, 20 ]

filterAndSortArray 함수를 사용하여 정렬 및 필터링 조건을 외부에서 전달하여 실행할 수 있습니다.

위의 예제들을 보면, 자바스크립트의 Array.prototype.sort()Array.prototype.filter() 메서드를 조합하여 배열을 원하는 조건으로 필터링하고 정렬할 수 있음을 알 수 있습니다.

이와 같은 함수 조합은 데이터를 효과적으로 다루는데 도움이 될 수 있습니다.

참고 자료