객체를 요소로 갖고 있는 배열을 오름차순, 내림차순으로 정렬하는 방법에 대해서 알아보겠습니다.

문자열 배열이나, 숫자 배열은 각 요소 값들로 비교하여 정렬하면 되는데, 객체 배열은 객체가 다양한 값을 갖고 있기 때문에, 특정 값을 기준으로 정렬해야 합니다.

다른 배열 정렬 방법에 대해서 궁금하시다면, 문자열 배열 정렬과 숫자 배열 정렬을 참고해주세요.

1. 오름차순 정렬

아래 예제는 name과 score 값을 갖고 있는 객체 배열을 오름차순으로 정렬합니다.

먼저 score 속성을 기준으로 정렬하고, 그 다음에 name 속성으로 정렬합니다.

  • sort() 함수에는 객체 값을 비교하는 comparator 함수를 전달해야 함
  • 숫자 값들은 a.score - b.score 처럼 값의 차를 리턴하여 비교 정렬
  • 문자열 값들은 a.name.localeCompare(b.name)으로 비교 정렬
let students = [
  { name: "Alice", score: 85 },
  { name: "Bob", score: 92 },
  { name: "Charlie", score: 78 },
  { name: "David", score: 65 },
];

// 'score' 속성을 기준으로 오름차순으로 정렬
students.sort(function (a, b) {
  return a.score - b.score;
});
console.log(students);

// 'name' 속성을 기준으로 오름차순으로 정렬
students.sort(function (a, b) {
  return a.name.localeCompare(b.name);
});
console.log(students);

Output:

[
  { name: 'David', score: 65 },
  { name: 'Charlie', score: 78 },
  { name: 'Alice', score: 85 },
  { name: 'Bob', score: 92 }
]
[
  { name: 'Alice', score: 85 },
  { name: 'Bob', score: 92 },
  { name: 'Charlie', score: 78 },
  { name: 'David', score: 65 }
]

화살표 함수로 구현

화살표 함수를 사용하여 아래와 같이 간단히 구현할 수 있습니다.

let students = [
  { name: "Alice", score: 85 },
  { name: "Bob", score: 92 },
  { name: "Charlie", score: 78 },
  { name: "David", score: 65 },
];

// 'score' 속성을 기준으로 오름차순으로 정렬
students.sort((a, b) => a.score - b.score);
console.log(students);

// 'name' 속성을 기준으로 오름차순으로 정렬
students.sort((a, b) => a.name.localeCompare(b.name));
console.log(students);

2. 내림차순 정렬

내림차순으로 정렬하려면, sort()에 전달하는 comparator 함수를 반대로 비교하도록 변경하면 됩니다. 아래 코드를 보면, 비교 순서가 오름차순과 반대로 되어있습니다.

let students = [
  { name: "Alice", score: 85 },
  { name: "Bob", score: 92 },
  { name: "Charlie", score: 78 },
  { name: "David", score: 65 },
];

// 'score' 속성을 기준으로 내림차순으로 정렬
students.sort(function (a, b) {
  return b.score - a.score;
});
console.log(students);

// 'name' 속성을 기준으로 내림차순으로 정렬
students.sort(function (a, b) {
  return b.name.localeCompare(a.name);
});
console.log(students);

Output:

[
  { name: 'Bob', score: 92 },
  { name: 'Alice', score: 85 },
  { name: 'Charlie', score: 78 },
  { name: 'David', score: 65 }
]
[
  { name: 'David', score: 65 },
  { name: 'Charlie', score: 78 },
  { name: 'Bob', score: 92 },
  { name: 'Alice', score: 85 }
]

화살표 함수로 구현

화살표 함수를 사용하여 아래와 같이 간단히 구현할 수 있습니다.

let students = [
  { name: "Alice", score: 85 },
  { name: "Bob", score: 92 },
  { name: "Charlie", score: 78 },
  { name: "David", score: 65 },
];

// 'score' 속성을 기준으로 내림차순으로 정렬
students.sort((a, b) => b.score - a.score);
console.log(students);

// 'name' 속성을 기준으로 내림차순으로 정렬
students.sort((a, b) => b.name.localeCompare(a.name));
console.log(students);