How to remove duplicate values from array in javascript

Created at 11-Mar-2021 , By samar

How to remove duplicate values from array in javascript

In this article, we will see how to solve "How to remove duplicate values from array in javascript".

  • <script>
        var fruits = ["Apple", "Banana", "Mango", "Orange", "Banana", "Papaya"];
        var uniqueFruits = [];
        $.each(fruits, function(i, el){
            if($.inArray(el, uniqueFruits) === -1) uniqueFruits.push(el);
        });
        console.log(uniqueFruits);
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    
    You can use jQuery $.each() and $.inArray() method to remove duplicate values from array. Here $.each() function is used to iterate over an array and you can get each element and insert into a new array (uniqueFruits) if it does not already exist in it by using the $.inArray method. $.inArray() method returns the index number of the element of the uniqueFruits array. If the index number of the element is -1 which means the element does not exist then it pushes (inserts) the element into the uniqueFruits array. The $.inArray() method is similar to JavaScript's native indexOf() method in that it returns -1 when it doesn't find a match. You can change the array values and array variable names as per your requirements.
  • <script>
        var fruits = ["Apple", "Banana", "Mango", "Lemon", "Banana", "Orange", "Papaya"];
        function removeDuplicates(data){
         	return	data.filter((value, index) => data.indexOf(value) === index);
        }
        console.log(removeDuplicates(fruits));
    </script>
    
    You can use the filter method to remove duplicate values from the array in javascript. It creates a new array of elements which pass the condition we provide.
  • <script>
    	var fruits = ["Apple", "Banana", "Mango", "Lemon", "Banana", "Orange", "Papaya"];
    	function removeDuplicates(data){
     		return [...new Set(data)];
    	}
    	console.log(removeDuplicates(fruits));
    </script>
    
    Set is a new object type that allows you to create a collection of unique values. It removes the duplicate items from the given data and returns the value in the form of javascript array.
  • <script>
        var arr = ["Apple", "Banana", "Mango", "Lemon", "Banana", "Orange", "Papaya"];
        function removeDuplicates(data){
          	let uniqueItemsArray =  [];
          	data.forEach(element => {
          		if(!uniqueItemsArray.includes(element)) {
            			uniqueItemsArray.push(element)
            	          	}
          	});
         	return uniqueItemsArray;
        }
        console.log(removeDuplicates(arr));
     </script>
    
    Javascript forEach() method can be used to remove duplicate items of an array in javascript. We can iterate over the elements in the array and push the element to the new defined array (uniqueItemsArray) if the element does not already exist in it using the push() method.
  • <script>
    	var arr = ["Apple", "Banana", "Mango", "Lemon", "Banana", "Orange", "Papaya"];
        function removeDuplicates(data){
          	let uniqueItemsArray =  data.reduce(function(a, b){
        	if(a.indexOf(b) < 0) 
                a.push(b);
        		return a;
      	    }, []);
      	    return uniqueItemsArray;
    	}
    	console.log(removeDuplicates(arr));
    </script>
    
    The reduce method is used to reduce the elements of the array and combine them into a final array based on some reducer function that you pass.
  • <script>
        var arr = ["Apple", "Banana", "Mango", "Lemon", "Banana", "Orange", "Papaya"];
        Array.prototype.unique = function() {
           	var uniqueItemsArr = [];
           	for( i = 0; i < this.length; i++){
          	      var current = this[i];
                  if(uniqueItemsArr.indexOf(current) < 0) uniqueItemsArr.push(current);
          	}
            return uniqueItemsArr;
       }
       console.log(arr.unique())
    </script>
    
    In Javascript the array prototype constructor allows you to add new properties and methods to the Array object. We can create a new method unique and call it by arr.unique() method and it returns an array with unique values.
  • <script>
        var arr = ["Apple", "Banana", "Mango", "Lemon", "Banana", "Orange", "Papaya"];
        Array.prototype.unique = function() {
            return Array.from(new Set(this));
        }
       console.log(arr.unique())
    </script>
    
    You can use Set() object type in Array.prototype constructor to remove duplicate records from array. It automatically removes elements which already exist in it and it is much faster when you compare with the normal approach which is used for-loop to insert records into the array.

Back to code snippet queries related javascript

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Buy Me A Coffee

Don't forget to share this article! Help us spread the word by clicking the share button below.

We appreciate your support and are committed to providing you valuable and informative content.

We are thankful for your never ending support.