how to get unique element from array object in javascript

Jordan Emanuel

2 min read

·

08-09-2024

61

0

Share

In programming, especially in JavaScript, we often deal with arrays of objects. Sometimes, we may need to filter these arrays to find unique objects based on certain properties. In this article, we’ll explore several methods to achieve this.

Understanding the Problem

Imagine you have an array of user objects, each containing information like name and email. However, some users may have duplicate entries, and you want to create a new array with only unique users based on their email addresses.

Here’s an example of our initial array:

const users = [
    { name: 'Alice', email: 'alice@example.com' },
    { name: 'Bob', email: 'bob@example.com' },
    { name: 'Alice', email: 'alice@example.com' },
    { name: 'Charlie', email: 'charlie@example.com' },
];

Our goal is to filter out the duplicates, leaving us with just unique users.

Method 1: Using filter and map

One straightforward method is to use the filter method along with map. Here’s how:

Step-by-Step

1. Map the array to extract the property we want (e.g., email).
2. Use filter to keep only the first occurrence of each email.

Implementation

const uniqueUsers = users
    .map(user => user.email) // Get an array of emails
    .filter((email, index, self) => self.indexOf(email) === index) // Filter unique emails
    .map(email => users.find(user => user.email === email)); // Get the full user object

console.log(uniqueUsers);

Explanation

• map(user => user.email): Transforms the user objects into an array of emails.
• filter: Keeps only the first occurrence of each email.
• map(email => users.find(user => user.email === email)): Retrieves the original user objects corresponding to those unique emails.

Method 2: Using a Set

Another efficient way to achieve this is by using a Set, which is a built-in JavaScript object that allows you to store unique values.

Implementation

const uniqueUsers = [...new Map(users.map(user => [user.email, user])).values()];

console.log(uniqueUsers);

Explanation

• users.map(user => [user.email, user]): Creates an array of key-value pairs where the key is the email and the value is the user object.
• new Map(...): The Map object stores the first occurrence of each email.
• values(): Returns an iterable of the map's values (which are the unique user objects).
• The spread operator (...) converts the iterable back into an array.

Method 3: Using reduce

You can also use the reduce method to accumulate unique user objects into a new array.

Implementation

const uniqueUsers = users.reduce((acc, user) => {
    if (!acc.find(u => u.email === user.email)) {
        acc.push(user);
    }
    return acc;
}, []);

console.log(uniqueUsers);

Explanation

• reduce: Accumulates results into a new array.
• find: Checks if the user already exists in the accumulator acc based on the email.

Conclusion

In summary, there are multiple ways to extract unique elements from an array of objects in JavaScript. You can use methods like filter, Set, or reduce, depending on your preferences and specific use cases.

Summary of Methods

• Filter and Map: Great for readability and clarity.
• Set and Map: Best for performance with larger datasets.
• Reduce: Provides flexibility and can be tailored for complex operations.

Feel free to choose the method that best suits your coding style or project requirements. Happy coding!

For more JavaScript tutorials, check out our articles on JavaScript Array Methods and JavaScript Objects to deepen your understanding of this versatile language!