Use array as sort order in JavaScript

In JavaScript, you can sort an array of objects based on a custom order defined by another array. This is useful when you need to arrange data according to a specific sequence rather than alphabetical or numerical order.

Problem Statement

Given a reference array that defines the desired order and an array of objects, we need to sort the objects so their property values match the sequence in the reference array.

const sort = ["this","is","my","custom","order"];
const myObjects = [
    {"id":1,"content":"is"},
    {"id":2,"content":"my"},
    {"id":3,"content":"this"},
    {"id":4,"content":"custom"},
    {"id":5,"content":"order"}
];

console.log("Original objects:", myObjects);

Original objects: [
  { id: 1, content: 'is' },
  { id: 2, content: 'my' },
  { id: 3, content: 'this' },
  { id: 4, content: 'custom' },
  { id: 5, content: 'order' }
]

Using Array.map() Method

The most straightforward approach uses Array.map() to iterate through the reference array and find matching objects:

const arrLiteral = ["this","is","my","custom","order"];
const arrObj = [
    {"id":1,"content":"is"},
    {"id":2,"content":"my"},
    {"id":3,"content":"this"},
    {"id":4,"content":"custom"},
    {"id":5,"content":"order"}
];

const sortByReference = (arrLiteral, arrObj) => {
    const sorted = arrLiteral.map(el => {
        for(let i = 0; i 

[
  { id: 3, content: 'this' },
  { id: 1, content: 'is' },
  { id: 2, content: 'my' },
  { id: 4, content: 'custom' },
  { id: 5, content: 'order' }
]


Using Array.sort() with indexOf()

A more efficient approach uses Array.sort() with indexOf() to determine the sort order:

const sortOrder = ["this","is","my","custom","order"];
const objects = [
    {"id":1,"content":"is"},
    {"id":2,"content":"my"},
    {"id":3,"content":"this"},
    {"id":4,"content":"custom"},
    {"id":5,"content":"order"}
];

const sortedObjects = objects.sort((a, b) => {
    return sortOrder.indexOf(a.content) - sortOrder.indexOf(b.content);
});

console.log("Sorted using sort():", sortedObjects);


Sorted using sort(): [
  { id: 3, content: 'this' },
  { id: 1, content: 'is' },
  { id: 2, content: 'my' },
  { id: 4, content: 'custom' },
  { id: 5, content: 'order' }
]


Performance Comparison

Handling Missing Values

For robust sorting, handle cases where objects might not match the reference array:

const sortWithFallback = (referenceArray, objectArray) => {
    return objectArray.sort((a, b) => {
        const indexA = referenceArray.indexOf(a.content);
        const indexB = referenceArray.indexOf(b.content);
        
        // Handle items not in reference array
        if (indexA === -1 && indexB === -1) return 0;
        if (indexA === -1) return 1; // Move to end
        if (indexB === -1) return -1; // Move to end
        
        return indexA - indexB;
    });
};

const mixedObjects = [
    {"id":1,"content":"is"},
    {"id":2,"content":"unknown"}, // Not in reference
    {"id":3,"content":"this"}
];

console.log(sortWithFallback(["this","is"], mixedObjects));

[
  { id: 3, content: 'this' },
  { id: 1, content: 'is' },
  { id: 2, content: 'unknown' }
]

Conclusion

Use Array.map() for simple cases or Array.sort() with indexOf() for better performance. Handle edge cases like missing values to ensure robust sorting behavior.