JavaScript에서 객체 배열을 정렬하는 방법

Source: Dev.to

객체 배열을 정렬하는 일은 JavaScript 작업을 하다 보면 꽤 자주 마주하게 됩니다. 이는 주로 테이블, 리스트, 혹은 API에서 받아오는 데이터와 관련될 때 발생합니다.

대부분의 애플리케이션에서 데이터는 원하는 순서대로 오지 않습니다. API 응답, 데이터베이스 결과, 혹은 사용자가 만든 콘텐츠는 보통 정렬되지 않은 상태이기 때문에 화면에 표시하기 전에 직접 정렬을 해줘야 합니다. 정렬은 테이블 행을 렌더링하거나, 제품을 이름이나 가격 순으로 나열하거나, 사용자를 알파벳 순으로 보여줄 때 특히 유용합니다. 올바른 순서와 같은 작은 디테일이 UI를 훨씬 사용하기 쉽게 만들고, 버그를 예방하는 데 도움이 됩니다.

sort() 메서드

JavaScript의 Array.prototype.sort() 메서드는 배열의 요소 순서를 재배열합니다. 객체를 정렬할 때는 두 항목을 어떻게 비교할지 알려주는 비교 함수를 제공해야 합니다.

비교 함수는 두 요소를 받아서 다음 값을 반환합니다:

• 음수 → a가 b보다 먼저 온다
• 양수 → b가 a보다 먼저 온다
• 0 → 순서가 바뀌지 않는다

array.sort((a, b) => {
  // return negative, positive, or 0
});

Note: sort()는 원본 배열을 변형합니다. 이는 특히 상태(state)나 재사용되는 데이터를 다룰 때 사람들을 당황하게 만들곤 합니다.

대부분의 경우 객체 자체를 직접 정렬하지는 않습니다. 대신 이름, 가격, 날짜와 같은 속성을 기준으로 정렬합니다.

문자열 속성으로 정렬하기

이름, 제목, 라벨 등을 다룰 때 흔히 사용됩니다.

기본 문자열 정렬

users.sort((a, b) => a.name.localeCompare(b.name));

대소문자 구분 없이 정렬

users.sort((a, b) =>
  a.name.toLowerCase().localeCompare(b.name.toLowerCase())
);

내림차순 정렬

users.sort((a, b) => b.name.localeCompare(a.name));

localeCompare()를 사용하는 것이 수동 문자열 비교보다 일반적으로 더 안전하며 일관된 결과를 제공합니다.

숫자 및 날짜 속성으로 정렬하기

숫자 정렬

products.sort((a, b) => a.price - b.price);

날짜 문자열 정렬

비교하기 전에 날짜 문자열을 Date 객체로 변환합니다:

events.sort((a, b) => new Date(a.date) - new Date(b.date));

이는 단순 문자열 비교로 인해 발생할 수 있는 잘못된 순서를 방지합니다.

재사용 가능한 정렬 헬퍼

각 필드마다 새로운 비교 함수를 작성하는 것은 반복적일 수 있습니다. 작은 유틸리티 함수를 만들면 과정을 단순화할 수 있습니다:

function sortBy(key, order = "asc") {
  return (a, b) => {
    if (typeof a[key] === "string") {
      return order === "asc"
        ? a[key].localeCompare(b[key])
        : b[key].localeCompare(a[key]);
    }
    // Assume numeric or Date values
    return order === "asc"
      ? a[key] - b[key]
      : b[key] - a[key];
  };
}

사용 예시

users.sort(sortBy("name"));
products.sort(sortBy("price", "desc"));

원본 배열을 그대로 유지해야 할 경우:

const sortedUsers = [...users].sort(sortBy("name"));

기억해야 할 사항

• 원본 배열을 변형하지 않도록 해야 할 때가 있다면 복사본을 사용하세요.
• 문자열 정렬에는 localeCompare()를 선호하고, 직접 로직을 구현하지 마세요.
• 누락되었거나 undefined인 값을 부드럽게 처리해 런타임 오류를 방지하세요.
• 혼합 타입(예: 문자열로 저장된 숫자)에 주의하고, 비교하기 전에 타입을 일관되게 맞추세요.

결론

객체 배열 정렬은 JavaScript 작업의 일상적인 부분입니다. sort()와 비교 함수가 어떻게 동작하는지 이해하면 대부분의 경우를 손쉽게 처리할 수 있습니다. 간단한 경우에는 직접 sort() 호출만으로 충분하고, 프로젝트가 커지면 재사용 가능한 정렬 헬퍼를 만들어 코드 가독성과 유지보수성을 높일 수 있습니다. 이렇게 하면 복잡하게 만들 필요 없이 실제 데이터를 효율적으로 다룰 수 있습니다.