[JS] 배열을 비교, 정렬하는 방법 | sort 메서드

sort() 메서드란?

sort 메서드는 자바스크립트 배열 요소를 정렬하는 데 사용되는 내장 메서드입니다. 배열을 정렬하여 요소들을 원하는 순서로 재배치할 수 있습니다.

 

특징

- 배열의 요소를 문자열로 캐스팅(형변환)한 후 변환된 문자열을 비교하여 순서를 결정합니다. 이는 문자열로 변환된 각 요소를 비교하여 정렬하는 것을 의미합니다.

- sort 메서드는 비교 함수를 선택적으로 인수로 받을 수 있습니다. 비교 함수는 두 개의 요소를 인수로 받고 비교 결과에 따라 순서를 결정하는 값을 반환해야 합니다.

(아래의 예시 참고!)

 

활용

(1) 비교 정렬

비교대상이 숫자인 경우 : 

오름차순

작은 숫자부터 큰 숫자로의 정렬 

Ex) 1 > 2 > 3 > 4 (작은 수가 맨앞에 위치!)

// 숫자값 배열
const numbers = [10, 5, 8, 2, 3];

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

console.log(numbers);
// 출력: [2, 3, 5, 8, 10]

 

내림차순

큰 숫자부터 작은 숫자로의 정렬

Ex) 4 > 3 > 2 > 1 (큰 수가 맨에 위치!)

// 숫자값 배열
const numbers = [10, 5, 8, 2, 3];

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

console.log(numbers);
// 출력: [10, 8, 5, 3, 2]

---

비교대상이 문자인 경우 :  자료형이 문자인 경우 빼기 비교가 안되기 때문에 비교연산 사용

오름차순

작은 자음부터 큰 자음으로의 정렬 

Ex) 가>나>다 순으로 비교 (작은 자음이 맨 앞에 위치!)

 

내림차순

큰 자음부터 작은 자음으로의 정렬

Ex) 다>나>가 순으로 비교 (큰 자음이 맨 앞에 위치!)

// 문자값 배열
const org_num2 = ["파", "타", "하", "가", "바", "사", "다", "라", "차"];

// 문자데이터 배열 화면 출력
const newArray2 = (obj) => {
    let temp = obj.map((x) => `<span>${x}</span>`);
    document.querySelector(".showNum2").innerHTML = temp.join("");
};

// 최초호출
newArray2(org_num2);

// 대상 요소
<select name="sel2" id="sel2" class="sel2">
    <option value="0">정렬선택</option>
    <option value="1">오름차순</option>
    <option value="2">내림차순</option>
</select>

// 선택박스 정렬변경 이벤트함수 만들기
document.querySelector(".sel2").onchange = (e) => {
    //  선택값확인
    let opt = e.target.value;
    console.log(opt);

    if (opt == 1) { // 오름차순
        org_num2.sort(function (x, y) {

            // 문자는 빼기 연산으로 정렬못함!
            return x == y ? 0 : x > y ? 1 : -1;
        });
    } else if (opt == 2) { // 내림차순
        org_num2.sort(function (x, y) {

            // 문자는 빼기 연산으로 정렬못함!
            return x == y ? 0 : x > y ? -1 : 1;
        });
    }

    // 화면에 반영하기(sort후엔 배열자체가 바뀜!)
    newArray2(org_num2);
}; ///////////// change ///////////////

 

위 코드에서 return x == y ? 0 : x > y ? 1 : -1 의 의미는 오름차순으로 정렬하기 위한 비교 함수를 의미하고,
비교 함수는 두 개의 인수(x와 y)를 받고, x와 y의 상대적인 순서를 나타내는 값을 반환해야 합니다.

반환 값이 0보다 작은 경우 x를 y보다 앞에 위치시키고, 0보다 큰 경우 x를 y보다 뒤에 위치시킵니다. 반환 값이 0인 경우에는 순서를 변경하지 않습니다.

즉, 정리하자면 다음 의미를 갖습니다.

x == y 인 경우에는 0을 반환하여 순서를 변경하지 않습니다.

x > y 인 경우에는 1을 반환하여 x를 y보다 뒤에 위치시킵니다.

x < y 인 경우에는 -1을 반환하여 x를 y보다 앞에 위치시킵니다.

 

이렇게 함으로써 org_num2 배열을 오름차순으로 정렬할 수 있습니다.

 

반대로 return x == y ? 0 : x > y ? -1 : 1 는 내림차순으로 정렬하기 위한 비교 함수를 의미하고,

x가 y보다 큰 경우 -1을 반환하라 했으니 x를 y 앞에 위치시킵니다. 

일반적인 숫자의 계산에서 음수~양수 개념을 생각하면 쉽게 접근할 수 있을듯합니다.

일반적으로 숫자는 -2, -1, 0, 1, 2, 3 이렇게 음수에 가까운 수일수록 앞에 위치하고, 큰 양수의 수일수록 뒤에 위치하니까요!

 

(2) 단순 정렬

(2-1) 배열값이 1자리 숫자인 경우

다음같이 1~5 배열 숫자를 기본 정렬 방식인 오름차순 정렬 해준다.

let arr = [1, 5, 4, 2, 3];

arr.sort();
console.log(arr); // [1, 2, 3, 4, 5]

 

(2-2) 배열값이 문자인 경우

1과 마찬가지로 이 역시 오름차순(알파벳 순서대로) 정렬된다.

let arr = ["a", "c", "d", "e", "b"];

arr.sort();
console.log(arr); // ["a", "b", "c", "d", "e"]

 

(2-3) 배열값이 2자리 숫자인 경우

그럼 2자리 숫자인 경우는 어떨까? 이 경우 뒤죽박죽 정렬되는 것을 볼 수 있다.

이는 정렬했을 때 요소를 문자열로 캐스팅(형변환)한 후 변환된 문자열을 비교하여 순서를 결정하기 때문이다.

그래서 1, 2가 앞에 붙은 13, 27 순으로 정렬된 것을 볼 수 있다.

let arr = [27, 8, 5, 13];

arr.sort();
console.log(arr); // [13, 27, 5, 8]

 

그럼 제대로 정렬하려면 어떻게 해야할까?바로 위 1의 예제처럼 값을 비교해줄 수 있는 함수를 전달해주면 된다.

let arr = [27, 8, 5, 13];

function fn(a, b) {
	return a - b;
}

arr.sort();
console.log(arr); // [5, 8, 13, 27]