Remove Array Items That Appear More Than Once In JavaScript.

 In this blog post you’ll learn how to remove the duplicate items from the array in JavaScript. We'll see different approaches to remove the array item that come more than once in an array in JavaScript.

JavaScript Method Used:

array.forEach() Method.
includes()
filter()
indexOf()
push()

Remove Duplicate Items From Array.

We’ll see different approaches to remove the same items present in the same array in JavaScript.

Approach 1: Using includes(), push() method and for loop.

In this approach we first create an empty array with the name updated_array (variable). Then we run a for loop and check each and every item of the given array that is present in the empty array (updated_array) or not using the include() method. If not then we push that item inside the updated_array. Likewise we get the unique items in the updated_array.

Include method returns true if element found in array otherwise returns false.

JavaScript

    let fruits_array = ["mango", "banana", "apple", "pineapple", "mango", "guava", "banana", "orange"];

    let updated_array = [];
    for (let i = 0; i < fruits_array.length; i++) {
        const element = fruits_array[i];
        if (!updated_array.includes(element)) {
            updated_array.push(element);
        }
    }
    document.write("<b>Original Array: </b>", fruits_array);
    document.write("<br>");
    document.write("<b>Updated_array: </b>", updated_array);

    // Output:

    // Original Array: mango,banana,apple,pineapple,mango,guava,banana,orange

    // Updated_array: mango,banana,apple,pineapple,guava,orange
  

Instead of the includes() method. Here, you can also use the indexOf() method.

indexOf() method returns the index of the search item otherwise it returns -1.

JavaScript

    let fruits_array = ["mango", "banana", "apple", "pineapple", "mango", "guava", "banana", "orange"];

    let updated_array = [];
    for (let i = 0; i < fruits_array.length; i++) {
        const element = fruits_array[i];
        if (updated_array.indexOf(element) === -1) {
            updated_array.push(element);
        }
    }
    document.write("<b>Original Array: </b>", fruits_array);
    document.write("<br>");
    document.write("<b>Updated_array: </b>", updated_array);

    // Output:
    // Original Array: mango,banana,apple,pineapple,mango,guava,banana,orange

    // Updated_array: mango,banana,apple,pineapple,guava,orange
      

Approach 2: Using a combination of Filter(), indexOf() method.

In this approach we use a filter method in which we run a function. In which we compare the index value of the first occurred item and normal index value of array and return the matched index item. 

For example:

JavaScript

    let fruits_array = ["mango", "banana", "apple", "pineapple", "mango", "guava", "banana", "orange"];

    document.write("<b>Index based on 1st occurence.</b>");
    document.write("<br>");
    for (let o = 0; o < fruits_array.length; o++) {
        const element = fruits_array[o];
        document.write(fruits_array.indexOf(element), "  - " + element);
        document.write("<br>");
        
    }

    document.write("<br>");
    document.write("<b>Normal index</b>");
    document.write("<br>");

    for (let o = 0; o < fruits_array.length; o++) {
        const element = fruits_array[o];
        document.write(o, " - " + element);
        document.write("<br>");
        
    }
  

Output:

As you can see both the indexes are different at some indexes in the same array. 

Lets say index based on first occurence is A and normal index is B. 

So the first mango index of A is equal to the first mango index of B, so it will be added to the array. Second banana index value of A is equal to the second banana index value of B so this is also added to the array. Likewise all the array items are stored in a new array whose fruit name index is the same in both A and B. If not the same then it will not be stored.

Here below is the final code for removing the duplicate array item using filter() and indexOf() method.

JavaScript

    let fruits_array = ["mango", "banana", "apple", "pineapple", "mango", "guava", "banana", "orange"];

    let updated_array = fruits_array.filter(function(l,i){return fruits_array.indexOf(l) === i});

    document.write("<b>Original Array: </b>", fruits_array);
    document.write("<br>");
    document.write("<b>Updated_array: </b>", updated_array);
    // Output:
    
    // Original Array: mango,banana,apple,pineapple,mango,guava,banana,orange
    
    // Updated_array: mango,banana,apple,pineapple,guava,orange
  

Approach 3: Using includes(), push() method and forEach() Method.

In this approach First we create an empty array with name updated_array. We call the function for each item of given array. In that function we check each array item that is present in an empty array (updated_array) or not using the include() method. If not then we push that item inside the updated_array using push() method.

JavaScript

    let fruits_array = ["mango", "banana", "apple", "pineapple", "mango", "guava", "banana", "orange"];
    let updated_array = [];
    fruits_array.forEach(element => {
        if (!updated_array.includes(element)) {
            updated_array.push(element);
        }
    });

    document.write("<b>Original Array: </b>", fruits_array);
    document.write("<br>");
    document.write("<b>Updated_array: </b>", updated_array);

    // Output:
    // Original Array: mango,banana,apple,pineapple,mango,guava,banana,orange

    // Updated_array: mango,banana,apple,pineapple,guava,orange
  

This is how you can remove duplicate items, or elements that appear more than once, from a JavaScript array. Feel free to leave any questions or suggestions in the comments section.