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

23 Apr, 2019
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
javascript-array
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Roadmap to Learn JavaScript For Beginners
Difference Between PUT and PATCH Request
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?