Sort array based on another array in JavaScript

We often need to sort an array based on the order specified in another array. This technique is useful when you want certain elements to appear first while maintaining the original order of remaining elements.

For example, we have an original array and want elements from a sortOrder array to appear at the beginning:

const originalArray = ['Apple', 'Cat', 'Fan', 'Goat', 'Van', 'Zebra'];
const sortOrder = ['Zebra', 'Van'];

Using Custom Sort Function

We can create a custom comparator function that prioritizes elements present in the sortOrder array:

const originalArray = ['Apple', 'Cat', 'Fan', 'Goat', 'Van', 'Zebra'];
const sortOrder = ['Zebra', 'Van'];

const sorter = (a, b) => {
    if(sortOrder.includes(a)){
        return -1;
    }
    if(sortOrder.includes(b)){
        return 1;
    }
    return 0;
};

originalArray.sort(sorter);
console.log(originalArray);

[ 'Zebra', 'Van', 'Apple', 'Cat', 'Fan', 'Goat' ]

Preserving Sort Order Priority

The above method doesn't maintain the specific order within the sortOrder array. Here's an improved version that respects the priority order:

const originalArray = ['Apple', 'Cat', 'Fan', 'Goat', 'Van', 'Zebra'];
const sortOrder = ['Van', 'Zebra'];

const sorter = (a, b) => {
    const indexA = sortOrder.indexOf(a);
    const indexB = sortOrder.indexOf(b);
    
    // Both elements are in sortOrder
    if (indexA !== -1 && indexB !== -1) {
        return indexA - indexB;
    }
    
    // Only 'a' is in sortOrder
    if (indexA !== -1) {
        return -1;
    }
    
    // Only 'b' is in sortOrder
    if (indexB !== -1) {
        return 1;
    }
    
    // Neither is in sortOrder, maintain original order
    return 0;
};

originalArray.sort(sorter);
console.log(originalArray);

[ 'Van', 'Zebra', 'Apple', 'Cat', 'Fan', 'Goat' ]

Using Map for Better Performance

For large arrays, using a Map improves performance by avoiding repeated indexOf calls:

const originalArray = ['Apple', 'Cat', 'Fan', 'Goat', 'Van', 'Zebra'];
const sortOrder = ['Van', 'Zebra'];

// Create a priority map
const priorityMap = new Map();
sortOrder.forEach((item, index) => {
    priorityMap.set(item, index);
});

const sorter = (a, b) => {
    const priorityA = priorityMap.has(a) ? priorityMap.get(a) : Infinity;
    const priorityB = priorityMap.has(b) ? priorityMap.get(b) : Infinity;
    
    return priorityA - priorityB;
};

originalArray.sort(sorter);
console.log(originalArray);

[ 'Van', 'Zebra', 'Apple', 'Cat', 'Fan', 'Goat' ]

How It Works

The custom sort function compares two elements and returns:

• -1: First element should come before second
• 1: Second element should come before first
• 0: Order doesn't matter (maintains stability)

Conclusion

Use custom sort functions with priority mapping to sort arrays based on another array. The Map approach offers better performance for large datasets by avoiding repeated lookups.