자바스크립트 배열 정렬 방법과 실전 예제

자바스크립트의 배열 정렬 기능은 웹 개발에서 매우 중요한 역할을 합니다. 배열에 담긴 값들을 특정한 순서로 나열할 수 있는 이 기능은 데이터 처리 시 유용하게 활용되죠. 이번 포스팅에서는 자바스크립트에서 배열을 정렬하는 다양한 방법에 대해 다루어 보겠습니다.

1. 기본적인 배열 정렬 방법

자바스크립트에서 배열을 정렬하려면 sort() 메소드를 사용합니다. 기본적으로 이 메소드는 배열의 요소를 문자열로 변환한 후, 유니코드 값에 따라 정렬하게 됩니다. 예를 들어, 단순한 문자열 배열을 정렬하는 것은 다음과 같이 간단합니다:

const fruits = ["banana", "apple", "orange", "kiwi"];
fruits.sort();
console.log(fruits); // ["apple", "banana", "kiwi", "orange"]

이렇게 하면 배 fruit 요소들이 알파벳 순서로 정렬됩니다. 하지만 숫자 배열을 정렬할 때는 주의가 필요합니다. 기본적으로는 문자열로 비교하기 때문에 예상과 다른 결과를 얻을 수 있습니다.

예시: 숫자 배열 정렬의 문제점

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

위와 같은 결과가 나오는 이유는 숫자가 문자열로 변환되어 유니코드 기준으로 정렬되기 때문입니다. 따라서 숫자 배열을 올바르게 정렬하려면 비교 함수를 전달해야 합니다.

2. 숫자 배열 정렬하기

정확한 숫자 정렬을 위해 sort() 메소드에 비교 함수를 사용해야 합니다. 다음은 오름차순으로 정렬하는 방법입니다:

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

위의 코드에서 비교 함수 (a, b) => a – b는 배열의 값들을 숫자로 비교하여 정렬합니다. 만약 내림차순으로 정렬하고 싶다면, 비교 함수의 위치를 바꾸면 됩니다:

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

3. 문자열 배열의 정렬

문자열 배열을 알파벳 순서로 정렬하는 것은 매우 간단합니다. 하지만 대소문자를 구분하지 않고 정렬하고 싶을 경우 toLowerCase() 혹은 toUpperCase() 메소드를 활용해야 합니다:

const mixedCase = ["banana", "Apple", "orange", "Kiwi"];
mixedCase.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
console.log(mixedCase); // ["Apple", "banana", "Kiwi", "orange"]

이렇게 하면 대소문자에 관계없이 정렬이 가능해집니다.

4. 객체 배열 정렬하기

자바스크립트에서 객체의 배열을 정렬할 때도 sort() 메소드를 사용할 수 있습니다. 객체의 특정 속성을 기준으로 정렬하는 경우, 비교 함수에서 해당 속성을 참조해야 합니다:

const employees = [
  { name: "Alice", age: 35 },
  { name: "Bob", age: 25 },
  { name: "Charlie", age: 30 }
];
employees.sort((a, b) => a.age - b.age);
console.log(employees);
// [{ name: "Bob", age: 25 }, { name: "Charlie", age: 30 }, { name: "Alice", age: 35 }]

5. 원본 배열 유지하기

정렬을 진행하면 원본 배열이 변형된다는 점 또한 알두어야 합니다. 원본 배열을 보존하면서 정렬 결과를 얻고 싶다면 slice() 메소드를 사용하여 배열을 복사한 후 정렬을 적용하면 됩니다:

const scores = [90, 70, 80, 100];
const sortedScores = scores.slice().sort((a, b) => a - b);
console.log(scores); // [90, 70, 80, 100]
console.log(sortedScores); // [70, 80, 90, 100]

6. 정렬의 한계와 주의점

자바스크립트의 sort() 메소드는 유니코드 코드 포인트를 기준으로 정렬하므로, 특정한 경우에 올바른 결과를 도출하지 못할 수 있습니다. 특히, 비ASCII 문자나 전문적인 요구 사항이 있는 경우는 더욱 더 주의해야 합니다.

• 비교 함수를 활용하여 원하는 정렬 방식을 지정하는 것을 잊지 마세요.
• 대소문자 구분이 필요할 경우, toLowerCase() 또는 toUpperCase()를 통해 처리하세요.
• 원본 데이터의 보존이 필요하다면 배열을 복사한 후 정렬하세요.

결론

자바스크립트에서 배열을 정렬하는 방법은 여러 가지가 있으며, 각각의 방법은 특정 상황에 더 적합할 수 있습니다. 기본적인 정렬 방법 외에도 비교 함수를 이용해 숫자, 문자열, 객체 등을 적절하게 정렬하는 것이 중요합니다. 이러한 기법을 통해 여러분의 프로그래밍 능력을 한층 더 끌어올릴 수 있을 것입니다.

자주 찾으시는 질문 FAQ