JavaScript, like any other programming language, has many handy tricks that let us write our programs more easily. In this article, we will look at how to do different things that involve arrays, like removing duplicates in an array and emptying an array.
Removing Duplicates in an Array
Using Sets
Removing duplicate entries from an array is a problem that we often have to solve there’re a few ways to do it. With ES6 or later, one of the easiest ways to do it is to convert it to a Set and then convert it back to an array.
We can convert an array to a Set by using the Set constructor. The constructor takes one argument, which is any iterable object. This means we can pass in an array, or other array-like objects like the arguments object, strings, NodeLists, TypedArrays like Uinit8Array, Map, other Sets and any other object that have a Symbol.iterator method.
We can also pass in null , which makes an empty set. Then we convert the set back to an array with the spread operator. For example, if we have an array, we can write the following code to convert it to a Set and back to an array to remove duplicate entries:
let arr = [1, 1, 2, 2, 3, 4, 5, 5, 6, 6];
arr = [...new Set(arr)];
console.log(arr);
In the code above, we started off with arr having duplicate entries and at the end, we should have the following logged:
[1, 2, 3, 4, 5, 6]
Note that we use let in our declaration of our array. We need to use let so that we can assign the new array in the second back to our arr variable. The first occurrence of each entry is kept and the other repeat occurrences are discarded.
We can also use the Array.from method to convert a Set to an array. The first argument of the Array.from method is an array-like object, like the arguments object, strings, NodeLists, TypedArrays like Uinit8Array, Map, other Sets and any other object that has a Symbol.iterator method. This means that we can use it as an alternative to the spread operator inside an array-like in the following code:
let arr = [1, 1, 2, 2, 3, 4, 5, 5, 6, 6];
arr = Array.from(new Set(arr));
console.log(arr);
With the code above, we should get the same output as in the first example.
Using Array.filter Method
Another alternative way to remove duplicates from an array is to use an array’s filter method. The filter method lets us filter out array entries that already exists. It takes a callback function that has 2 parameters, the first one is an array entry and the second one is the index of the array that’s being iterated to by the filter method.
The filter method filter let us defined what we want to keep and return a new array with the entries kept. We can use it along with the indexOf method, which returns the first occurrence of an array entry.
The indexOf method takes in any object that we want to look up the index to. We can use it to filter out duplicate occurrences of array entries like in the following code:
let arr = [1, 1, 2, 2, 3, 4, 5, 5, 6, 6];
arr = arr.filter((entry, index) => arr.indexOf(entry) === index);
console.log(arr);
The callback function in the filter returns the condition of the array items that we want to keep. In the code above, we want to return arr.indexOf(entry) === index since we want to return the first occurrence of each entry only. arr.indexOf(entry) returns the index of the first occurrence of an entry and the index is the array entry that we want to check against as the filter method is iterating through it.
The first iteration of the filter method should have entry being 1 and index being 0, so we get:
arr.indexOf(1) === 0
which evaluates to true since indexOf gets the index of the first entry so it returns 0, so the filter method will keep it. In the next iteration, we have entry being 1 again and index being 1, so we get:
arr.indexOf(1) === 1
We already know that arr.indexOf(1) is 0 but the right side is 1. This means the expression will be evaluated to false , so the filter method will discard it. For the third entry, we have entry having the value 2, and index being 2. Then we get:
arr.indexOf(2) === 2
arr.indexOf(2) will return 2 since the first occurrence of 2 is 2, and we have 2 on the right side since index is 2, so the expression evaluates to true , so it’ll be kept in the returned array. This goes on until all the entries are iterated through and checked. Therefore, we should get the same entries as the other examples above.
Using Array.reduce Method
A third way to remove duplicate entries from an array is to use the reduce method. The method combines the entries of an array into one entity according to what we specify in the callback function that we pass in and returns the combined entity.
The reduce method takes in a function that has 2 parameters, the first parameter has array that entries that have the entries that were combined so far by the reduce method, and the second parameter has the entry that is to be combined into the first value in the first parameter.
The second argument is the initial value that the first parameter of the callback function will take on. For example, we can use it to filter out duplicate arrays like in the following code:
let arr = [1, 1, 2, 2, 3, 4, 5, 5, 6, 6];
arr = arr.reduce((noDupArr, entry) => {
if (noDupArr.includes(entry)) {
return noDupArr;
} else {
return [...noDupArr, entry];
}
}, [])
console.log(arr);
In the code above, we pass in a callback function that checks if the noDupArr , which is an array without any duplicate values, includes the entry in the second parameter by using the includes method that comes with arrays. The includes method takes in any object and lets us check if it’s already inside noDupArr . Therefore, if noDupArr.includes(entry) is true , then we return whatever has been combined so far. Otherwise, if the value hasn’t been included in the array already, then we can append the entry , by using the spread operator to spread the existing entries of noDupArr into a new array, then we add entry as the last entry of the array.
With this logic, the subsequent occurrences of values after the first value won’t be included in the newly combined array. Therefore, we won’t have duplicate entries included in the array. Initially, noDupArr will be an entry as specified by the second argument of the reduce method.
Empty an Array
There are a few ways to empty an array. We can either set it to an empty array or set the array’s length to 0. For example, we can set it to an empty array like in the following code:
let arr = [1, 1, 2, 2, 3, 4, 5, 5, 6, 6];
arr = [];
console.log(arr);
The code above is the most obvious way to do it. A less known way to empty an array is to set its length to 0, as we do below:
let arr = [1, 1, 2, 2, 3, 4, 5, 5, 6, 6];
arr.length = 0;
console.log(arr);
Then we should also get an empty array for arr .
Conclusion
There’re many ways to remove duplicate entries from an array, each leaving the first occurrence of a value intact and discard the subsequent occurrences. We can convert it to a Set and then back to an array with the spread operator.
Also, we can use the filter and indexOf methods to return a new array with only the first occurrence of a value kept since indexOf returns the first occurrence of a value and the second parameter of the callback function that we pass into filter if the index of the original array that we can check against.
We can use the reduce and includes method together to do something similar to the filter and indexOf methods.
To empty arrays, we can set its length to 0 or set it to an empty array directly.
