JavaScript - Match Values from Another Array and Assign to Object of Arrays

Here are the different methods to match values from another array and assign to object of arrays in JavaScript

1. Using forEach() and push()

In this method, we will be using the forEach() and push() methods of the array to get the same value from another array and assign it to the object of arrays.

//Driver Code Starts
let a1 = [1, 2, 3, 4, 5, 77, 876, 453];
let a2 = [1, 2, 45, 4, 231, 453];
let res = [];

//Driver Code Ends

a1.forEach(val =>
	a2.includes(val) && res.push(val));
console.log(res);

[ 1, 2, 4, 453 ]

In this example

• The code compares two arrays and finds common elements.
• It uses forEach to iterate through a1, checks if each value exists in a2 using includes, and adds the common values to the res array.

2. Using filter() and push()

In this method, we will use the filter(), push(), and includes() of array to get the same value from another array and assign it to the object of arrays.

//Driver Code Starts
let a1 = [1, 2, 3, 4, 5, 77, 876, 453];
let a2 = [1, 2, 45, 4, 231, 453];

//Driver Code Ends

let res = a1.filter(
	val => a2.includes(val));
console.log(res);

[ 1, 2, 4, 453 ]

In this example

• The code finds common elements between two arrays (a1 and a2) using the filter method.
• It filters a1 by checking if each element exists in a2 using includes, and stores the result in res.

3. Using map() with find()

This method combines Array.prototype.map and Array.prototype.find for a cleaner and more functional approach.

//Driver Code Starts
const users = [{ id: 1, name: "Alia" }, { id: 2, name: "Riya" }];
const ages = [{ id: 1, age: 25 }, { id: 2, age: 30 }];

//Driver Code Ends

const user = users.map(user => {
	const data = ages.find(age => age.id === user.id);
	return { ...user, age: data?.age };
});

//Driver Code Starts

console.log(user);
//Driver Code Ends

[ { id: 1, name: 'Alia', age: 25 }, { id: 2, name: 'Riya', age: 30 } ]

In this example

• The code merges two arrays (users and ages) by matching the id property, using map and find to add the age property from ages to each user object.

4. Using reduce() for a Lookup Table

For large datasets, using the reduce() method to build a lookup table can significantly improve performance by streamlining the key-matching process.

//Driver Code Starts
const users = [{ id: 1, name: "Alia" }, { id: 2, name: "Bobby" }];
const ages = [{ id: 1, age: 25 }, { id: 2, age: 30 }];

//Driver Code Ends

const age = ages.reduce((acc, age) => {
	acc[age.id] = age.age;
	return acc;
}, {});

users.forEach(user => {
	user.age = age[user.id];
});

//Driver Code Starts

console.log(users);
//Driver Code Ends

[
  { id: 1, name: 'Alia', age: 25 },
  { id: 2, name: 'Bobby', age: 30 },
  { id: 3, name: 'Charu', age: 35 }
]

In this example

• The ages array is transformed into an object mapping id to age.
• The forEach loop adds the corresponding age to each user based on their id.
• The users array is updated with the age property for each user.

5. Using Object.fromEntries() for Optimized Mapping

For a concise and modern approach, convert the ages array into an object map using Object.fromEntries.

//Driver Code Starts
const users = [{ id: 1, name: "Alia" }, { id: 2, name: "Jiya" }];
const ages = [{ id: 1, age: 25 }, { id: 2, age: 30 }];

//Driver Code Ends

const age = Object.fromEntries(ages.map(age =>
	[age.id, age.age]));
const user = users.map(user => ({
	...user,
	age: ageMap[user.id],
}));

//Driver Code Starts

console.log(user);
//Driver Code Ends

In this example

• The ages array is transformed into an object ageMap that maps id to age using Object.fromEntries().
• The users array is updated by adding an age property from ageMap based on each user's id, resulting in the user array with both name and age properties.