Order an array of words based on another array of words JavaScript

When working with arrays in JavaScript, you may need to reorder an array of objects based on the order specified in another array. This is useful for sorting data according to custom priorities or sequences.

Let's say we have an array of objects sorted by their id property:

const unordered = [{
    id: 1,
    string: 'sometimes'
}, {
    id: 2,
    string: 'be'
}, {
    id: 3,
    string: 'can'
}, {
    id: 4,
    string: 'life'
}, {
    id: 5,
    string: 'tough'
}, {
    id: 6,
    string: 'very'
}];

console.log("Original array:", unordered);

Original array: [
  { id: 1, string: 'sometimes' },
  { id: 2, string: 'be' },
  { id: 3, string: 'can' },
  { id: 4, string: 'life' },
  { id: 5, string: 'tough' },
  { id: 6, string: 'very' }
]

And another array that defines the desired order:

const ordered = ['life', 'sometimes', 'can', 'be', 'very', 'tough'];
console.log("Desired order:", ordered);

Desired order: [ 'life', 'sometimes', 'can', 'be', 'very', 'tough' ]

Using Array.sort() with Custom Comparator

We can use the sort() method with a custom comparator function that uses indexOf() to determine the order:

const unordered = [{
    id: 1,
    string: 'sometimes'
}, {
    id: 2,
    string: 'be'
}, {
    id: 3,
    string: 'can'
}, {
    id: 4,
    string: 'life'
}, {
    id: 5,
    string: 'tough'
}, {
    id: 6,
    string: 'very'
}];

const ordered = ['life', 'sometimes', 'can', 'be', 'very', 'tough'];

const sorter = (a, b) => {
    return ordered.indexOf(a.string) - ordered.indexOf(b.string);
};

const result = unordered.sort(sorter);
console.log("Sorted array:", result);

Sorted array: [
  { id: 4, string: 'life' },
  { id: 1, string: 'sometimes' },
  { id: 3, string: 'can' },
  { id: 2, string: 'be' },
  { id: 6, string: 'very' },
  { id: 5, string: 'tough' }
]

How It Works

The comparator function works by:

• Finding the index of each object's string property in the reference array
• Returning the difference between these indices
• JavaScript's sort uses this difference to determine the correct order

Alternative Approach Using Map for Better Performance

For larger datasets, using a Map for O(1) lookups is more efficient than indexOf():

const unordered = [{
    id: 1,
    string: 'sometimes'
}, {
    id: 2,
    string: 'be'
}, {
    id: 3,
    string: 'can'
}, {
    id: 4,
    string: 'life'
}, {
    id: 5,
    string: 'tough'
}, {
    id: 6,
    string: 'very'
}];

const ordered = ['life', 'sometimes', 'can', 'be', 'very', 'tough'];

// Create a map for O(1) lookups
const orderMap = new Map();
ordered.forEach((item, index) => orderMap.set(item, index));

const optimizedResult = unordered.sort((a, b) => {
    return orderMap.get(a.string) - orderMap.get(b.string);
});

console.log("Optimized result:", optimizedResult);

Optimized result: [
  { id: 4, string: 'life' },
  { id: 1, string: 'sometimes' },
  { id: 3, string: 'can' },
  { id: 2, string: 'be' },
  { id: 6, string: 'very' },
  { id: 5, string: 'tough' }
]

Conclusion

Use Array.sort() with a custom comparator based on indexOf() for simple cases. For larger datasets, consider using a Map for better performance with O(1) lookups instead of O(n) indexOf operations.