Just Learn Code

Efficient Ways to Remove Duplicates from Arrays in JavaScript

Removing duplicates in an array can be a frustrating task for many developers. It not only slows down code execution but also increases memory usage.

However, there are several methods for removing duplicates efficiently. In this article, we will explore various ways to remove duplicates from arrays in JavaScript.

Removing duplicates using Set

Using a Set is one of the easiest ways to remove duplicates from an array. Set is an in-built data structure in JavaScript that allows storing unique values only.

Whenever an array is converted to a set, it automatically removes all the duplicates, leaving only the unique values. To remove duplicates using Set, simply convert the array to a Set and convert it back to an array.

Here’s an example that demonstrates this:

“`

const myArray = [1, 2, 2, 3, 4, 4, 5];

const uniqueArray = Array.from(new Set(myArray));

console.log(uniqueArray); // [1, 2, 3, 4, 5]

“`

In the code above, we first create an array that contains duplicate values. We then convert the array to a set by passing it to the Set constructor.

Next, we convert the set back to an array using the Array.from() method, which returns an array containing unique values only.

Removing duplicates using indexOf() and filter() methods

Another approach to remove duplicates is to use the indexOf() method in combination with the filter() method. The indexOf() method returns the index of the first occurrence of an element in an array.

If the element is not found, it returns -1. The filter() method, on the other hand, creates a new array with elements that pass a certain condition.

To remove duplicates using indexOf() and filter(), we can write a reusable function that takes an array as input and returns an array with unique elements only. Here’s how to implement this:

“`

function removeDuplicates(arr) {

return arr.filter((value, index) => arr.indexOf(value) === index);

}

const myArray = [1, 2, 2, 3, 4, 4, 5];

const uniqueArray = removeDuplicates(myArray);

console.log(uniqueArray); // [1, 2, 3, 4, 5]

“`

The function above uses the filter() method to create a new array that contains only unique elements.

The arrow function passed to filter() accepts two arguments – the current value and an index. Inside the arrow function, we use the indexOf() method to check if the current value is the first occurrence of the element in the array.

If it is, it means that the element is unique and it is added to the new array.

Removing duplicates using forEach() and include()

The forEach() method allows us to iterate over an array and perform a certain action on each element. We can use it to build a new array that contains unique elements only.

To achieve this, we will use the include() method to check if an element is already in the new array. Here’s an example implementation:

“`

function removeDuplicates(arr) {

const uniqueArray = [];

arr.forEach((element) => {

if (!uniqueArray.includes(element)) {

uniqueArray.push(element);

}

});

return uniqueArray;

}

const myArray = [1, 2, 2, 3, 4, 4, 5];

const uniqueArray = removeDuplicates(myArray);

console.log(uniqueArray); // [1, 2, 3, 4, 5]

“`

The above function creates an empty array to hold unique elements.

It then loops over the input array using forEach(), and for each element, it checks if it already exists in the unique array. If it doesn’t, it adds the element to the new array using the push() method.

Removing duplicates from an array of objects using Map() and spread operator

In some cases, we may need to remove duplicates from an array of objects based on a specific property. One way to achieve this is by using the Map() constructor and the spread operator.

Here’s an example that demonstrates this approach:

“`

const myArray = [

{ id: 1, name: ‘John’ },

{ id: 2, name: ‘Jane’ },

{ id: 3, name: ‘John’ },

{ id: 4, name: ‘Jack’ },

{ id: 5, name: ‘Jane’ },

];

const uniqueArray = […new Map(myArray.map((item) => [item.name, item])).values()];

console.log(uniqueArray);

// Output: [{id: 1, name: “John”}, {id: 2, name: “Jane”}, {id: 4, name: “Jack”}]

“`

In the code above, we first create an array of objects, some of which share the same name property. We then use the map() method to create a new array that maps the name property to its corresponding object.

We pass this new array to the Map() constructor, which creates an object with unique keys (in this case, the name property), and the corresponding values as an array of objects with that name. Finally, we use the spread operator to convert the Map object back to an array of objects.

Removing duplicates from an array of objects by multiple properties using a callback function

Sometimes we may want to remove duplicates from an array of objects based on multiple properties. In such cases, we can use a callback function that checks if two objects are equal based on those properties.

Here’s an example implementation:

“`

function removeDuplicates(arr, callback) {

return arr.filter(

(item, index, self) =>

index ===

self.findIndex((t) => callback(t, item))

);

}

const myArray = [

{ id: 1, name: ‘John’ },

{ id: 2, name: ‘Jane’ },

{ id: 3, name: ‘John’ },

{ id: 4, name: ‘Jack’ },

{ id: 5, name: ‘Jane’ },

];

const uniqueArray = removeDuplicates(myArray, (a, b) => a.id === b.id && a.name === b.name);

console.log(uniqueArray);

// Output: [{id: 1, name: “John”}, {id: 2, name: “Jane”}, {id: 4, name: “Jack”}]

“`

The above function takes two arguments – the input array and a callback function that determines if two objects are equal based on a specific set of properties. Inside the function, we use the filter() method to create a new array that contains only unique elements.

We pass a callback function to the findIndex() method that checks if two objects are equal. If the index of the object is the same as its index in the array, it means it is the first occurrence, and we add it to the new array.

Unique function to remove duplicates

If you find yourself frequently removing duplicates from arrays, it may be useful to write a reusable function. Here are a few examples of unique functions that you can use:

Unique function for simple arrays

“`

function unique(arr) {

return Array.from(new Set(arr));

}

const myArray = [1, 2, 2, 3, 4, 4, 5];

const uniqueArray = unique(myArray);

console.log(uniqueArray); // [1, 2, 3, 4, 5]

“`

The above function creates a new set using the input array and converts it back to an array containing unique values only.

Unique function for array of objects by a specific property

“`

function uniqueByProperty(arr, prop) {

return Object.values(

arr.reduce((prev, curr) => ((prev[curr[prop]] = curr), prev), {})

);

}

const myArray = [

{ id: 1, name: ‘John’ },

{ id: 2, name: ‘Jane’ },

{ id: 3, name: ‘John’ },

{ id: 4, name: ‘Jack’ },

{ id: 5, name: ‘Jane’ },

];

const uniqueArray = uniqueByProperty(myArray, ‘name’);

console.log(uniqueArray);

// Output: [{id: 1, name: “John”}, {id: 2, name: “Jane”}, {id: 4, name: “Jack”}]

“`

The above function accepts an array of objects and a property name as input. It uses the reduce() method to create a new object that maps the unique values of the input property to their corresponding objects.

We then use the Object.values() method to convert the object back to an array of unique objects.

Unique function for array of objects by multiple properties using a callback function

“`

function uniqueByCallback(arr, callback) {

return arr.filter(

(item, index, self) => index === self.findIndex((t) => callback(t, item))

);

}

const myArray = [

{ id: 1, name: ‘John’ },

{ id: 2, name: ‘Jane’ },

{ id: 3, name: ‘John’ },

{ id: 4, name: ‘Jack’ },

{ id: 5, name: ‘Jane’ },

];

const uniqueArray = uniqueByCallback(myArray, (a, b) => a.id === b.id && a.name === b.name);

console.log(uniqueArray);

// Output: [{id: 1, name: “John”}, {id: 2, name: “Jane”}, {id: 4, name: “Jack”}]

“`

The above function works the same way as the removeDuplicates() function we discussed earlier, but it is reusable and accepts a callback function as an argument. Conclusion:

In conclusion, removing duplicates from arrays is a common task in JavaScript.

There are several methods to remove duplicates, including using a Set, indexOf() and filter() methods, forEach() and include(), Map() and spread operator, and callback functions. It is important to choose the appropriate method depending on the use case and the type of array being manipulated.

Writing a reusable function can also save time and improve code readability. In this article, we explored various methods for removing duplicates from arrays in JavaScript.

We first discussed using a Set to remove duplicates quickly and efficiently. We then talked about using methods like indexOf(), filter(), and forEach() to remove duplicates based on specific conditions.

We also looked at removing duplicates from an array of objects using Map() and spread operator, and by multiple properties using a callback function. Finally, we discussed the importance of writing reusable functions to remove duplicates.

It is essential to use the appropriate method depending on the use case and array type to improve code readability and performance. Ensuring the removal of duplicates in arrays can help prevent errors and improve the functionality of code.

Popular Posts