JavaScript에서 배열 정렬하기: 다양한 방법과 활용 - 좋은공간 좋은집

배열은 데이터를 관리하고 처리하는 데 매우 유용한 데이터 구조입니다. JavaScript에서는 배열을 정렬하기 위한 여러 메서드를 제공하며, 정렬 알고리즘을 활용하여 숫자, 문자열, 객체 등을 다양한 기준으로 정렬할 수 있습니다. 이 글에서는 JavaScript에서 배열 정렬을 다루는 방법과 각 메서드를 사용하는 방법을 살펴보겠습니다.

1. sort(): 기본 배열 정렬

sort() 메서드는 배열의 요소를 기본적으로 문자열로 변환하여 유니코드 순서에 따라 정렬합니다. 이로 인해 숫자를 정렬할 때는 예상치 못한 결과가 나올 수 있으므로, 숫자 정렬 시에는 비교 함수를 함께 사용하는 것이 중요합니다.

기본 정렬

const fruits = ['banana', 'apple', 'cherry', 'date'];

fruits.sort();
console.log(fruits);  // 결과: ['apple', 'banana', 'cherry', 'date']

위 예제에서 sort()는 문자열 배열을 알파벳 순으로 정렬합니다. 기본적으로 문자열로 취급되는 데이터는 이와 같이 정상적으로 정렬됩니다.

숫자 배열 정렬

숫자 배열을 sort()로 정렬할 때는 비교 함수를 사용하지 않으면 숫자가 예상대로 정렬되지 않습니다. 기본적으로 숫자를 문자열로 변환하여 유니코드 순서로 정렬하기 때문입니다.

const numbers = [40, 1, 5, 200];

numbers.sort();
console.log(numbers);  // 결과: [1, 200, 40, 5] (잘못된 정렬)

위 예제에서는 숫자가 문자열로 처리되어 잘못된 정렬 결과를 반환합니다. 이를 해결하려면 비교 함수를 사용하여 숫자를 올바르게 정렬할 수 있습니다.

비교 함수를 사용한 숫자 정렬

숫자를 올바르게 정렬하려면 비교 함수를 전달하여 sort() 메서드가 두 값을 비교하는 방식을 지정해 줍니다.

const numbers = [40, 1, 5, 200];

numbers.sort((a, b) => a - b);  // 오름차순 정렬
console.log(numbers);  // 결과: [1, 5, 40, 200]

numbers.sort((a, b) => b - a);  // 내림차순 정렬
console.log(numbers);  // 결과: [200, 40, 5, 1]

위 코드에서 a - b는 숫자를 오름차순으로 정렬하며, b - a는 내림차순으로 정렬합니다. 숫자 배열을 정렬할 때는 항상 이와 같이 비교 함수를 함께 사용하는 것이 권장됩니다.

2. 객체 배열 정렬하기

객체 배열을 정렬하려면 특정 속성(property)을 기준으로 정렬해야 합니다. 예를 들어, 사용자 객체 배열을 나이 또는 이름 순으로 정렬할 수 있습니다.

객체 배열을 숫자 속성으로 정렬

const users = [
    { name: 'John', age: 25 },
    { name: 'Jane', age: 22 },
    { name: 'Mike', age: 32 }
];

// 나이를 기준으로 오름차순 정렬
users.sort((a, b) => a.age - b.age);
console.log(users);
// 결과: [{ name: 'Jane', age: 22 }, { name: 'John', age: 25 }, { name: 'Mike', age: 32 }]

위 코드에서는 age 속성을 기준으로 객체 배열을 오름차순으로 정렬했습니다. 이처럼 객체 배열의 특정 속성을 기준으로 비교하여 정렬할 수 있습니다.

객체 배열을 문자열 속성으로 정렬

문자열 속성을 기준으로 객체 배열을 정렬할 때는 localeCompare()를 사용할 수 있습니다. 이 함수는 문자열을 알파벳 순으로 비교하는 데 유용합니다.

const users = [
    { name: 'John', age: 25 },
    { name: 'Jane', age: 22 },
    { name: 'Mike', age: 32 }
];

// 이름을 기준으로 알파벳 순 정렬
users.sort((a, b) => a.name.localeCompare(b.name));
console.log(users);
// 결과: [{ name: 'Jane', age: 22 }, { name: 'John', age: 25 }, { name: 'Mike', age: 32 }]

localeCompare()를 사용하면 문자열 속성(이름)을 기준으로 객체 배열을 알파벳 순으로 정렬할 수 있습니다.

3. reverse(): 배열 순서 뒤집기

reverse() 메서드는 배열의 순서를 간단하게 뒤집습니다. 이미 정렬된 배열을 반대로 바꾸고 싶을 때 유용합니다.

const numbers = [1, 2, 3, 4, 5];

numbers.reverse();
console.log(numbers);  // 결과: [5, 4, 3, 2, 1]

위 예제에서는 배열의 순서를 뒤집어 내림차순으로 만듭니다. 정렬과 결합하여 사용할 수도 있습니다.

4. 다차원 배열 정렬

JavaScript에서는 다차원 배열(배열 안의 배열)을 정렬할 수도 있습니다. 비교 함수를 사용하여 내부 배열의 특정 요소를 기준으로 정렬할 수 있습니다.

const multiArray = [
    [1, 'banana'],
    [3, 'apple'],
    [2, 'cherry']
];

// 첫 번째 요소를 기준으로 정렬
multiArray.sort((a, b) => a[0] - b[0]);
console.log(multiArray);
// 결과: [[1, 'banana'], [2, 'cherry'], [3, 'apple']]

위 예제에서는 다차원 배열의 첫 번째 요소를 기준으로 배열을 정렬했습니다. 다차원 배열에서도 원하는 기준을 설정하여 정렬할 수 있습니다.

5. 커스텀 정렬 함수 작성

상황에 따라 기본 정렬 방법 외에 특정 기준에 맞춘 커스텀 정렬이 필요할 수 있습니다. 예를 들어, 문자열 배열을 길이 순으로 정렬하거나, 복잡한 조건을 기반으로 객체 배열을 정렬할 수 있습니다.

const words = ['apple', 'banana', 'cherry', 'date'];

// 문자열 길이를 기준으로 정렬
words.sort((a, b) => a.length - b.length);
console.log(words);  // 결과: ['date', 'apple', 'banana', 'cherry']

위 예제에서는 문자열 배열을 문자열 길이에 따라 정렬했습니다. 이처럼 특정 조건에 맞춘 정렬을 위해 커스텀 비교 함수를 작성할 수 있습니다.

결론

JavaScript에서 배열을 정렬하는 방법은 매우 다양하며, 상황에 맞게 sort(), reverse() 등의 메서드를 활용할 수 있습니다. 문자열, 숫자, 객체 배열을 기준에 맞춰 정렬할 수 있고, 필요한 경우 커스텀 비교 함수를 작성해 더욱 복잡한 정렬을 구현할 수 있습니다. 배열 정렬은 데이터를 효율적으로 관리하고 처리하는 데 중요한 도구이므로, 이를 잘 활용해 프로젝트에서 필요한 기능을 구현해보세요!