배열은 자바스크립트에서 가장 일반적으로 사용되는 데이터 구조입니다. 배열에는 여러 개의 요소들이 순서대로 저장되어 있으며, 각 요소는 고유한 인덱스로 접근할 수 있습니다. 이번 블로그에서는 자바스크립트 배열을 특정 기준으로 항목을 수집하고, 그 결과를 정렬하는 방법에 대해 알아보겠습니다.

1. filter() 메소드를 사용하여 항목 수집하기

filter() 메소드는 배열 내의 모든 요소를 대상으로 특정 조건을 검사하고, 조건을 만족하는 요소들을 새로운 배열로 반환합니다. 이를 이용하여 특정 기준으로 항목을 수집할 수 있습니다.

예를 들어, 다음과 같은 배열이 있다고 가정해봅시다.

const numbers = [10, 20, 30, 40, 50];

이 배열에서 30보다 큰 숫자들만을 수집하려면 다음과 같이 filter() 메소드를 사용할 수 있습니다.

const filteredNumbers = numbers.filter((number) => number > 30);
console.log(filteredNumbers); // [40, 50]

2. sort() 메소드를 사용하여 항목 정렬하기

sort() 메소드는 배열의 요소를 정렬하는 기능을 제공합니다. 이 메소드를 이용하여 수집한 항목들을 원하는 기준으로 정렬할 수 있습니다.

예를 들어, 다음과 같은 배열이 있다고 가정해봅시다.

const fruits = ['banana', 'apple', 'orange', 'grape'];

이 배열의 항목들을 알파벳순으로 정렬하려면, 다음과 같이 sort() 메소드를 사용할 수 있습니다.

const sortedFruits = fruits.sort();
console.log(sortedFruits); // ['apple', 'banana', 'grape', 'orange']

만약 항목을 내림차순으로 정렬하고 싶다면, sort() 메소드에 콜백 함수를 전달하여 비교 함수를 구현하면 됩니다.

const sortedFruits = fruits.sort((a, b) => b.localeCompare(a));
console.log(sortedFruits); // ['orange', 'grape', 'banana', 'apple']

3. filter()와 sort() 메소드를 조합하여 항목 수집 및 정렬하기

filter()와 sort() 메소드를 조합하여 특정 기준에 맞는 항목들을 수집하고, 그 결과를 정렬할 수 있습니다.

예를 들어, 다음과 같은 배열이 있다고 가정해봅시다.

const products = [
  { name: 'Apple', price: 1000 },
  { name: 'Banana', price: 500 },
  { name: 'Orange', price: 1500 },
  { name: 'Grape', price: 2000 }
];

이 배열에서 가격이 1000보다 큰 상품들을 수집하고, 가격순으로 정렬하려면 다음과 같이 filter()와 sort() 메소드를 조합하여 사용할 수 있습니다.

const filteredAndSortedProducts = products
  .filter((product) => product.price > 1000)
  .sort((a, b) => a.price - b.price);
console.log(filteredAndSortedProducts);
// [{ name: 'Grape', price: 2000 }, { name: 'Orange', price: 1500 }]

위 코드에서는 filter() 메소드를 사용하여 가격이 1000보다 큰 상품들을 수집하고, sort() 메소드를 사용하여 가격순으로 정렬합니다. 결과적으로 가격이 오름차순으로 정렬된 상품들이 출력됩니다.

자바스크립트에서 배열의 요소를 특정 기준으로 항목을 수집하고, 그 결과를 정렬하는 방법에 대해 알아보았습니다. filter() 메소드를 사용하여 항목을 수집하고, sort() 메소드를 사용하여 항목을 정렬함으로써 원하는 형태의 배열을 생성할 수 있습니다. 이러한 배열 조작 기능을 이용하면 다양한 애플리케이션에서 필요한 데이터 가공을 간편하게 수행할 수 있습니다.