[자바스크립트] sort()를 활용해서 배열 정렬하기 (사용법, 예제)

아래 소스코드는 sort() 메서드를 활용해서 배열을 오름차순, 내림차순으로 정렬하는 코드입니다. 버튼 클릭 이벤트를 통해서 배열이 정렬되고 정렬된 결과가 페이지에 표시됩니다.

 

사용법

ㅇ sort() 메서드는 배열을 정렬하는 데 사용됩니다.
ㅇ 배열의 요소를 문자열로 변환하고 이를 유니코드 코드 포인트 값에 따라 정렬합니다.
ㅇ 숫자 배열을 올바르게 정렬하려면 비교 함수를 사용해야 합니다. 비교 함수는 두 개의 인수를 받고, 비교 결과에 따라 정렬 순서를 결정합니다.

 

 

var numbers = [10, 5, 8, 1, 7];
numbers.sort(function(a, b) {
    return a - b; // 오름차순 정렬
});

 

ㅇ compareFunction(a, b)이 0보다 작으면 a는 b보다 작은 것으로 간주되어 a가 b보다 앞에 나옵니다.
ㅇ compareFunction(a, b)이 0이면 a와 b는 같은 것으로 간주되어 순서가 변경되지 않습니다.
ㅇ compareFunction(a, b)이 0보다 크면 a는 b보다 큰 것으로 간주되어 a가 b보다 뒤에 나옵니다.

 

 

<button id="sortAscending">오름차순 정렬</button>
<button id="sortDescending">내림차순 정렬</button>

<p>정렬된 배열:</p>
<ul id="result"></ul>

<script>
	// 초기 숫자 배열
	var numbers = [10, 5, 8, 1, 7];

	// 정렬 결과를 표시할 ul 요소
	var resultElement = document.getElementById('result');
	
	// 정렬 함수
	function sortArray(compareFunction) {
		// 배열 복제
		var sortedNumbers = numbers.slice();
		
		// 배열 정렬
		sortedNumbers.sort(compareFunction);
		
		// 정렬 결과를 ul 요소에 추가
		resultElement.innerHTML = '';
		sortedNumbers.forEach(function(number) {
			var li = document.createElement('li');
			li.textContent = number;
			resultElement.appendChild(li);
		});
	}
	
	// 오름차순 버튼 클릭 시 정렬
	document.getElementById('sortAscending').addEventListener('click', function() {
		sortArray(function(a, b) {
			return a - b; // 오름차순 정렬
		});
	});
	
	// 내림차순 버튼 클릭 시 정렬
	document.getElementById('sortDescending').addEventListener('click', function() {
		sortArray(function(a, b) {
			return b - a; // 내림차순 정렬
		});
	});
	
	// 페이지 로드 시 초기 정렬 수행
	sortArray(function(a, b) {
		return a - b; // 초기에는 오름차순 정렬
	});
</script>

 

ㅇ sortArray() 함수는 배열을 정렬하고 결과를 표시하고 있습니다. 비교 함수 compareFunction을 매개변수로 받아서 배열을 정렬합니다.

 

 

오름차순 정렬

 

 

내림차순 정렬