Sorting Array based on another array JavaScript

Sorting an array based on another array's order is a common JavaScript task. This technique allows you to reorder elements according to a reference array's sequence.

Problem Statement

Given two arrays, we need to sort the first array based on the order of elements in the second array:

const input = ['S-1','S-2','S-3','S-4','S-5','S-6','S-7','S-8'];
const sortingArray = ["S-1", "S-5", "S-2", "S-6", "S-3", "S-7", "S-4", "S-8"];

console.log("Original array:", input);
console.log("Reference order:", sortingArray);

Original array: [ 'S-1', 'S-2', 'S-3', 'S-4', 'S-5', 'S-6', 'S-7', 'S-8' ]
Reference order: [ 'S-1', 'S-5', 'S-2', 'S-6', 'S-3', 'S-7', 'S-4', 'S-8' ]

Using indexOf() Method

The most straightforward approach uses indexOf() to find element positions in the reference array:

const input = ['S-1','S-2','S-3','S-4','S-5','S-6','S-7','S-8'];
const sortingArray = ["S-1", "S-5", "S-2", "S-6", "S-3", "S-7", "S-4", "S-8"];

const sortByReference = (arr1, arr2) => {
    const sorter = (a, b) => {
        const firstIndex = arr2.indexOf(a);
        const secondIndex = arr2.indexOf(b);
        return firstIndex - secondIndex;
    };
    return arr1.sort(sorter);
};

const result = sortByReference([...input], sortingArray);
console.log("Sorted array:", result);

Sorted array: [ 'S-1', 'S-5', 'S-2', 'S-6', 'S-3', 'S-7', 'S-4', 'S-8' ]

Using Map for Better Performance

For larger arrays, creating a Map improves performance by avoiding repeated indexOf() calls:

const input = ['S-1','S-2','S-3','S-4','S-5','S-6','S-7','S-8'];
const sortingArray = ["S-1", "S-5", "S-2", "S-6", "S-3", "S-7", "S-4", "S-8"];

const sortByReferenceOptimized = (arr1, arr2) => {
    // Create a map of element to index for O(1) lookup
    const orderMap = new Map();
    arr2.forEach((item, index) => orderMap.set(item, index));
    
    return arr1.sort((a, b) => {
        return orderMap.get(a) - orderMap.get(b);
    });
};

const result = sortByReferenceOptimized([...input], sortingArray);
console.log("Optimized result:", result);

Optimized result: [ 'S-1', 'S-5', 'S-2', 'S-6', 'S-3', 'S-7', 'S-4', 'S-8' ]

Handling Missing Elements

When elements exist in the first array but not in the reference array:

const input = ['S-1','S-2','S-3','S-9','S-10']; // S-9, S-10 not in reference
const sortingArray = ["S-1", "S-5", "S-2", "S-6", "S-3", "S-7", "S-4", "S-8"];

const sortWithMissing = (arr1, arr2) => {
    const orderMap = new Map();
    arr2.forEach((item, index) => orderMap.set(item, index));
    
    return arr1.sort((a, b) => {
        const indexA = orderMap.has(a) ? orderMap.get(a) : Infinity;
        const indexB = orderMap.has(b) ? orderMap.get(b) : Infinity;
        return indexA - indexB;
    });
};

const result = sortWithMissing(input, sortingArray);
console.log("Result with missing elements:", result);

Result with missing elements: [ 'S-1', 'S-2', 'S-3', 'S-9', 'S-10' ]

Performance Comparison

Conclusion

Use Map-based sorting for better performance with large datasets. The indexOf() approach works well for smaller arrays and is more readable.