JS 정렬(sort) 방법

정렬이란?

 정렬은 특정한 규칙을 가지고 규칙에 맞게 한줄을 세우는 것으로 그 규칙이 오름차순(갈수록 높아지는), 내림차순(갈수록 낮아지는), 알파벳 순서(사전식) 등 다양하게 존재한다. 일반적인 정렬 방법은 for, while 과 같은 반복문을 통해서 정렬을 할 수 있지만 JS에는 ₩sort()₩ 라는 메서드가 존재한다. 

 

다양한 정렬 알고리즘을 보고 싶으면 아래의 링크 참조!

https://hankyul96.tistory.com/3

 

sort() 메서드

 JS의 sort() 메서드는 기본적으로 배열을 기반으로 하며 배열의 요소를 적절한 위치에 정렬한 후 배열을 반환한다. sort() 메서드는 stable sort 가 아닐 수 있고 정렬 순서는 정수 숫자가 아닌 유니코드 코드 포인트를 따른다.

 

let arr1 = [10,2,4,345,768];

console.log(arr.sort()); // [10,2,345,4,768] <- 정렬되지 않은 상태

 위의 예시처럼 정수들로 구성된 arr1 배열을 sort() 메서드를 통해 정렬을 하면 우리가 원하는 기대값인 [2,3,10,345,768] 이 아닌 엉뚱한 값이 나온다. 앞에서 언급한 것  처럼 유니코드 코드 포인트를 따르기 때문에 정수 배열에 사용이 불가능하다

 

let arr2 = ['apple', 'kiwi', 'banana', 'orange', 'airplane'];

console.log(arr2.sort()); // ["airplane","apple","banana","kiwi","orange"]

 위의 예시는 정수가 아닌 string 문자열의 배열들로 유니코드 값으로 정렬을 했을 때 알파벳순은 변하지 않기 때문에 결과값이 알파벳 순서대로 정렬되어 있음을 확인할 수 있다.

 

number를 정렬하는 방법

 JS에서 정수들로 이루어진 배열을 정렬하는 방법은 따로 존재한다. 바로 sort() 메서드 안에 함수를 지정하여 정수를 비교하면서 정렬하게끔 만들어주는 것이다. 

 

let arr1 = [10,2,4,345,768];

let arr2 = arr1.sort((a,b) => {
	return a-b;
});

console.log(arr2); // [2,4,10,345,768]

 여기서 a,b가 말하는 것은 비교하고자 하는 두 정수 파라미터를 의미하고 해당 화살표 함수가 리턴하는 값이 0보다 작은 경우 a가 b보다 앞에 오도록 설정하고 0보다 큰 경우 b가 a보다 앞에 오도록 정렬하는 것이다. 0을 리턴하면 a와 b는 동일한 것으로 취급하여 변경하지 않는다. 

 즉 sort() 괄호 안에 있는 함수의 결과값에 따라 비교하는 대상의 위치를 변경하면서 정렬이 되는 것이다. a-b는 오름차순이 되고 반대로 b-a는 내림차순이 된다. 

 

해당 방법은 object 정렬하는데도 사용되며 2차원배열의 각각 파라미터에도 적용된다.

 

object(객체) 정렬하는 방법

 앞에서 언근한 것처럼 object 또한 정수를 정렬하는 방법과 같이 활용되며 상세한 설명 보다 코드의 이해가 빠를 것 같아 예시 코드를 참고하면 된다.

 

const arr = [
	{name: 'Andy', age: 25},
    {name: 'Brice', age: 20},
    {name: 'Michael', age: 31}
];

const arr1 = arr.sort((a,b) => {
	return a.age - b.age;
});

console.log(arr1);
    // {"name: "Brice", "age": 20},
    // {"name: "Andy", "age": 25},
    // {"name: "Michael", "age": 31},
    

 

Summary

- 알파벳 상 정렬 원하는 경우 -> sort() 메서드 사용

- 정수의 정렬을 원하는 경우 -> sort(함수) 메서드를 사용하여 함수를 조정하면서 오름차순, 내림차순을 결정해준다

- object의 정렬 원하는 경우 -> 정수와 동일하게 사용하여 원하는 object 값으로 함수를 생성하여 결정해준다

 

Ref

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort