Remove the duplicate value from array with images data in JavaScript

When working with arrays of objects containing image data, you often need to remove duplicates based on a specific property. Here's how to remove duplicate objects based on the 'image' property value.

Sample Data

Consider an array of image objects where some images appear multiple times:

const arr = [{
    'image': "jv2bcutaxrms4i_img.png",
    'gallery_image': true
},
{
    'image': "abs.png",
    'gallery_image': true
},
{
    'image': "acd.png",
    'gallery_image': false
},
{
    'image': "jv2bcutaxrms4i_img.png",
    'gallery_image': true
},
{
    'image': "abs.png",
    'gallery_image': true
},
{
    'image': "acd.png",
    'gallery_image': false
}];

console.log("Original array length:", arr.length);

Original array length: 6

Using forEach Loop Method

This approach manually tracks unique objects by checking each image name:

const buildUnique = (arr = []) => {
    const unique = [];
    arr.forEach(obj => {
        let found = false;
        unique.forEach(uniqueObj => {
            if(uniqueObj.image === obj.image) {
                found = true;
            };
        });
        if(!found){
            unique.push(obj);
        };
    });
    return unique;
};

const result1 = buildUnique(arr);
console.log("Method 1 - forEach:");
console.log(result1);

Method 1 - forEach:
[
  { image: 'jv2bcutaxrms4i_img.png', gallery_image: true },
  { image: 'abs.png', gallery_image: true },
  { image: 'acd.png', gallery_image: false }
]

Using Map and Filter (Modern Approach)

A more efficient approach using ES6 Map to track seen images:

const removeDuplicates = (arr) => {
    const seen = new Map();
    return arr.filter(obj => {
        if (!seen.has(obj.image)) {
            seen.set(obj.image, true);
            return true;
        }
        return false;
    });
};

const result2 = removeDuplicates(arr);
console.log("Method 2 - Map and Filter:");
console.log(result2);

Method 2 - Map and Filter:
[
  { image: 'jv2bcutaxrms4i_img.png', gallery_image: true },
  { image: 'abs.png', gallery_image: true },
  { image: 'acd.png', gallery_image: false }
]

Using Set for Tracking

Using a Set to keep track of seen image names:

const uniqueByImage = (arr) => {
    const seenImages = new Set();
    return arr.filter(obj => {
        if (!seenImages.has(obj.image)) {
            seenImages.add(obj.image);
            return true;
        }
        return false;
    });
};

const result3 = uniqueByImage(arr);
console.log("Method 3 - Set:");
console.log(result3);
console.log("Final array length:", result3.length);

Method 3 - Set:
[
  { image: 'jv2bcutaxrms4i_img.png', gallery_image: true },
  { image: 'abs.png', gallery_image: true },
  { image: 'acd.png', gallery_image: false }
]
Final array length: 3

Performance Comparison

Conclusion

For removing duplicates based on object properties, use Map or Set with filter() for better performance. The forEach approach works but is less efficient for larger datasets.