데이터를 필터링하여 특정 조건을 충족하는 항목들을 찾고, 이를 원하는 기준에 따라 정렬하는 것은 많은 웹 애플리케이션에서 매우 유용합니다. 자바스크립트에서는 이를 손쉽게 할 수 있는 다양한 내장 함수와 메서드를 제공합니다.

데이터 필터링

데이터를 필터링하기 위해서는 Array.prototype.filter() 메서드를 사용합니다. 이 메서드는 주어진 함수의 조건을 만족하는 요소들로 이루어진 새로운 배열을 반환합니다.

예를 들어, 숫자 배열에서 짝수만을 필터링하기 위한 코드는 다음과 같습니다:

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(num => num % 2 === 0);
// evenNumbers는 [2, 4, 6]을 포함합니다.

데이터 정렬

데이터를 정렬하기 위해서는 Array.prototype.sort() 메서드를 사용합니다. 이 메서드는 배열의 요소를 적절히 정렬한 후, 정렬된 배열을 반환합니다. 정렬 기준을 지정하기 위해 비교 함수를 제공할 수 있습니다.

예를 들어, 숫자 배열을 오름차순으로 정렬하기 위한 코드는 다음과 같습니다:

const numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
numbers.sort((a, b) => a - b);
// numbers는 [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]로 정렬됩니다.

필터링 후 정렬

필터링된 데이터를 정렬하기 위해서는 두 메서드를 연쇄하여 사용할 수 있습니다.

const data = [10, 5, 8, 20, 3, 16, 25];
const filteredAndSortedData = data.filter(num => num > 5).sort((a, b) => a - b);
// filteredAndSortedData는 [8, 10, 16, 20, 25]를 포함합니다.

위의 예제에서는 먼저 filter() 메서드로 5보다 큰 숫자를 필터링한 후, sort() 메서드를 사용하여 이 숫자들을 오름차순으로 정렬했습니다.

이처럼 자바스크립트에서는 데이터 필터링 후 정렬하는 것이 간단하며 강력한 기능이므로, 다양한 상황에서 유용하게 활용할 수 있습니다.

참조: MDN Web Docs - Array.prototype.filter(), MDN Web Docs - Array.prototype.sort()