자바스크립트 배열 정렬하는 다양한 방식

자바스크립트 배열 정렬의 기초

자바스크립트에서 배열을 정렬하는 작업은 개발자들이 빈번하게 진행하는 기본적인 기능 중 하나입니다. 배열에 포함된 데이터를 정렬하는 방법에는 여러 가지가 있지만, 그 중 가장 널리 알려진 방법은 sort() 메소드를 사용하는 것입니다. 이 메소드는 배열의 요소를 오름차순 또는 사용자가 정의한 기준에 맞춰 정렬할 수 있도록 도와줍니다.

sort() 메소드 이해하기

sort() 메소드는 배열을 정렬하는 데 사용하는 내장 함수입니다. 기본적으로 배열 요소는 문자열로 변환된 후 유니코드 코드 포인트에 따라 정렬됩니다. 따라서 숫자로 구성된 배열을 정렬할 때는 주의가 필요합니다. 예를 들면, 다음과 같은 숫자 배열이 있을 때:

const numbers = [100, 3, 1, 20];
numbers.sort(); // [1, 100, 20, 3]

이와 같이 예상하지 못한 결과를 얻을 수 있습니다. 이러한 현상은 sort()가 내부적으로 요소를 문자로 변환하여 정렬하기 때문입니다.

정렬 기준 함수 만들기

정확한 정렬을 원할 경우 sort() 함수에 콜백 함수를 전달하여 정렬 기준을 정의할 수 있습니다. 이 함수는 두 개의 인자를 받으며, 이들을 비교하여 다음과 같은 결과를 반환해야 합니다:

• 첫 번째 인자가 두 번째 인자보다 작으면 음수를 반환
• 첫 번째 인자가 두 번째 인자보다 크면 양수를 반환
• 두 인자가 같으면 0을 반환

예를 들어, 아래와 같이 숫자 배열을 오름차순으로 정렬할 수 있습니다:

const sortedNumbers = numbers.sort((a, b) => a - b);

그 결과는 [1, 3, 20, 100]이 됩니다.

문자열과 객체 배열 정렬

자바스크립트에서 배열을 정렬할 때 문자열과 객체의 경우도 고려해야 합니다. 문자열 배열은 알파벳 순으로 정렬되며, 대소문자를 구분합니다. 예를 들어:

const fruits = ["banana", "Apple", "orange"];
fruits.sort(); // ["Apple", "banana", "orange"]

객체 배열 정렬

객체가 포함된 배열을 정렬할 때는 특정 속성을 기준으로 정렬할 수 있습니다. 다음은 ‘name’ 속성을 기준으로 객체 배열을 정렬하는 예시입니다:

const countries = [
 { code: "KR", name: "Korea" },
 { code: "US", name: "United States" },
 { code: "CA", name: "Canada" },
];
countries.sort((a, b) => a.name.localeCompare(b.name));

이렇게 하면 국가 이름의 알파벳 순으로 정렬됩니다.

정렬 후 원본 배열 보존하기

기본적으로 sort() 메소드는 원본 배열을 직접 수정합니다. 원본 배열을 보존하고 싶다면, slice() 메소드를 사용하여 배열의 복사본을 생성한 뒤에 정렬하는 방법이 있습니다:

const originalArray = [3, 1, 2];
const sortedArray = originalArray.slice().sort((a, b) => a - b);

이렇게 하면 원본 배열인 originalArray는 변하지 않고, 정렬된 배열만 sortedArray에 저장됩니다.

다양한 정렬 기능 활용하기

자바스크립트에서 배열을 정렬하는 것은 매우 다양한 상황에서 필요합니다. 그 예로는 데이터 테이블에서 여러 항목을 정렬하거나 사용자 입력을 기반으로 데이터를 정렬하는 경우가 있습니다. 다음은 여러 기준을 동시에 적용한 정렬의 예시입니다:

const users = [
 { name: "Alice", age: 30, gender: "F" },
 { name: "Bob", age: 25, gender: "M" },
 { name: "Charlie", age: 25, gender: "M" },
];
users.sort((a, b) => {
 if (a.age === b.age) {
  return a.name.localeCompare(b.name);
 }
 return a.age - b.age;
});

위 코드는 나이를 기준으로 오름차순 정렬하고, 나이가 같을 경우에는 이름을 기준으로 정렬합니다.

결론

자바스크립트에선 배열을 정렬하는 방식이 매우 다양하며, 상황에 맞는 정렬 방법을 선택하는 것이 중요합니다. sort() 메소드를 통해 기본적인 정렬을 수행할 수 있지만, 추가적인 정렬 기준을 설정하거나 원본 배열을 변경하지 않도록 주의하는 것이 좋습니다. 이러한 기법을 통해 보다 효율적으로 배열을 다루며, 효과적인 웹 애플리케이션을 개발할 수 있습니다.

자주 묻는 질문 FAQ