Introduction

Having duplicate values in an array in Javascript might be annoying, they can cause the code to misbehave.

In this guide, you will learn how to eliminate duplicated values found in an array with Javascript.

The Need To Remove Duplicates

Imagine a teacher, who has to record the data of n several students in a report sheet, and realizes the data are been duplicated like the image below.

Teacher's reaction:

Duplicated values in an array may need to be removed for a variety of reasons.

For instance, you could be dealing with a huge dataset and want to make sure your list of values is distinct.

Additionally, you could be dealing with user data and want to make sure your database doesn't include any duplicated data or values.

Solution: JavaScript "Includes" and "Filter" Methods

1. Includes() Method

   The includes() array method in javascript checks if the given parameters are present in the parent array.

   Imagine there are students in a classroom, and you're trying to mark the attendance of each student to check if they are present or not. This is how the includes() method works, you either get true or false.

   The includes() the method can take two parameters, the first parameter is the value to be searched for, and the second parameter is the position to start finding(which is optional) because, by default, it starts from 0.

   Below contains a codes snippet explaining the above

    //Note that arrays start counting from index zero
    const arr = [1,8,4,5,7]
    const test1 = arr.includes(8)
    const test2= arr.includes(8,2)//from the second index
    console.log(test1)//true
    console.log(test2)//false
   

    const anyNum = [1,8,4,5,7,5,8,7,7]
    const specialNum = []
    anyNum.forEach((i)=>{
        if(!specialNum.includes(anyNum[i])){
            specialNum.push(i)
        }
    })
    console.log(specialNum)//[ 1, 8, 4, 5, 7 ]
   

   Explanation:

   For you to get individual elements in an array, you need to iterate through the arrays. You will use the forEach() array method.

   The forEach() method iterates over each element in the array and does this by calling a function for every individual element in the array.

   Then check if each array element is not included in the empty array called specialNum, then push that element that cannot be found into the empty array.

   Yo!!! you've just conquered one of the ways to deal with the fear of duplication in an array🤭.

2. Filter() Method

   Using JavaScript's array method, the filter() method is one of the many techniques to get rid of duplicates from an array. You can construct a new array using the filter() method that only contains the elements that meet a specific condition.

   In this guide, you'll learn how to remove all duplicates from the parent array by creating a copy of the array using the filter() method which will only contain values without duplicates from the parent array.

   Below contains a snippet explaining how the filter() array method works:

    const arr = [1,2,3,4]
    const filteredArr = arr.filter((i)=> i>=3)
    console.log(filteredArr)//[ 3, 4 ]
    console.log(arr)//[ 1, 2, 3, 4 ]
   

   In the code above, the filter() method checks each element in the array that matches the condition given. Checking for each element that is greater or equal to 3 .

   In the code below, the indexOf() method checks if the current element is the first occurrence (emphasis on the first occurrence) of that value in the array.

   If the index of the current element is equal to the index passed to the callback function, then it is the first occurrence and the element is included in the new array.

   Confused😕? don't worry, I will give an example below:

    const arr = [1,1,2,2,3,3,4,4]
    const filteredArr = arr.filter((item,index)=> {
        console.log(arr.indexOf(item)) // 0 0 2 2 4 4 6 6
        console.log(index) // 0 1 2 3 4 5 6 7
    })
    //EXPLAINING IndexOf() (remember arrays start from index zero)
   
    //0 -- the first element in the array is 1, which occurred in index zero, so anywhere 1 occurs, it will have index zero.
   
    //0 -- the second element in the array which is also 1, gets the index zero from the first same element found.
   
    //2 -- the third element in the array is 2, which occurred in index two, so anywhere 2 occurs, it will have index two.
   
    //2 -- the fourth element in the array which is also 2, gets the index two from the first same element found.
   
    //4 -- the fifth element in the array is 3, which occurred in index four, so anywhere 3 occurs, it will have index four.
   
    //4 -- the sixth element in the array which is also 3, gets the index four from the first same element found.
   
    //6 -- the seventh element in the array is 4, which occurred in index six, so anywhere 4 occurs, it will have index six.
   
    //6 -- the eighth element in the array which is also 4, gets the index six from the first same element found
   

    const duplicatedNumbers =[1,1,2,2,3,3,4,4,5,5]
   
    const uniqueNumbers = duplicatedNumbers.filter((item, index) =>{
     return duplicatedNumbers.indexOf(item) === index}) 
   
    console.log(uniqueNumbers); // Output: [1, 2, 3, 4, 5]
   

   Explanation:

   The filter() array method takes a callback function as an argument. The callback function is called for each element in the array and is passed two arguments.

   The current element (item) and the index of the current element (index). The filter() array method returns the values that match the condition applied.

   Now stand up, and take a walk you've done well!👏

   Wrap up

   In this guide, you've learned how to eliminate duplicates from an array using the Javascript filter() and includes() methods.

   From the knowledge acquired in this guide, you will be able to make sure the values of an array are unique, and none is duplicating itself in the array for better performance.