Push specific elements to last in JavaScript

Suppose we have an array of objects like this:

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}
];

We are required to write a JavaScript function that takes in one such array and sorts it based on the following conditions:

• If arr.flag === false, the matching element gets placed first in the array, but only after the previous matching elements.

• The elements that do not match, remain in the same order they were in originally.

• Order of appearance is important.

So, for the above array, the output should be:

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}
];

Using Array.sort() with Custom Comparator

The most efficient approach is to use the built-in sort method with a custom comparator function:

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);

[
   { 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 }
]

Using Filter and Spread Operator

An alternative approach is to separate elements by their flag value and combine them:

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 sortByFlagFilter = arr => {
   const falseFlag = arr.filter(item => !item.flag);
   const trueFlag = arr.filter(item => item.flag);
   return [...falseFlag, ...trueFlag];
};

const result = sortByFlagFilter(arr);
console.log(result);

[
   { 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 }
]

How the Comparator Works

The custom comparator function works by returning:

• -1 when the first element should come before the second
• 1 when the first element should come after the second
• 0 or a difference value to maintain relative order

Performance Comparison

Conclusion

Both methods effectively push elements with specific conditions to different positions. Use Array.sort() for in-place sorting or the filter approach when you need to preserve the original array.