JavaScript Array Sort
JavaScript Array Sort: 배열 정렬의 이해와 활용
JavaScript의 배열 정렬(Array Sort) 기능은 데이터를 특정 기준에 따라 순서대로 나열하는 데 사용됩니다. sort() 메서드를 사용하면
문자열, 숫자, 객체 등 다양한 데이터 타입을 정렬할 수 있습니다. 이 가이드는 배열을 정렬하는 방법과 이를 제어하는 다양한 기법을 설명합니다.
1. sort() 메서드 개요
JavaScript의 sort() 메서드는 배열을 정렬하며, 기본적으로 문자열을 기준으로 정렬합니다. 정렬할 때 배열의 원본을
변경합니다.
1.1. 기본 사용법
sort() 메서드를 사용하면 배열의 요소가 사전 순서(알파벳순)로 정렬됩니다.
const fruits = ["banana", "apple", "cherry"];
fruits.sort();
console.log(fruits); // 출력: ["apple", "banana", "cherry"]
1.2. 숫자 정렬 시 주의사항
기본 정렬은 문자열 기준으로 이루어지므로, 숫자를 정렬할 때 문제가 발생할 수 있습니다. 숫자 값을 비교할 때는 정렬 기준을 직접 설정해야 합니다.
const numbers = [4, 2, 9, 1];
numbers.sort();
console.log(numbers); // 출력: [1, 2, 4, 9] (올바름)
const mixedNumbers = [10, 5, 25, 1];
mixedNumbers.sort();
console.log(mixedNumbers); // 출력: [1, 10, 25, 5] (문자열 순서로 정렬)
2. 숫자 정렬
숫자를 올바르게 정렬하려면 sort() 메서드에 **비교 함수(compare function)**를 전달해야 합니다. 비교 함수는 두 개의 값을 받아 다음과 같은 값을 반환합니다:
- 양수: 첫 번째 값이 두 번째 값보다 크면 양수를 반환 (정렬 순서 유지)
- 음수: 첫 번째 값이 두 번째 값보다 작으면 음수를 반환 (정렬 순서 바꿈)
- 0: 두 값이 같으면 0을 반환 (정렬 순서 유지)
2.1. 오름차순 정렬 (작은 값부터 큰 값)
const numbers = [4, 2, 9, 1];
numbers.sort((a, b) => a - b);
console.log(numbers); // 출력: [1, 2, 4, 9]
2.2. 내림차순 정렬 (큰 값부터 작은 값)
numbers.sort((a, b) => b - a);
console.log(numbers); // 출력: [9, 4, 2, 1]
3. 문자열 정렬
기본적으로 문자열은 사전 순서(알파벳 순서)로 정렬됩니다. 하지만, 문자열이 대소문자를 포함하거나 특정 언어 규칙을 따를 때는 정렬 결과가 다를 수 있습니다.
3.1. 대소문자 구분 없이 정렬
기본적으로 sort()는 대소문자를 구분하여 정렬하지만, 대소문자를 무시하고 정렬할 수 있습니다.
const fruits = ["banana", "Apple", "cherry"];
fruits.sort();
console.log(fruits); // 출력: ["Apple", "banana", "cherry"]
// 대소문자 구분 없이 정렬하려면 모두 소문자 또는 대문자로 변환
fruits.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
console.log(fruits); // 출력: ["Apple", "banana", "cherry"]
3.2. localeCompare() 메서드 사용
localeCompare() 메서드는 현지화 규칙을 사용하여 문자열을 비교합니다. 이 메서드는 대소문자와 언어 규칙을 따르는 정렬을 지원합니다.
const fruits = ["banana", "Apple", "cherry"];
fruits.sort((a, b) => a.localeCompare(b));
console.log(fruits); // 출력: ["Apple", "banana", "cherry"]
4. 객체 배열 정렬
객체 배열을 정렬할 때는 각 객체의 특정 속성 값을 기준으로 정렬할 수 있습니다.
4.1. 단일 속성 기준 정렬
예를 들어, 객체 배열을 age 속성을 기준으로 정렬할 수 있습니다.
const people = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 30 },
{ name: "Charlie", age: 20 }
];
people.sort((a, b) => a.age - b.age);
console.log(people);
// 출력: [
// { name: "Charlie", age: 20 },
// { name: "Alice", age: 25 },
// { name: "Bob", age: 30 }
// ]
4.2. 문자열 속성 기준 정렬
객체 배열을 name과 같은 문자열 속성을 기준으로 정렬할 수도 있습니다.
people.sort((a, b) => a.name.localeCompare(b.name));
console.log(people);
// 출력: [
// { name: "Alice", age: 25 },
// { name: "Bob", age: 30 },
// { name: "Charlie", age: 20 }
// ]
5. 랜덤 정렬
배열을 무작위로 섞으려면 비교 함수에서 무작위 값을 반환할 수 있습니다.
const items = [1, 2, 3, 4, 5];
items.sort(() => Math.random() - 0.5);
console.log(items); // 출력: 무작위로 섞인 배열
6. 고급 정렬: 다중 기준 정렬
두 가지 이상의 기준으로 배열을 정렬할 수 있습니다. 예를 들어, age를 기준으로 정렬하되, age가 같을 경우 name을 기준으로 정렬할
수 있습니다.
const people = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 25 },
{ name: "Charlie", age: 20 }
];
people.sort((a, b) => {
if (a.age === b.age) {
return a.name.localeCompare(b.name);
} else {
return a.age - b.age;
}
});
console.log(people);
// 출력: [
// { name: "Charlie", age: 20 },
// { name: "Alice", age: 25 },
// { name: "Bob", age: 25 }
// ]
요약
sort(): 배열을 기본적으로 문자열을 기준으로 정렬하며, 숫자를 정렬할 때는 비교 함수를 사용해야 합니다.- 숫자 정렬: 비교 함수를 사용하여 오름차순 또는 내림차순으로 정렬할 수 있습니다.
- 객체 배열 정렬: 객체 배열은 특정 속성을 기준으로 정렬할 수 있습니다.
- 문자열 정렬:
localeCompare()를 사용하여 대소문자 구분 없이 문자열을 정렬하거나, 언어별 정렬 규칙을 따를 수 있습니다.
JavaScript의 배열 정렬 메서드를 활용하면, 데이터를 다양한 기준에 따라 쉽게 정렬할 수 있습니다. 특히, 객체 배열을 다룰 때 정렬 기준을 유연하게 설정할 수 있어 매우 유용합니다.