자바스크립트에서 배열은 여러 개의 요소를 담는 데이터 구조입니다. 때로는 배열의 요소를 특정 기준으로 정렬하고, 정렬된 결과를 추출해야 할 때가 있습니다. 이번 블로그 포스트에서는 자바스크립트에서 배열의 요소를 특정 기준으로 정렬하고 추출하는 방법에 대해 알아보겠습니다.

Array.prototype.sort() 메서드

자바스크립트 배열에는 sort()라는 메서드가 내장되어 있습니다. 이 메서드를 사용하면 배열의 요소들을 정렬할 수 있습니다. sort() 메서드는 기본적으로 문자열 기준으로 요소를 정렬하며, 오름차순으로 정렬됩니다.

const numbers = [5, 2, 10, 1, 7];
numbers.sort();
console.log(numbers); // [1, 10, 2, 5, 7]

위의 코드에서 numbers 배열을 sort() 메서드로 정렬하면, 숫자가 아닌 문자열 기준으로 오름차순으로 정렬된 결과인 [1, 10, 2, 5, 7]를 얻게 됩니다. 이는 원하는 결과와는 다른 결과입니다.

정렬 기준 지정하기

sort() 메서드는 정렬 기준을 지정할 수 있는 매개변수를 받을 수 있습니다. 이 매개변수는 양수, 음수, 0을 반환하는 함수로 작성됩니다. 함수에서 반환 값에 따라 요소의 위치가 결정되어 정렬됩니다.

다음은 숫자 배열을 오름차순으로 정렬하는 예제입니다.

const numbers = [5, 2, 10, 1, 7];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 2, 5, 7, 10]

sort() 메서드의 매개변수로 화살표 함수 (a, b) => a - b를 전달했습니다. 이 함수는 a와 b라는 두 개의 숫자를 받아 차이를 반환합니다. 반환 값이 0보다 작다면 a가 b보다 작다는 의미이므로 a를 앞으로 이동하여 오름차순으로 정렬합니다. 반환 값이 0이라면 a와 b의 순서를 유지하며, 반환 값이 0보다 크다면 b가 a보다 작다는 의미이므로 b를 앞으로 이동하여 오름차순으로 정렬합니다.

특정 기준으로 배열 추출하기

배열의 요소를 특정 기준으로 정렬했다면, 이제 배열에서 원하는 요소를 추출할 수 있습니다. 자바스크립트에서는 filter() 메서드를 사용하여 조건에 맞는 요소만 추출할 수 있습니다.

다음은 숫자 배열에서 짝수만 추출하는 예제입니다.

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter((number) => number % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

filter() 메서드에는 화살표 함수 (number) => number % 2 === 0를 전달했습니다. 이 함수는 각 요소를 2로 나눈 나머지가 0인지 확인하고, 만족하는 요소만 추출합니다. 위의 예제에서는 [1, 2, 3, 4, 5, 6] 배열에서 짝수인 [2, 4, 6]만 추출하여 evenNumbers 배열에 저장하였습니다.

결론

자바스크립트에서 배열의 요소를 특정 기준으로 정렬하고 추출하는 방법에 대해 알아보았습니다. sort() 메서드를 사용하여 배열을 정렬하고, filter() 메서드를 사용하여 원하는 요소만 추출할 수 있습니다. 이러한 배열 다루는 기능은 자바스크립트에서 매우 유용하게 사용될 수 있으므로, 응용하여 다양한 상황에서 활용해보세요.