자바스크립트에서 배열은 여러 개의 값들을 하나의 변수에 저장하기 위한 데이터 구조입니다. 배열에 포함된 요소들은 여러 가지 방법으로 조작할 수 있습니다. 이번 블로그 포스트에서는 자바스크립트 배열의 요소를 특정 기준으로 수집하고, 해당 기준에 따라 정렬하는 방법에 대해 알아보겠습니다.

1. 배열 요소 수집하기

배열에서 특정 기준을 가진 요소들을 수집하기 위해서는 filter() 함수를 사용할 수 있습니다. filter() 함수는 주어진 콜백 함수를 통해 배열의 각 요소를 검사하고, 콜백 함수가 true를 반환하는 요소만을 새로운 배열로 필터링합니다.

다음은 배열에서 짝수만을 수집하는 예시입니다:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers); // [2, 4, 6, 8, 10]

2. 배열 요소 정렬하기

배열의 요소를 정렬하기 위해서는 sort() 함수를 사용할 수 있습니다. sort() 함수는 기본적으로 배열을 오름차순으로 정렬합니다.

다음은 배열을 오름차순으로 정렬하는 예시입니다:

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

fruits.sort();

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

그러나 sort() 함수는 기본 정렬 순서뿐만 아니라 사용자 정의 정렬 순서에 따라 배열을 정렬할 수도 있습니다. 이를 위해서는 compareFunction 파라미터를 제공해야 합니다. compareFunction은 두 요소를 비교하여 정렬 순서를 결정하는 함수입니다.

다음은 배열을 길이 순서대로 정렬하는 예시입니다:

const animals = ['cat', 'elephant', 'lion', 'tiger', 'dog'];

animals.sort((a, b) => a.length - b.length);

console.log(animals); // ['cat', 'dog', 'lion', 'tiger', 'elephant']

위 예시에서 compareFunction에는 a.length - b.length를 사용하여 요소들을 길이 순서대로 정렬합니다.

3. 요소 수집 및 정렬 결합하기

요소 수집과 정렬을 결합하여 특정 기준으로 배열을 정렬할 수 있습니다.

다음은 배열에서 10보다 큰 짝수를 수집하고, 해당 요소들을 내림차순으로 정렬하는 예시입니다:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const filteredNumbers = numbers.filter(num => num % 2 === 0 && num > 10);

const sortedNumbers = filteredNumbers.sort((a, b) => b - a);

console.log(sortedNumbers); // [12, 14, 16, 18, 20]

위 예시에서 filter() 함수를 사용하여 10보다 큰 짝수만을 수집하고, 그 결과로 나온 배열을 sort() 함수를 사용하여 내림차순으로 정렬합니다.

자바스크립트 배열의 요소를 특정 기준으로 수집하고, 그에 따라 정렬하는 방법에 대해 알아보았습니다. 이렇게 여러 가지 배열 요소 조작 기능을 활용하면 다양한 데이터 처리 작업을 효율적으로 수행할 수 있습니다.

Happy coding! 🚀👨‍💻