JavaScript - 배열 안 객체 정렬

 

알고리즘 문제를 풀 때나 현업 프로젝트에서도 정렬은 거의 필연적으로 만나게 된다.

Javascript에서 이미 Array.prototype.sort 라는 메서드를 제공하긴 하지만 그리 간단한 정렬들만 만나기는 참 쉽지 않고 이 정렬 메서드는 굉장히 많은 활용성을 가지게 된다.

 

그 중 배열 안에 있는 객체의 대해서 정렬을 하는 다양한 방법을 소개해볼까 한다.

 

const items = [
  { name: 'Edward', score: 1 },
  { name: 'Sharpe', score: 2 },
  { name: 'And', score: 3 },
  { name: 'The', score: 3 },
  { name: 'Magnetic', score: 4 },
  { name: 'Zeros', score: 5 }
];

 

✌️ 객체 안 "name"을 통한 오름차순과 내림차순 정렬

---

items.sort(function(a, b) {
  var nameA = a.name.toUpperCase(); // ignore upper and lowercase
  var nameB = b.name.toUpperCase(); // ignore upper and lowercase
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }

  // 이름이 같을 경우
  return 0;
});

sort안에서 비교할 두 대상 a와 b를 먼저 대문자로 변경한다.

그 후 if문으로 비교를 통해 오름차순을 할지 내림차순을 할지 결정한다.

같은 문자라면 0을 반환해 그대로 유지한다.

 

✌️ 객체 안 "score"를 통한 오름차순과 내림차순 정렬

---

items.sort(function (a, b) {
  if (a.score > b.score) {
    return 1;
  }
  if (a.score < b.score) {
    return -1;
  }
  // 같은 값이면 0
  return 0;
});

숫자라면 오히려 쉽다. 따로 a, b의 값을 변환 하지 않고 값의 비교를 통해서 오름차순과 내림차순 정렬이 가능하다.

물론 같은 값이면 0을 반환한다.

 

✌️ 같은 "score"일 때 name을 기준으로 한 오름차순과 내림차순 정렬

---

items.sort((a, b) => {
  if (a.score === b.score) {
    const x = a.title.toUpperCase();
    const y = b.title.toUpperCase();
    return x < y ? -1 : x > y ? 1 : 0;
  }
  
  return b.score - a.score;
})}

sort 메서드를 사용하는데 있어 특별한 조건문을 사용하고 싶을 때 유용하다고 생각한다.

간혹 같은 값이 있을 때 그 값을 기준으로 다른 정렬을 하고 싶다면 같은 값일 때의 조건을 추가해주고 그 안에서 오름차순 내림차순 정렬을 해주면 된다.

 

위 예제는 많은 if문을 사용하지 않기 위해 마지막 return을 삼항연산자로 심플하게 정리해봤다.

score가 같을 때 오름차순 내림차순을 정렬하고 score가 같지 않다면 내림차순 또는 오름차순을 return해 주면 되겠다.

 

 

 

참조 : Array.prototype.sort() - JavaScript | MDN (mozilla.org)