Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript에서 flag 값 기준으로 배열 요소를 재정렬하는 방법

JavaScript로 개발하다 보면 객체 배열을 특정 조건에 따라 재정렬해야 하는 경우가 자주 있습니다. 이번 글에서는 flag 속성이 false인 요소를 배열 앞쪽으로 옮기되, 원래의 등장 순서는 그대로 유지하는 방법을 알아보겠습니다.

문제 상황

다음과 같은 객체 배열이 있다고 가정해 보겠습니다.

const arr = [
    {flag: true, other: 1},
    {flag: true, other: 2},
    {flag: false, other: 3},
    {flag: true, other: 4},
    {flag: true, other: 5},
    {flag: true, other: 6},
    {flag: false, other: 7}
];

여기서 우리가 작성해야 할 함수는 다음 조건에 따라 배열을 정렬해야 합니다.

  • arr.flag === false인 요소는 배열의 앞쪽으로 이동하며, 같은 조건을 만족하는 요소들끼리는 기존 순서를 유지합니다.
  • 조건에 해당하지 않는(flag가 true인) 요소들은 원래 순서 그대로 뒤쪽에 배치됩니다.
  • 요소의 등장 순서(안정성)가 매우 중요합니다.

따라서 위 배열에 이 함수를 적용하면 결과는 다음과 같아야 합니다.

const output = [
    {flag: false, other: 3},
    {flag: false, other: 7},
    {flag: true, other: 1},
    {flag: true, other: 2},
    {flag: true, other: 4},
    {flag: true, other: 5},
    {flag: true, other: 6}
];

해결 방법

이 문제는 JavaScript의 내장 메서드인 Array.prototype.sort()와 사용자 정의 비교 함수(comparator)를 활용하면 간단하게 해결할 수 있습니다. 비교 함수는 두 요소를 인자로 받아 다음 규칙에 따라 값을 반환합니다.

  • 음수(-1)를 반환하면 첫 번째 요소가 앞으로 정렬됩니다.
  • 양수(1)를 반환하면 두 번째 요소가 앞으로 정렬됩니다.
  • 0을 반환하면 순서가 변경되지 않습니다.

예제 코드

const arr = [
    {flag: true, other: 1},
    {flag: true, other: 2},
    {flag: false, other: 3},
    {flag: true, other: 4},
    {flag: true, other: 5},
    {flag: true, other: 6},
    {flag: false, other: 7}
];
const sortByFlag = arr => {
    const sorter = (a, b) => {
        if(!a['flag'] && b['flag']){
            return -1;
        };
        if(a['flag'] && !b['flag']){
            return 1;
        }
        return a['other'] - b['other'];
    }
    arr.sort(sorter);
};
sortByFlag(arr);
console.log(arr);

코드 설명

  • 첫 번째 조건: a의 flag가 false이고 b의 flag가 true라면 -1을 반환하여 a를 앞으로 보냅니다.
  • 두 번째 조건: 반대로 a의 flag가 true이고 b의 flag가 false라면 1을 반환하여 b를 앞으로 보냅니다.
  • 나머지 경우: 두 요소의 flag 값이 같다면 other 속성 값을 비교하여 오름차순으로 정렬합니다.

실행 결과

콘솔에 출력되는 결과는 다음과 같습니다.

[
    { flag: false, other: 3 },
    { flag: false, other: 7 },
    { flag: true, other: 1 },
    { flag: true, other: 2 },
    { flag: true, other: 4 },
    { flag: true, other: 5 },
    { flag: true, other: 6 }
]

마무리

이처럼 sort() 메서드에 조건에 맞는 비교 함수만 잘 정의해 주면, 복잡한 로직 없이도 원하는 기준대로 객체 배열을 깔끔하게 정렬할 수 있습니다. 참고로 ES2019부터 sort()는 안정 정렬(stable sort)을 보장하므로, 동일한 우선순위를 가진 요소들의 원래 순서도 신뢰할 수 있습니다.