Sorting an array of objects by an array JavaScript

In JavaScript, you can sort an array of objects based on the order defined by another array. This is useful when you need to prioritize objects according to a specific sequence.

Problem Statement

Given an array of objects and a reference array, we need to sort the objects according to the order specified in the reference array.

const orders = [
    { status: "pending"},
    { status: "received" },
    { status: "sent" },
    { status: "pending" }
];
const statuses = ["pending", "sent", "received"];

console.log("Original orders:", orders);
console.log("Priority order:", statuses);

Original orders: [
  { status: 'pending' },
  { status: 'received' },
  { status: 'sent' },
  { status: 'pending' }
]
Priority order: [ 'pending', 'sent', 'received' ]

Using indexOf() Method

The most straightforward approach uses indexOf() to find the position of each status in the reference array, then sorts based on these positions.

const orders = [
    { status: "pending" },
    { status: "received" },
    { status: "sent" },
    { status: "pending" }
];
const statuses = ["pending", "sent", "received"];

const sortByRef = (orders, statuses) => {
    const sorter = (a, b) => {
        return statuses.indexOf(a.status) - statuses.indexOf(b.status);
    };
    orders.sort(sorter);
};

sortByRef(orders, statuses);
console.log("Sorted orders:", orders);

Sorted orders: [
  { status: 'pending' },
  { status: 'pending' },
  { status: 'sent' },
  { status: 'received' }
]

Using Map for Better Performance

For larger datasets, creating a Map improves performance by avoiding repeated indexOf() calls.

const orders = [
    { status: "received" },
    { status: "pending" },
    { status: "sent" },
    { status: "pending" }
];
const statuses = ["pending", "sent", "received"];

const sortByRefOptimized = (orders, statuses) => {
    // Create a Map for O(1) lookups
    const orderMap = new Map();
    statuses.forEach((status, index) => orderMap.set(status, index));
    
    return orders.sort((a, b) => {
        return orderMap.get(a.status) - orderMap.get(b.status);
    });
};

const sortedOrders = sortByRefOptimized(orders, statuses);
console.log("Optimized sort result:", sortedOrders);

Optimized sort result: [
  { status: 'pending' },
  { status: 'pending' },
  { status: 'sent' },
  { status: 'received' }
]

Handling Missing Values

When objects contain values not present in the reference array, they can be placed at the end or beginning.

const orders = [
    { status: "pending" },
    { status: "cancelled" },  // Not in reference array
    { status: "sent" },
    { status: "received" }
];
const statuses = ["pending", "sent", "received"];

const sortWithMissing = (orders, statuses) => {
    const orderMap = new Map();
    statuses.forEach((status, index) => orderMap.set(status, index));
    
    return orders.sort((a, b) => {
        const aIndex = orderMap.has(a.status) ? orderMap.get(a.status) : 999;
        const bIndex = orderMap.has(b.status) ? orderMap.get(b.status) : 999;
        return aIndex - bIndex;
    });
};

console.log("With missing values:", sortWithMissing(orders, statuses));

With missing values: [
  { status: 'pending' },
  { status: 'sent' },
  { status: 'received' },
  { status: 'cancelled' }
]

Comparison of Methods

Conclusion

Use indexOf() for simple cases and Map-based sorting for better performance with larger datasets. Both methods effectively sort objects according to a reference array's order.