Remove Duplicates From Array JavaScript

Remove Duplicates From Array JavaScript

To remove duplicates from array javascript; Through this tutorial, you will learn several ways on how to remove duplicates from an array in javascript using set object, for loop and filter().

JavaScript Remove Duplicates From Array

Use the following javascript array methods to remove the duplicates from an array using set object, filter() and foreach loop in javaScript:

  • 1: How to remove duplicates from array in javascript using Set Object
  • 2: To remove duplicates from array javascript using Array.filter() Method
  • 3: To remove duplicates from array javascript using foreach loop

1: How to remove duplicates from array in javascript using Set Object

You can use a set object to remove duplicate from an array in javascript.

Syntax

new Set([value]);

Note:– Value – If the parameter is not specified or null is passed
then a new set created is empty.

Ex1:- Using the Set Object Method

We have a number array in javascript, and it has duplicate elements in it. You can use the set object to remove duplicate numbers from array in javascript. You can see the below example:

    var number = [1, 2, 1, 3, 4, 5, 2, 6, 3, 4];

    var unique = [...new Set(number)];
  
    document.write( "Output :- " + unique ); 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>javascript remove duplicate numbers from array</title>
</head>
<body>
  <script type = "text/javascript">
    
    var number = [1, 2, 1, 3, 4, 5, 2, 6, 3, 4];

    var unique = [...new Set(number)];
  
    document.write( "Output :- " + unique ); 

  </script>  
</body>
</html>

Result of the above code is: Output :- 1,2,3,4,5,6

2: To remove duplicates from array javascript using Array.filter() Method

You can use the javascript array filter() and indexof() method to remove duplicates elements or values from array in javascript.

Syntax of filter method:

array.filter(function(currentValue, index, arr), thisValue)

Ex1:- Using the Array.filter() method

    var number = [1, 2, 1, 3, 4, 5, 2, 6, 3, 4];
    
    var x = (number) => number.filter((v,i) => number.indexOf(v) === i)
  
    document.write( "Output :- " + x(number) ); 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>javascript remove duplicate elements or values from array using filter() function</title>
</head>
<body>
  <script type = "text/javascript">
    
    var number = [1, 2, 1, 3, 4, 5, 2, 6, 3, 4];

	var x = (number) => number.filter((v,i) => number.indexOf(v) === i)
  
    document.write( "Output :- " + x(number) ); 

  </script>  
</body>
</html>


Result of the above code is: Output :- 1,2,3,4,5,6

Ex2:- Using javascript filter method()

We have an array with duplicate values in javascript. And if you want to remove duplicate elements or values from string array in javascript. So you can use the below example:

  var array = ['John','Make','Mac', 'David', 'Smith', 'John', 'Mac', 'Make']
  var filterArray = array.filter(function(item, index){
       return array.indexOf(item) >= index;
   });
  
   document.write( "Output :- " + filterArray ); 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Remove duplicate elements from string array</title>
</head>
<body>
  <script type = "text/javascript">
    
    var array = ['John','Make','Mac', 'David', 'Smith', 'John', 'Mac', 'Make']
    var filterArray = array.filter(function(item, index){
        return array.indexOf(item) >= index;
    });
  
    document.write( "Output :- " + filterArray ); 

  </script>  
</body>
</html>

Result of the above code is: Output:- John, Make, Mac, David, Smith

3: To remove duplicates from array javascript using foreach loop

You can use the array.forEach method of javascript to remove duplicates values or elements from array.

Syntax

 array.forEach(function(currentValue, index, arr), thisValue);

Ex1:- Using the forEach() method

You can see the example of remove duplicates from array javascript using forEach:

    var number = [1, 2, 1, 3, 4, 5, 2, 6, 3, 4];

	function removeDuplicateFromArray(number) {
	  var uniqueVal = {};
	  number.forEach(function(i) {
	    if(!uniqueVal[i]) {
	      uniqueVal[i] = true;
	    }
	  });
	  return Object.keys(uniqueVal);
	}
  
    document.write( "Output :- " + removeDuplicateFromArray(number) ); 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using foreach method of javascript, to remove duplicate elements or values from array</title>
</head>
<body>
  <script type = "text/javascript">
    
    var number = [1, 2, 1, 3, 4, 5, 2, 6, 3, 4];

	function removeDuplicateFromArray(number) {
	  var uniqueVal = {};
	  number.forEach(function(i) {
	    if(!uniqueVal[i]) {
	      uniqueVal[i] = true;
	    }
	  });
	  return Object.keys(uniqueVal);
	}
  
    document.write( "Output :- " + removeDuplicateFromArray(number) ); 

  </script>  
</body>
</html>


Result of the above code is: Output :- 1,2,3,4,5,6

You may like more javascript array methods with examples, Find below:

Recommended JavaScript Tutorials

Recommended:-JavaScript Arrays

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *