How to create a custom sort order in javascript

When sorting an array of objects in JavaScript, usually we will want to sort alphabetically or numerically, but there are also some cases were we might need a custom sort order.

Take the below example we want to show the items inProgress first, then todo and then done.

const tasks = [
  { id: 1, title: "Job A", status: "done" },
  { id: 2, title: "Job B", status: "inProgress" },
  { id: 3, title: "Job C", status: "todo" },
  { id: 4, title: "Job D", status: "inProgress" },
  { id: 5, title: "Job E", status: "todo" },
];

We will first create an array with our desired sort order.

const sortBy = ["inProgress", "todo", "done"];

Then we will make a function using reduce that will output the data as an object. {inProgress: 0, todo: 1, done: 2} with the array item as the key and the index as the value.

const sortByObject = (data) =>
  data.reduce((obj, item, index) => {
    return {
      ...obj,
      [item]: index,
    };
  }, {});
console.log(sortByObject(sortBy));
/* {inProgress: 0, todo: 1, done: 2} */

Now we have our sorting setup we can bring it all together with a reusable function that passes in an array data a sortby array and a sortField so we know whoch field to sort on.

const customSort = ({ data, sortBy, sortField }) => {
  const sortByObject = sortBy.reduce((obj, item, index) => {
    return {
      ...obj,
      [item]: index,
    };
  }, {});
  return data.sort(
    (a, b) => sortByObject[a[sortField]] - sortByObject[b[sortField]]
  );
};

console.log(customSort({ data: tasks, sortBy, sortField: "status" }));

This will now sort by our custom order, however there will be an issue if there is an item in the list that has a different status (one not in our sort order). So to handle this we will set a default sort field to catch all items we don't want in the sort.

const tasksWithDefault = tasks.map((item) => ({
  ...item,
  sortStatus: sortBy.includes(item.status) ? item.status : "other",
}));

With this in place if we log out our function again this time passing in our updated sort field then we now have our correct sort order with other items at the bottom of the list.

console.log(
  customSort({
    data: tasksWithDefault,
    sortBy: [...sortBy, "other"],
    sortField: "sortStatus",
  })
);