Skip to content
Related Articles

Related Articles

How to get all unique values (remove duplicates) in a JavaScript array?
  • Difficulty Level : Medium
  • Last Updated : 23 Apr, 2019
GeeksforGeeks - Summer Carnival Banner

Given an array which contains some values, the task is to remove the duplicate elements from the array.

Examples:

Input: listArray = ["Manish", "Chandan", "Piyush", "Manish", "Sunil", "Chandan"];
Output: Manish, Chandan, Piyush, Sunil

Method 1: This method checked each value of the original array (listArray) with each value of output array (outputArray) where the duplicate values are removed. If the current value does not exist in the output array with unique values, then add the element to the output array.

Example 1: This example generates an unique array of string values.




<!DOCTYPE html>
<html>
      
<head>
    <title>
        Remove duplicate elements
        from array
    </title>
</head>
  
<body>
      
    <!-- Script to remove duplicate elements
    from array -->
    <script>
        var array = ["Manish", "Chandan", "Piyush",
                     "Sunil", "Pankaj", "Piyush", 
                     "Pankaj", "Tiny", "Chandan",
                     "Manish"];
                       
        var outputArray = [];
          
        // Count variable is used to add the
        // new unique value only once in the
        // outputArray.
        var count = 0;
          
        // Start variable is used to set true
        // if a repeated duplicate value is 
        // encontered in the output array.
        var start = false;
          
        for (j = 0; j < array.length; j++) {
            for (k = 0; k < outputArray.length; k++) {
                if ( array[j] == outputArray[k] ) {
                    start = true;
                }
            }
            count++;
            if (count == 1 && start == false) {
                outputArray.push(array[j]);
            }
            start = false;
            count = 0;
        }
        document.write(outputArray);
    </script>
</body>
  
</html>                    

Output:



Manish, Chandan, Piyush, Sunil, Pankaj, Tiny

Example 2: This example returns the unique elements from array.




<!DOCTYPE html>
<html>
      
<head>
    <title>
        Remove duplicate elements
        from array
    </title>
</head>
  
<body>
      
    <!-- Script to remove duplicate elements
    from array -->
    <script>
        var array = [100, 23, 45, 67, 45,
                    33, 34, 69, 100, 23];
                       
        var outputArray = [];
          
        // Count variable is used to add the
        // new unique value only once in the
        // outputArray.
        var count = 0;
          
        // Start variable is used to set true
        // if a repeated duplicate value is 
        // encontered in the output array.
        var start = false;
          
        for (j = 0; j < array.length; j++) {
            for (k = 0; k < outputArray.length; k++) {
                if ( array[j] == outputArray[k] ) {
                    start = true;
                }
            }
            count++;
            if (count == 1 && start == false) {
                outputArray.push(array[j]);
            }
            start = false;
            count = 0;
        }
        document.write(outputArray);
    </script>
</body>
  
</html>                    

Output:

100, 23, 45, 67, 33, 34, 69

Method 2: Using array filter() method: The arr.filter() function is used to create a new array from existing array consisting of only those elements from the given array which satisfy a condition set by the argument function.

Syntax:

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

Parameters:

  • currentValue: It stores the value of current element.
  • index: This is the index of the current element being processed by the function.
  • arr: This is the array on which the .filter() function called.
  • thisValue: It is used to tell the function to use this value when executing argument function.

Example:




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Remove duplicate elements
        from array
    </title>
</head>
  
<body>
      
    <!-- Script to remove duplicate elements
    from array -->
    <script>
        var array = ['g', 'e', 'e', 'k', 's', 'f',
                'o', 'r', 'g', 'e', 'e', 'k', 's'];
          
        var outputArray = [];
          
        function removewithfilter(arr) {
            let outputArray = arr.filter(function(v, i, self)
            {
                  
                // It returns the index of the first
                // instance of each value
                return i == self.indexOf(v);
            });
              
            return outputArray;
        }
          
        document.write(removewithfilter(array));
    </script>
</body>
  
</html>                                      

Output:

g, e, k, s, f, o, r

Method 3: Using Set Method: A set is a collection of items which are unique i.e no element can be repeated. Set in ES6 are ordered : elements of the set can be iterated in the insertion order. Set can store any types of values whether primitive or objects.

Example:




   
<!DOCTYPE html>
<html>
  
<head>
    <title>
        Remove duplicate elements
        from array
    </title>
</head>
  
<body>
      
    <!-- Script to remove duplicate elements
    from array -->
    <script>
        var array = ["DS", "Algo", "OS", "HTML", "DS",
                     "OS", "Java", "HTML", "Algo"];
          
        var outputArray = [];
          
        function removeusingSet(arr) {
            let outputArray = Array.from(new Set(arr))
            return outputArray
        }
          
        document.write(removeusingSet(array));
    </script>
</body>
  
</html>                                     

Output:

DS, Algo, OS, HTML, Java

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :