Blog

자바스크립트 배열 정렬: 기본 개념과 방법

배열은 자바스크립트에서 데이터를 다룰 때 매우 중요한 구조입니다. 배열의 요소들을 정렬하는 것은 다양한 형태의 데이터 처리 및 알고리즘에서 자주 필요하게 됩니다. 자바스크립트에서는 이러한 정렬을 수행하기 위해 sort()와 toSorted()와 같은 내장 함수를 이용할 수 있습니다. 이 글에서는 배열 정렬의 기본적인 방법과 함께, 정렬을 수행할 때 주의해야 할 점들을 알아보도록 하겠습니다.

배열의 sort() 함수

sort() 함수는 자바스크립트에서 가장 많이 사용되는 배열 정렬 함수입니다. 이 함수를 호출하면 특정 배열의 요소들이 오름차순으로 정렬됩니다. 기본적으로 sort()는 유니코드 코드 포인트를 기준으로 정렬하므로, 문자열로 변환된 후 비교를 진행합니다. 예를 들어, 다음의 코드처럼 사용됩니다:

const numbers = [3, 1, 2];
numbers.sort(); // 결과: [1, 2, 3]

위의 예에서 보듯이, sort()는 원본 배열을 직접 수정하며, 정렬된 배열을 반환합니다. 하지만 숫자 배열의 경우, 문자열로 변환된 뒤 비교가 이루어지므로 주의가 필요합니다.

숫자 배열 정렬의 주의사항

만약 숫자로 이루어진 배열을 정렬하려고 할 때, 단순히 sort() 메소드를 사용하면 예상치 못한 결과가 발생할 수 있습니다. 예를 들어, 다음과 같이 숫자를 정렬했을 때, 문자열 변환으로 인해 올바르지 않은 순서로 배열이 정렬됩니다:

const arr = [100, 3, 1, 20];
arr.sort(); // 결과: [1, 100, 20, 3]

따라서 숫자 배열의 경우, 비교 함수를 제공해야 하며, 이를 통해 두 요소의 크기를 비교하는 방식으로 정렬하게 됩니다. 다음의 코드와 같이 작성할 수 있습니다:

const arr = [100, 3, 1, 20];
arr.sort((a, b) => a - b); // 결과: [1, 3, 20, 100]

문자열과 객체 배열 정렬하기

배열 내에 문자열이 포함된 경우, sort() 메소드는 기본적으로 알파벳 순서로 정렬합니다. 예를 들어:

const fruits = ['banana', 'apple', 'kiwi'];
fruits.sort(); // 결과: ['apple', 'banana', 'kiwi']

그러나 문자열 정렬 시 대소문자가 영향을 미치므로, 이를 고려해야 합니다. 대문자가 소문자보다 먼저 정렬됩니다.

또한, 객체로 이루어진 배열을 정렬할 때는, 객체의 특정 속성을 기준으로 정렬해야 합니다. 예를 들어, 다음과 같이 사용합니다:

const users = [
  { name: "B", age: 30 },
  { name: "A", age: 25 },
  { name: "C", age: 20 }
];
users.sort((a, b) => a.name.localeCompare(b.name)); 
// 결과: [{ name: "A", age: 25 }, { name: "B", age: 30 }, { name: "C", age: 20 }]

다수의 기준으로 정렬하기

실제 애플리케이션에서 배열의 요소를 특정 기준으로 두 번 이상 정렬할 필요가 있을 때, 이를 위한 방법이 있습니다. 예를 들어 성별과 나이를 기준으로 정렬하고자 한다면 다음과 같이 구현할 수 있습니다:

const users = [
  { name: "Greg", gender: "M", age: 30 },
  { name: "Alice", gender: "F", age: 25 },
  { name: "Bob", gender: "M", age: 35 },
  { name: "Clara", gender: "F", age: 20 }
];
users.sort((a, b) => {
  if (a.gender === b.gender) {
    return a.age - b.age;
  }
  return a.gender.localeCompare(b.gender);
}); 
// 성별로 우선 정렬 후 나이로 정렬

원본 배열 보존하기

일반적으로 sort() 메소드는 원본 배열을 직접 수정하기 때문에, 원본 배열을 유지하고 싶다면 배열을 복사한 후 정렬해야 합니다. 복사 방법으로는 slice()를 사용하거나 스프레드 연산자(...)를 이용할 수 있습니다:

const originalArray = [1, 4, 3, 2];
const sortedArray = [...originalArray].sort((a, b) => a - b);
// 기존 배열은 유지됩니다.

결론

자바스크립트에서는 배열 정렬을 위해 sort() 함수를 주로 사용하며, 이를 통해 다양한 데이터 타입과 구조의 배열을 유연하게 정렬할 수 있습니다. 정렬 시 문자열과 숫자 배열에 대한 특성을 이해하고, 객체 배열 정렬 시 적절한 기준을 설정하는 것이 중요합니다. 이러한 이해를 바탕으로 실용적이고 정확한 데이터 처리를 수행할 수 있을 것입니다.

자주 찾는 질문 Q&A