JavaScript 배열 정렬 완벽 가이드: sort()와 reverse() 활용법

JavaScript에서는 sort() 메서드를 사용해 배열을 정렬할 수 있습니다. sort() 메서드는 배열의 값을 오름차순으로 정렬하며, 원본 배열 자체를 직접 수정합니다(in-place 정렬). 즉, 새로운 배열을 생성하지 않습니다.

배열을 특정 순서로 정렬해야 하는 경우가 종종 있습니다. 예를 들어, 이름 목록을 사용자에게 알파벳순으로 보여주고 싶을 수 있죠.

정렬 목적에 따라 활용할 수 있는 JavaScript 내장 함수는 다양합니다. sort() 함수로 알파벳순 정렬을, reverse() 함수로 배열의 순서를 뒤집을 수 있고, 비교 함수를 함께 전달하면 사용자 지정 정렬도 구현할 수 있습니다.

이 글에서는 sort()와 reverse()를 활용해 JavaScript에서 배열을 정렬하는 방법을 하나씩 살펴보겠습니다.

JavaScript sort() 메서드란?

sort() 메서드는 배열의 값을 읽어 오름차순 또는 내림차순으로 정렬된 결과를 반환합니다. 숫자나 문자열이 담긴 배열 모두 정렬할 수 있습니다.

기본 문법은 다음과 같습니다.

const values = [1, 2, 8, 9, 3];
values.sort();

이 코드는 'values' 배열을 정렬합니다. 정렬은 원본 배열에서 직접 이루어지며, 원본 배열의 순서가 변경됩니다. sort()는 새로운 배열을 만들지 않는다는 점에 유의하세요.

또한 sort()의 실행 결과를 새 변수에 할당하더라도 원본 배열은 여전히 변경됩니다. 새 변수에는 정렬된 배열의 참조만 저장되기 때문입니다. 원본 배열을 그대로 유지하고 싶다면, 스프레드 연산자를 활용한 [...array].sort()처럼 복사본을 정렬하는 방식을 사용하는 것이 좋습니다.

알파벳순 정렬 예제

가장 단순한 형태의 sort()는 문자열 요소를 알파벳 오름차순으로 정렬합니다. 다음 예제를 살펴보겠습니다.

var students = ['Alex', 'Cathy', 'Lincoln', 'Jeff'];
var sorted_students = students.sort();

console.log(sorted_students);

코드 실행 결과는 다음과 같습니다.

["Alex", "Cathy", "Jeff", "Lincoln"]

배열이 오름차순으로 정렬되었습니다. sort() 메서드로 'students' 배열을 정렬한 뒤, 그 결과를 콘솔에 출력했습니다.

숫자 배열 정렬하기

sort() 메서드는 숫자 배열을 오름차순으로 정렬할 때도 사용할 수 있습니다.

예를 들어, 학생 성적 목록을 오름차순으로 정렬한다고 가정해 봅시다. 다음과 같이 작성할 수 있습니다.

var grades = [67, 75, 62, 78];
grades.sort();

console.log(grades);

출력 결과는 다음과 같습니다.

[62, 67, 75, 78]

배열이 오름차순으로 성공적으로 정렬되었습니다. sort()가 원본 배열을 직접 정렬하기 때문에 결과를 새 변수에 할당하지 않아도 됩니다.

다만 주의할 점이 있습니다. 기본 sort()는 요소를 문자열로 변환한 뒤 비교하기 때문에, 숫자 배열에서 의도치 않은 결과가 나올 수 있습니다. 예를 들어 [1, 10, 100, 2]는 [1, 10, 100, 2] 순서로 정렬되어 버립니다. 숫자를 정확하게 정렬하려면 아래처럼 비교 함수를 전달하는 것이 안전합니다.

grades.sort(function(a, b) {
  return a - b;
});

객체 배열 정렬하기

sort() 메서드는 객체 배열 정렬에도 활용할 수 있습니다. 예를 들어, 학생의 이름과 나이를 함께 담고 있는 JSON 객체 배열이 있다고 해봅시다.

학생들을 나이순으로 정렬하는 sort() 함수의 예제입니다.

var students = [
	{ name: "Alex", age: 16 },
	{ name: "Cathy", age: 14 },
	{ name: "Lincoln", age: 14 },
	{ name: "Jeff", age: 15 }
];

var sorted_students = students.sort(function(a, b) {
	return a.age - b.age;
});

console.log(sorted_students);

실행 결과는 다음과 같습니다.

[
  { name: "Cathy", age: 14 },
  { name: "Lincoln", age: 14 },
  { name: "Jeff", age: 15 },
  { name: "Alex", age: 16 }
]

JSON 객체 배열이 학생 나이순으로 정렬되었습니다.

먼저 네 명의 학생 정보를 담은 'students' 변수를 선언합니다. 그다음 각 객체의 'age' 값을 비교해 배열을 정렬하는 함수를 만들고, 마지막으로 정렬된 학생 목록을 출력합니다.

비교 함수는 두 개의 매개변수(a, b)를 받으며, 반환값이 음수면 a가 앞에 오고, 양수면 b가 앞에 옵니다. 이 원리를 활용하면 이름, 점수 등 어떤 속성을 기준으로든 원하는 대로 정렬할 수 있습니다.

reverse()로 내림차순 정렬하기

JavaScript에는 배열의 순서를 뒤집는 reverse()라는 내장 함수도 있습니다.

reverse() 메서드는 첫 번째 요소를 마지막으로, 마지막 요소를 첫 번째로 이동시켜 배열 순서를 반전시킵니다. 주의할 점은, 이 메서드 자체는 알파벳 내림차순 '정렬'이 아니라 단순히 현재 순서를 거꾸로 뒤집는다는 것입니다.

따라서 내림차순 정렬을 원한다면, 먼저 sort()로 오름차순 정렬을 수행한 뒤 reverse()를 적용해야 합니다.

var students = ['Alex', 'Cathy', 'Lincoln', 'Jeff'];
students.sort();
var reversed_students = students.reverse();

console.log(reversed_students);

실행 결과는 다음과 같습니다.

["Lincoln", "Jeff", "Cathy", "Alex"]

먼저 sort()로 목록을 오름차순 정렬한 뒤 reverse()로 순서를 뒤집으면, 이름이 알파벳 내림차순으로 표시됩니다.

reverse() 함수도 sort()와 마찬가지로 원본 배열의 순서를 직접 변경합니다. 결과를 새 변수에 할당하더라도 원본 배열은 수정되므로, 원본을 유지해야 하는 경우에는 미리 복사본을 만들어두는 것이 좋습니다.

마무리

JavaScript의 sort() 메서드는 배열을 오름차순으로 정렬하며, 원본 배열을 직접 수정합니다(in-place). sort()로 정렬한 뒤 reverse()를 함께 사용하면 내림차순 정렬도 손쉽게 구현할 수 있습니다.

이번 글에서는 sort()를 사용해 JavaScript 배열을 정렬하는 방법을 살펴보았습니다. 문자열 배열과 숫자 배열의 정렬, 객체 배열의 정렬, 그리고 reverse()를 활용한 역순 정렬까지 예제와 함께 정리했으니, 실제 프로젝트에서 바로 활용해 보시기 바랍니다.