Add property to common items in array and array of objects - JavaScript?

To add properties to objects based on common items in arrays, use the map() method combined with Set for efficient lookups. This approach allows you to conditionally add properties to array objects based on whether their values exist in another array.

Example Arrays

Let's start with a simple array and an array of objects:

const firstname = ['John', 'David', 'Bob'];

const studentDetails = [
    {
        firstname: 'Carol',
        marks: 78
    },
    {
        firstname: 'Mike', 
        marks: 89
    },
    {
        firstname: 'Bob',
        marks: 86
    }
];

console.log("Original firstname array:", firstname);
console.log("Original student details:", studentDetails);

Original firstname array: [ 'John', 'David', 'Bob' ]
Original student details: [
  { firstname: 'Carol', marks: 78 },
  { firstname: 'Mike', marks: 89 },
  { firstname: 'Bob', marks: 86 }
]

Using Set and map() for Efficient Lookup

Convert the array to a Set for O(1) lookup time, then use map() to add properties:

const firstname = ['John', 'David', 'Bob'];
const studentDetails = [
    {
        firstname: 'Carol',
        marks: 78
    },
    {
        firstname: 'Mike',
        marks: 89
    },
    {
        firstname: 'Bob',
        marks: 86
    }
];

const data = new Set(firstname);
const result = studentDetails.map(tmpObject => {
    if (data.has(tmpObject.firstname)) 
        tmpObject.isPresent = "This is present";
    else
        tmpObject.isPresent = "This is not present";
    return tmpObject;
});

console.log(result);

[
  { firstname: 'Carol', marks: 78, isPresent: 'This is not present' },
  { firstname: 'Mike', marks: 89, isPresent: 'This is not present' },
  { firstname: 'Bob', marks: 86, isPresent: 'This is present' }
]

Alternative: Non-Mutating Approach

To avoid modifying the original objects, create new objects with the spread operator:

const firstname = ['John', 'David', 'Bob'];
const studentDetails = [
    { firstname: 'Carol', marks: 78 },
    { firstname: 'Mike', marks: 89 },
    { firstname: 'Bob', marks: 86 }
];

const data = new Set(firstname);
const result = studentDetails.map(obj => ({
    ...obj,
    isPresent: data.has(obj.firstname) ? "This is present" : "This is not present"
}));

console.log("New array with added properties:", result);
console.log("Original array unchanged:", studentDetails);

New array with added properties: [
  { firstname: 'Carol', marks: 78, isPresent: 'This is not present' },
  { firstname: 'Mike', marks: 89, isPresent: 'This is not present' },
  { firstname: 'Bob', marks: 86, isPresent: 'This is present' }
]
Original array unchanged: [
  { firstname: 'Carol', marks: 78 },
  { firstname: 'Mike', marks: 89 },
  { firstname: 'Bob', marks: 86 }
]

How It Works

The Set data structure provides O(1) lookup time with the has() method, making it more efficient than using includes() on arrays. The map() method creates a new array with the modified objects, adding the isPresent property based on whether the firstname exists in the reference array.

Conclusion

Using Set with map() provides an efficient way to add properties to objects based on array membership. Choose the mutating or non-mutating approach based on whether you need to preserve the original data structure.