How to Remove Duplicate Elements from an Array In JavaScript?

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

But sometimes, we need to remove duplicate elements from array and 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 array.

1. Using Array indexOf() method
2. Using includes() method

Here both methods serves 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 array and get indexOf each elements. Then it will check that element exists in array or not. If element is already in array then it will remove that element from array.

At end of the loop it will contains only unique elements. While in loop it search element every time and make decision based on result.

Let's take a 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 above code, we have created function which will take array as parameter and then it will cycle all element into loop. In loop, it will check element is exists or not. If element is not exist in array then it will add it. at last function will return new array containing unique values and prints it.

Remove Duplicate Elements Using includes() Function

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

In this methods, we will use includes() function same as previous. We'll loop through all elements and then use this function to find out value exists in array or not and perform action based on function return. Let's create another example same as 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" ]

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

Conclusion

In this article, we have created new array with unique values or other word removed duplicate elements from array using indexOf() and includes() functions. Those function regularly used in web developments.