Morioh
Login
JavaScript Dev

JavaScript Dev

4 years ago

Javascript – Remove Duplicates from Array

javascript remove duplicates from the array. In this tutorial, we will explain how to remove duplicate elements or values from an array in javascript.

Here, we will demonstrate to you, many ways or methods to remove duplicate elements or values from a string or numeric array in javascript with examples.

JavaScript Methods: Remove Duplicates From Array Javascript

This tutorial demonstrates easy ways for you. To remove the duplicates from array in javascript.

1. First Way – 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. Second Way – filter() function

You can use the javascript 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. Third Way – forEach() Method

You can use the 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:

#javascript #programming

Javascript – Remove Duplicates from Array
10.15 GEEK