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

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

We can get all unique values in a JavaScript array in the following ways:

• Using for loop
• Using filter() Method
• Using set() Method
• Using reduce() Method
• Using indexOf() Method
• Using forEach() Method
• Using Underscore.js _.uniq() Function

Method 1: Using for loop

This method checked each value of the original array (listArray) with each value of the 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 a unique array of string values. 

Javascript

// Creating a 3x4 two-dimensional array
let Arr = [
    "Manish", "Chandan", "Piyush",
    "Sunil", "Pankaj", "Piyush",
    "Pankaj", "Tiny", "Chandan",
    "Manish"];

let outputArray = [];

// Count variable is used to add the
// new unique value only once in the
// outputArray.
let count = 0;

// Start variable is used to set true
// if a repeated duplicate value is
// encontered in the output array.
let start = false;

for (let j = 0; j < Arr.length; j++) {
    for (let k = 0; k < outputArray.length; k++) {
        if (Arr[j] == outputArray[k]) {
            start = true;
        }
    }
    count++;
    if (count == 1 && start == false) {
        outputArray.push(Arr[j]);
    }
    start = false;
    count = 0;
}

console.log(outputArray);

Output

[ 'Manish', 'Chandan', 'Piyush', 'Sunil', 'Pankaj', 'Tiny' ]

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

Javascript

let Arr = [100, 23, 45, 67, 45,
    33, 34, 69, 100, 23];

let outputArray = [];

// Count variable is used to add the
// new unique value only once in the
// outputArray.
let count = 0;

// Start variable is used to set true
// if a repeated duplicate value is
// encontered in the output array.
let start = false;

for (let j = 0; j < Arr.length; j++) {
    for (let k = 0; k < outputArray.length; k++) {
        if (Arr[j] == outputArray[k]) {
            start = true;
        }
    }
    count++;
    if (count == 1 && start == false) {
        outputArray.push(Arr[j]);
    }
    start = false;
    count = 0;
}

console.log(outputArray);

Output

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

Method 2: Using the Array filter() method:

The arr.filter() function is used to create a new array from an 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 the 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 is called.
• thisValue: It is used to tell the function to use this value when executing the argument function.

Example: In this example, we will be using the array filter() method to remove duplicates from the array.

Javascript

let Arr = [
    'g', 'e', 'e', 'k', 's',
    'f', 'o', 'r', 'g', 'e',
    'e', 'k', 's'
];

let 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;
}

console.log(removewithfilter(Arr));

Output

[
  'g', 'e', 'k',
  's', 'f', 'o',
  'r'
]

Method 3: Using set() Method

A set is a collection of items that 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. The set can store any type of value whether primitive or objects. 

Example: In this example, we will be using the set() method to remove duplicates from the array.

Javascript

let Arr = [
    "DS", "Algo", "OS", "HTML", "DS",
    "OS", "Java", "HTML", "Algo"
];

let outputArray = [];

function removeusingSet(arr) {
    let outputArray = Array.from(new Set(arr))
    return outputArray
}

console.log(removeusingSet(Arr));

Output

[ 'DS', 'Algo', 'OS', 'HTML', 'Java' ]

Method 4: Using reduce() Method

The reduce() method is used to reduce the elements of the array and combine them into a final array based on some reducer function that you pass.

Example: In this example, we will see the use of the reduce() method.

Javascript

let arr = ["apple", "mango",
          "apple", "orange", "mango", "mango"];

function removeDuplicates(arr) {
    let unique = arr.reduce(function (acc, curr) {
        if (!acc.includes(curr))
            acc.push(curr);
        return acc;
    }, []);
    return unique;
}
console.log(removeDuplicates(arr));

Output

[ 'apple', 'mango', 'orange' ]

Method 5: Using forEach() Method

By using the forEach() method, we can iterate over the elements in the array, and we will push into the new array if it doesn’t exist in the array.

Example: In this example, we will see the use of the forEach() method.

Javascript

let arr = ["apple", "mango",
        "apple", "orange", "mango", "mango"];

function removeDuplicates(arr) {
    let unique = [];
    arr.forEach(element => {
        if (!unique.includes(element)) {
            unique.push(element);
        }
    });
    return unique;
}
console.log(removeDuplicates(arr));

Output

[ 'apple', 'mango', 'orange' ]

Method 6: Using indexOf() Method

The indexOf() method is used to find the first index of occurrence of an array element. we can iterate over the elements in the array, and we will push into the new array if it doesn’t exist in the resultant array. 

Example: In this example, we will see the use of the indexOf() method.

Javascript

let arr = ["apple", "mango",
        "apple", "orange", "mango", "mango"];

function removeDuplicates(arr) {
    let unique = [];
    for (i = 0; i < arr.length; i++) {
        if (unique.indexOf(arr[i]) === -1) {
            unique.push(arr[i]);
        }
    }
    return unique;
}
console.log(removeDuplicates(arr));

Output

[ 'apple', 'mango', 'orange' ]

Method 7: Using Underscore.js _.uniq() Function

We can also use a third-party library such as Lodash or Underscore.js to remove duplicate elements from a Javascript array. The _.uniq() function returns the array which does not contain duplicate elements.

Example: In this example, we will use the _.uniq() function.

Javascript

const _ = require('underscore');
console.log( _.uniq([1, 2, 3, 4, 5, 4, 3, 2, 1]));

Output:

[ 1, 2, 3, 4, 5 ]