JavaScript의 Array.prototype.sort() 메서드는 배열의 요소를 정렬하기 위해 사용되는 대표적인 내장 메서드입니다. 정렬 순서는 알파벳순, 숫자순으로 지정할 수 있으며, 오름차순과 내림차순 모두 지원합니다.
Array.prototype.sort() 메서드란?
sort() 메서드는 배열의 요소를 제자리(in-place)에서 정렬한 뒤, 정렬된 배열을 반환합니다. 주의할 점은 비교 함수 없이 호출할 경우 모든 요소를 문자열로 변환한 후 유니코드 코드 포인트 순서에 따라 정렬한다는 것입니다. 따라서 숫자 배열을 정렬할 때는 의도와 다른 결과가 나올 수 있으므로 각별히 주의해야 합니다.
예제 코드
다음은 Array.prototype.sort() 메서드의 기본적인 사용 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample,.result {
font-size: 18px;
font-weight: 500;
color: red;
}
.result {
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>JavaScript Array.prototype.sort() method</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to sort the array above</h3>
<script>
let sampleEle = document.querySelector(".sample");
let resultEle = document.querySelector(".result");
let arr = [9, 1, 4, 2, 99, 11, 22];
sampleEle.innerHTML = "Unsorted array = " + arr;
document.querySelector(".Btn").addEventListener("click", () => {
resultEle.innerHTML = "Sorted array = " + arr.sort();
});
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 아래와 같은 화면이 표시됩니다.
'CLICK HERE' 버튼을 클릭하면 정렬된 배열의 결과를 확인할 수 있습니다.
숫자 정렬 시 주의사항
위 예제에서 [9, 1, 4, 2, 99, 11, 22] 배열에 sort()를 그대로 적용하면 [1, 11, 2, 22, 4, 9, 99]와 같이 문자열 기준으로 정렬됩니다. 숫자를 크기순으로 올바르게 정렬하려면 반드시 비교 함수(compare function)를 전달해야 합니다.
let arr = [9, 1, 4, 2, 99, 11, 22]; // 오름차순 정렬 arr.sort((a, b) => a - b); // [1, 2, 4, 9, 11, 22, 99] // 내림차순 정렬 arr.sort((a, b) => b - a); // [99, 22, 11, 9, 4, 2, 1]
비교 함수가 음수를 반환하면 a가 b보다 앞에, 양수를 반환하면 b가 a보다 앞에 위치하게 됩니다. 이 규칙만 이해하면 객체 배열 정렬 등 다양한 상황에서도 자유롭게 활용할 수 있습니다.