자바스크립트 배열 정렬하는 방법

자바스크립트에서 배열을 정렬하는 방법에 대해 알아보도록 하겠습니다. 배열 정렬은 매우 중요한 작업으로, 데이터의 순서를 필요에 맞춰 조정하는 데에 필수적입니다. 자바스크립트에서는 내장 메서드인 sort()를 사용하여 배열을 쉽게 정렬할 수 있습니다. 이 메서드는 배열의 요소들을 유니코드 코드 포인트에 따라 기본적으로 오름차순으로 정렬합니다. 하지만 필요에 따라 사용자 정의 정렬 방식을 지정할 수도 있습니다.

기본적인 사용법

자바스크립트의 배열 정렬을 위한 방법은 매우 간단합니다. sort() 메서드를 호출하면 됩니다. 기본적으로 이 메서드는 배열의 각 요소를 유니코드 기준으로 비교하여 정렬합니다. 예를 들어, 문자열 배열을 정렬하는 경우, 각 단어가 사전 순으로 배열됩니다. 아래의 예제를 살펴보겠습니다.

const fruits = ["banana", "apple", "cherry"];
fruits.sort();
console.log(fruits); // 출력: ["apple", "banana", "cherry"]

위 예제에서는 sort() 메서드를 통해 과일 이름을 알파벳 순으로 정렬했습니다. 이처럼 기본적으로는 유니코드 값에 따라 정렬되므로, 특히 숫자가 포함된 배열에 대해서는 주의가 필요합니다.

숫자 배열 정렬

기본 정렬 방식이 문자열 기반이기 때문에, 숫자 배열을 정렬할 때는 약간의 주의가 필요합니다. 숫자를 문자열로 취급해서 정렬하기 때문에, 올바른 결과가 나오지 않을 수 있습니다. 예를 들어, 다음과 같은 배열이 있을 경우를 고려해보세요.

const numbers = [10, 2, 1, 22];
numbers.sort();
console.log(numbers); // 출력: [1, 10, 2, 22]

위 결과에서 보듯이, sort() 메서드는 10과 2를 문자열로 변환하여 비교하기 때문에, 10이 2보다 먼저 오는 이상한 결과를 초래합니다. 따라서 숫자 배열을 정렬할 때는 비교 함수를 제공해주어야 올바른 결과를 얻을 수 있습니다.

비교 함수 사용하기

비교 함수는 sort() 메서드의 매개변수로 전달되며, 두 개의 인수를 받아서 그 관계에 따라 정렬 순서를 결정합니다. 예를 들어, 아래와 같은 방식으로 오름차순 정렬을 구현할 수 있습니다.

const numbers = [10, 2, 1, 22];
numbers.sort((a, b) => a - b);
console.log(numbers); // 출력: [1, 2, 10, 22]

위 코드에서 볼 수 있듯이, a – b를 반환하는 비교 함수는 두 숫자의 차이를 계산하여 정렬을 수행합니다. 만약 내림차순으로 정렬하고자 한다면, 간단히 비교 함수의 반환값을 반대로 하면 됩니다.

const numbers = [10, 2, 1, 22];
numbers.sort((a, b) => b - a);
console.log(numbers); // 출력: [22, 10, 2, 1]

문자열 비교

문자열 배열을 정렬할 때, 대소문자를 구분하는 기본 정렬 방식은 필요에 따라 수정할 수 있습니다. 예를 들어 대소문자 구분 없이 정렬하고 싶다면, toLowerCase() 또는 toUpperCase() 메서드를 사용하여 모든 문자열을 동일한 상태로 변환할 수 있습니다.

const names = ["Alice", "bob", "Eve", "Dave"];
names.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
console.log(names); // 출력: ["Alice", "bob", "Dave", "Eve"]

객체 배열 정렬

자바스크립트에서는 객체 배열을 특정 속성을 기준으로 정렬하는 것도 가능합니다. 예를 들어, 객체 배열 중 가격을 기준으로 오름차순으로 정렬하는 방법은 다음과 같습니다.

const products = [
 { name: "Laptop", price: 1000 },
 { name: "Phone", price: 500 },
 { name: "Tablet", price: 300 },
];
products.sort((a, b) => a.price - b.price);
console.log(products);
/* 출력: [
 { name: "Tablet", price: 300 },
 { name: "Phone", price: 500 },
 { name: "Laptop", price: 1000 }
] */

위 예제에서는 price 속성을 기준으로 객체를 정렬했습니다. 이처럼 객체의 특정 속성을 기준으로 정렬할 수 있어, 다양한 활용이 가능합니다.

비어있는 요소 정렬

배열 내에 비어있는 요소가 포함된 경우, sort() 메서드는 비어있는 요소를 배열의 마지막으로 이동시킵니다. 이러한 특성을 잘 활용하면, 비어있는 요소를 쉽게 관리할 수 있습니다.

const mixedArray = ["가", "나", , "다"];
mixedArray.sort();
console.log(mixedArray); // 출력: ["가", "나", "다", 비어 있음]

결론

자바스크립트의 배열 정렬 기능은 매우 유용하며, 다양한 방식으로 활용할 수 있습니다. sort() 메서드를 사용하여 쉽게 배열을 정렬할 수 있지만, 정렬의 정확성을 위해 비교 함수를 적절히 사용하는 것이 중요합니다. 이 글을 통해 배열 정렬의 기본적인 개념과 활용 방법을 이해하셨기를 바랍니다. 이제 실제로 코드를 작성하면서 다양한 정렬 방식에 대해 실습해 보시는 것을 추천합니다.

자주 묻는 질문과 답변