How to Remove Duplicate Elements from an Array In JavaScript?

5 mins0
How to remove duplicate elements from array in JavaScript

An array is a very useful data type to store multiple values structurally in every programming language. While in web development, JavaScript handles front-end data storage. Manipulating arrays is pretty common in JavaScript. It contains operations like adding, removing, or deleting some elements from an array.

But sometimes, we need to remove duplicate elements from the array so we can process array data as unique. There are many ways to perform this operation manually or using in-built functions.

In this article, we will below two methods to remove duplicate values or elements from an array.

  • Using Array indexOf() method
  • Using includes() method

Here both methods serve the same purpose but with different functionality or logic. It’s up to you to choose.

Remove Duplicate Using indexOf() method

In this method, we will loop through an array and get the indexOf each element. Then it will check whether the element exists in an array or not. If an element is already in an array then it will remove that element from an array.

At the end of the loop, it will contain only unique elements. While in a loop it searches elements every time and makes decisions based on result.

Let’s take an example to understand how it works:

function getUnique(array){
    var returnArray = [];

    // Loop through array
    for(i=0; i < array.length; i++){
        if(returnArray.indexOf(array[i]) === -1) {
            returnArray.push(array[i]);
        }
    }
    return returnArray;
}

var vehicles = ["Car", "Bike", "Cycle", "Bike", "Truck", "Bike"];
var uniqueVehicles = getUnique(vehicles);

console.log(uniqueVehicles);

It will produce output like below:

Array(4) [ "Car", "Bike", "Cycle", "Truck" ]

In the above code, we have created a function that will take an array as a parameter and then it will cycle all element into loop. In a loop, it will check element exists or not. If an element do not exist in an array then it will add it. At last, the function will return a new array containing unique values and prints it.

Remove Duplicate Elements Using includes() Function

The includes() function works the same as in array in other programming languages like PHP. It will check an array contains a particular value or not.

In this method, we will use the includes() function same as the previous one. We’ll loop through all elements and then use this function to find out whether a value exists in an array or not and perform an action based on the function return. Let’s create another example similar to previous:

function getUnique(array){
    var returnArray = [];

    // Loop through array
    for(i=0; i < array.length; i++){
        if(!returnArray.includes(array[i])) {
            returnArray.push(array[i]);
        }
    }
    return returnArray;
}

var vehicles = ["Car", "Bike", "Cycle", "Bike", "Truck", "Bike"];
var uniqueVehicles= getUnique(vehicles);

console.log(uniqueVehicles);

It will print output like below :

Array(4) [ "Car", "Bike", "Cycle", "Truck" ]

Both methods loop through all values and then create a new array with a unique value. Both functions has it’s unique functionality and it depends on how you use it. Here, both example returns the same output using different methods.

Conclusion

In this article, we have created a new array with unique values or other words removed duplicate elements from an array using indexOf() and includes() functions. Those functions are regularly used in web development.

Related Articles