[JS] sort()로 다중 조건 정렬

단일 조건 정렬

sort()는 배열의 정렬을 조건에 맞게 재정렬한 후 반환해 주는 메서드입니다. 원하는 조건대로 정렬하려면 sort() 안에 배열을 재정렬 해주는 조건을 넣어줘야 되는데, 단일 조건의 경우는 다음과 같이 사용할 수 있습니다.

배열 정렬 예시

const data = [1, 7, 3, 5, 8];

const asc = data.sort((a, b) => a - b);
// 오름차순 [1, 3, 5, 7, 8]

const desc = data.sort((a, b) => b - a);
// 내림차순 [8, 7, 5, 3, 1]

객체 배열 정렬 예시

const data = [
    {name: "계란", price: 1500},
    {name: "사과", price: 2000},
    {name: "양파", price: 1200},
    {name: "고기", price: 7200}
];

const priceFromLow = data.sort((a, b) => a.price - b.price);
// 가격이 싼 순서대로

const priceFromHigh = data.sort((a, b) => b.price - a.price);
// 가격이 비싼 순서대로

 

다중 조건 정렬

조건을 하나만 거는 경우만 있으면 아무런 문제도 없지만, 보통의 경우 목록은 여러개의 조건에 맞춰서 정렬됩니다. 예를 들어 아래와 같은 배열이 있다고 가정해 봅시다.

배열 예시

const data = [
    {name: "계란", price: 1500},
    {name: "사과", price: 1500},
    {name: "양파", price: 2000},
    {name: "고기", price: 2000}
];

계란과 사과의 가격이 같고, 고기와 양파의 가격이 같기 때문에, 단일 조건으로는 중복되는 값에 대한 대응을 할 수 없습니다. 이런 경우를 대응하기 위해 sort()에 OR 연산자를 사용해 여러 개의 조건을 걸 수 있습니다.

다중 조건 정렬 예시

const data = [
    {name: "계란", price: 1500},
    {name: "사과", price: 1500},
    {name: "양파", price: 2000},
    {name: "고기", price: 2000}
];

data.sort((a, b) => a.price - b.price || a.name.localeCompare(b.name));
// 가격이 낮은 순으로 정렬하고, 가격이 같으면 이름순으로 정렬

여기서 a.price - b.price의 값이 음수, 양수가 아닌 0이면, 그다음 조건인 이름순으로 배열의 순서를 판단합니다.

 

코드 풀이

data.sort((a, b) => 첫번째 조건 || 두번째 조건 || 세번째 조건);

• 순서대로 앞부분이 참이면 앞의 조건을 적용하고, 거짓이면 뒤의 조건으로 넘어갑니다.
• 조건은 앞과 뒤의 값을 비교할 수 있는 식을 사용해야 합니다.
• 숫자면 +, -를, 문자면 localeCompare()를 사용해서 비교합니다.
• 내림차순(ex. 비싼 가격 => 싼 가격)으로 정렬하려면 조건의 앞 뒤 순서를 바꿔주면 됩니다.

 

레퍼런스

• Array.prototype.sort() - JavaScript | MDN