JavaScript Match between 2 arrays

When working with two arrays in JavaScript, you often need to match elements from one array with corresponding elements in another. This article demonstrates how to extract user IDs from an object array based on a names array, maintaining the order of the names array.

Problem Statement

We have two arrays: one containing user objects with names and UIDs, and another containing just names. Our goal is to create a function that returns UIDs in the same order as they appear in the names array.

const data = [{
    name: 'Kamlesh Kapasi',
    uid: 123
}, {
    name: 'Mahesh Babu',
    uid: 129
}, {
    name: 'Akshay Kapoor',
    uid: 223
}, {
    name: 'Vikas Gupta',
    uid: 423
}, {
    name: 'Mohit Dalal',
    uid: 133
}, {
    name: 'Rajkumar Hirani',
    uid: 233
}, {
    name: 'Joy',
    uid: 127
}];

const names = ['Joy', 'Rajkumar Hirani', 'Akshay Kapoor', 'Mahesh Babu',
'Mohit Dalal', 'Kamlesh Kapasi', 'Vikas Gupta'];

console.log('Data array:', data);
console.log('Names array:', names);

Data array: [
  { name: 'Kamlesh Kapasi', uid: 123 },
  { name: 'Mahesh Babu', uid: 129 },
  { name: 'Akshay Kapoor', uid: 223 },
  { name: 'Vikas Gupta', uid: 423 },
  { name: 'Mohit Dalal', uid: 133 },
  { name: 'Rajkumar Hirani', uid: 233 },
  { name: 'Joy', uid: 127 }
]
Names array: [
  'Joy',
  'Rajkumar Hirani', 
  'Akshay Kapoor',
  'Mahesh Babu',
  'Mohit Dalal',
  'Kamlesh Kapasi',
  'Vikas Gupta'
]

Using Array.reduce() and Array.findIndex()

The most efficient approach is to use reduce() to iterate through the names array and findIndex() to locate matching objects:

const data = [{
    name: 'Kamlesh Kapasi',
    uid: 123
}, {
    name: 'Mahesh Babu',
    uid: 129
}, {
    name: 'Akshay Kapoor',
    uid: 223
}, {
    name: 'Vikas Gupta',
    uid: 423
}, {
    name: 'Mohit Dalal',
    uid: 133
}, {
    name: 'Rajkumar Hirani',
    uid: 233
}, {
    name: 'Joy',
    uid: 127
}];

const names = ['Joy', 'Rajkumar Hirani', 'Akshay Kapoor', 'Mahesh Babu',
'Mohit Dalal', 'Kamlesh Kapasi', 'Vikas Gupta'];

const mapId = (arr, names) => {
    return names.reduce((acc, val) => {
        const index = arr.findIndex(el => el.name === val);
        return acc.concat(arr[index].uid);
    }, []);
};

console.log(mapId(data, names));

[
  127, 233, 223,
  129, 133, 123,
  423
]

Alternative: Using Array.map() and Array.find()

Another approach uses map() with find() for cleaner, more readable code:

const mapIdWithFind = (arr, names) => {
    return names.map(name => {
        const user = arr.find(el => el.name === name);
        return user ? user.uid : null;
    });
};

console.log('Using map() and find():', mapIdWithFind(data, names));

Using map() and find(): [
  127, 233, 223,
  129, 133, 123,
  423
]

How It Works

The function works by:

1. Iterating through names: The reduce() method processes each name in the order they appear
2. Finding matching objects: findIndex() locates the object with the matching name property
3. Extracting UIDs: The UID from the found object is added to the accumulator array
4. Maintaining order: Results maintain the same order as the input names array

Key Points

• The output order matches the names array, not the data array
• findIndex() returns the first matching index
• concat() creates a new array without mutating the original
• Consider error handling for missing names in real applications

Conclusion

This pattern is useful for reordering data based on a reference array. Both reduce() with findIndex() and map() with find() provide effective solutions for matching elements between arrays while preserving order.