How to get all unique values (remove duplicates) in a JavaScript array?

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:

Manish, Chandan, Piyush, Sunil, Pankaj, Tiny

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                                      

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

   
<!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>                                     

chevron_right


Output:

DS, Algo, OS, HTML, Java


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.