How to Return an Array of Unique Objects in JavaScript ?

Returning an array of unique objects consists of creating a new array that contains unique elements from an original array. We have been given an array of objects, our task is to extract or return an array that consists of unique objects using JavaScript approaches. There are various approaches through which it can be performed which are as follows:

Using Set

This method uses Set to extract unique objects by first converting each of the objects into the JSON string, then mapping it back to the objects. The output array contains the unique objects.

Syntax:

let mySet = new Set([iterable]);

Example: The below code uses a set to return an array of unique objects.

// input arr
let arr = [
    { articleId: 101, title: "Introduction to JavaScript" },
    { articleId: 102, title: "Arrays in JavaScript" },
    { articleId: 101, title: "Introduction to JavaScript" },
    { articleId: 103, title: "Functions in JavaScript" },
];

// Set to get unique objects
let setObj = new Set(arr.map(JSON.stringify));
let output = Array.from(setObj).map(JSON.parse);

// Output
console.log(output);

[
  { articleId: 101, title: 'Introduction to JavaScript' },
  { articleId: 102, title: 'Arrays in JavaScript' },
  { articleId: 103, title: 'Functions in JavaScript' }
]

Using filter Method

This method uses the filter method in JavaScript to return only the first occurrence of each unique object in the input array, using JSON.stringify for the comparison. The output array has the unique objects stored.

Syntax:

let newArray = array.filter(callback(element, index, array));

Example: The below code uses filter and indexOf methods to return an array of unique objects.

// Input arr
let arr = [
    { articleId: 101, title: 'Introduction to JavaScript' },
    { articleId: 102, title: 'Arrays in JavaScript' },
    { articleId: 101, title: 'Introduction to JavaScript' },
    { articleId: 103, title: 'Functions in JavaScript' }
];

// Filter and indexOf to get unique objects
let output = arr.filter(
    (obj, index, arr) =>
    {
    return arr.findIndex(o =>
        {
        return JSON.stringify(o) === JSON.stringify(obj)
        }) === index
    } 
);

// Output
console.log(output);

[
  { articleId: 101, title: 'Introduction to JavaScript' },
  { articleId: 102, title: 'Arrays in JavaScript' },
  { articleId: 103, title: 'Functions in JavaScript' }
]

Using reduce Method

The method uses the reduce method from JavaScript to accumulate unique objects from the input array by checking for the existing objects using JSON.stringify. The output array stores the unique objects and is printed using the log() function.

Syntax:

let result = array.reduce(callback(accumulator, currentValue, index, array), initialValue); 

Example: The below code uses the reduce method to return an array of unique objects.

// Input arr
let arr = [
    { articleId: 101, title: "Introduction to JavaScript" },
    { articleId: 102, title: "Arrays in JavaScript" },
    { articleId: 101, title: "Introduction to JavaScript" },
    { articleId: 103, title: "Functions in JavaScript" },
];

// Reduce method to get unique objects
let output = arr.reduce((acc, obj) => {
    if (!acc.some(o => o.articleId === obj.articleId)) {
        acc.push(obj);
    }
    return acc;
}, []);

// Output
console.log(output);

[
  { articleId: 101, title: 'Introduction to JavaScript' },
  { articleId: 102, title: 'Arrays in JavaScript' },
  { articleId: 103, title: 'Functions in JavaScript' }
]

We use the some method to check if the current object's articleId already exists in the accumulator. And If the articleId is not found in the accumulator, we push the current object obj into the accumulator. Thus accumulator acc contains only unique objects based on the articleId

Using map Method

This method uses the map method along with callback to get unique objects by associating each object with the JSON string. The output array consists of unique objects and is printed using the log() function.

Syntax:

let newArray = array.map(callback(currentValue, index, array)); 

Example: The below code uses the map method to return an array of unique objects.

// input arr
let arr = [
    { articleId: 101, title: "Introduction to JavaScript" },
    { articleId: 102, title: "Arrays in JavaScript" },
    { articleId: 101, title: "Introduction to JavaScript" },
    { articleId: 103, title: "Functions in JavaScript" },
];

// Map method to get unique objects
let mapObj = new Map(
    arr.map((obj) => {
        return [JSON.stringify(obj), obj];
})
);
let output = Array.from(mapObj.values());

// Output
console.log(output);

[
  { articleId: 101, title: 'Introduction to JavaScript' },
  { articleId: 102, title: 'Arrays in JavaScript' },
  { articleId: 103, title: 'Functions in JavaScript' }
]

Using Object Key for Tracking Unique Objects

This method uses an object to track and store unique objects based on a specified attribute. The keys of the object are the values of the specified attribute, ensuring uniqueness.

Syntax:

let newArray = array.reduce((acc, current) => {
    // logic to track unique objects
    return acc;
}, {});

Example:

// Input array
let arr = [
    { articleId: 101, title: "Introduction to JavaScript" },
    { articleId: 102, title: "Arrays in JavaScript" },
    { articleId: 101, title: "Introduction to JavaScript" },
    { articleId: 103, title: "Functions in JavaScript" },
];

// Using an object key to track unique objects
let uniqueObjects = {};
arr.forEach(obj => {
    uniqueObjects[obj.articleId] = obj;
});
let output = Object.values(uniqueObjects);

// Output
console.log(output);
// Nikunj Sonigara

[
  { articleId: 101, title: 'Introduction to JavaScript' },
  { articleId: 102, title: 'Arrays in JavaScript' },
  { articleId: 103, title: 'Functions in JavaScript' }
]