JavaScript is an easy to learn programming language. It’s easy to write programs that run and does something. However, it’s hard to account for all the uses cases and write robust JavaScript code.
In this article, we’ll look at how to remove duplicate items from an array in a reliable way.
Sets
We can use the JavaScript Set constructor to create sets, which are objects that can’t have duplicate items included.
Duplicate items are determined in a similar way to the === operator, but we -0 and +0 are considered to be different values.
NaN is also considered to the be same as itself for the purpose of determining duplicate items for Set s.
We can create a set from an array as follows:
const set = new Set([1, 2, 3, 3]);
Then we have Set instance that has 1, 2 and 3 as the value of set .
Since a Set is an iterable object, we can use the spread operator to convert it back to an array as follows:
const noDup = [...set];
As we can see, it’s very easy to convert a Set back to an array.
Since the algorithm for determining duplicates is determined in a similar way to the === operator, it works well for removing duplicate primitive values.
However, it doesn’t work well for objects unless they reference the same item in memory.
If we have objects, then the most reliable way to remove duplicates is to convert them to strings and then parse them back to objects.
For instance, if we have the following array:
const arr = [{
a: 1
}, {
a: 1
}];
Then we can write the following code to map the array to a string, turn it to a Set , then we can parse the remaining items back to objects as follows:
const set = new Set(arr.map(a => JSON.stringify(a)));
const noDup = [...set].map(a => JSON.parse(a));
In the code above, we have a Set , which is created from array entries that are stringified with JSON.stringify .
Then we use the spread operator to spread the set back to an array and then map the stringified entries back to objects with JSON.parse .
This works well for plain objects that have no methods in them.
If our objects have methods, then we should make sure that each entry reference the same object.
Set s also have methods to make traversing them easier. There’s the entries method to get all the entries as an iterator that returned each entry as an array with the [key, value] structure.
forEach takes a callback to loop through them. The keys and values methods let us get the keys and values respectively.
The clear method removes all items from a set.
It also has the size property to get the size of the Set .
Using the Spread Operator
The spread operator is one of the most useful features that are added recently to JavaScript.
When it’s used with arrays, it can let us make copies of arrays or merge them without calling any methods. This makes our code short and easy to read.
We just put everything in an array with the spread operator and then we get a new array with new items.
Also, it lets us combine items from different kinds of iterable objects into one array.
For instance, we can use the spread operator with multiple arrays as follows:
const arr1 = [1, 2, 3];
const arr2 = [4, 5];
const arr = [...arr1, ...arr2];
Then we get that the value of arr is [1, 2, 3, 4, 5] .
As we can see, the items are added in order into the new array with the spread operator.
Since the spread operator works with different kinds of iterable object, we can spread Map s and Set s into arrays as well:
const arr1 = [1, 2, 3];
const set = new Set([4, 5]);
const map = new Map();
map.set('a', 1);
map.set('b', 2);
const arr = [...arr1, ...set, ...map];
Then we get that arr is:
[
1,
2,
3,
4,
5,
[
"a",
1
],
[
"b",
2
]
]
The Map s are converted to an array with entries that are an array of key and value .
Conclusion
Set s are useful for removing duplicate items from arrays. They can also be converted or merged into arrays.
We can also merge multiple kinds of iterable objects into an array with the spread operator.
