How to Find All Unique Values in Array in Javascript

In this tutorial, you will learn how to find all unique values in array in javascript. Arrays are a common technique of representing a group of common items. It’s possible that the data types of the items are different. From a developer’s point of view, it can be a bit tricky to find all unique values in array.

This tutorial is primarily concerned with the string type. The functions toLowerCase() and toUpperCase() can only be used with strings, not numbers. Because there is no built-in mechanism for removing duplicate entries from an array, we must create our own.

In the following example, we have a global array of fruits. Initially, we will display all fruit names on the screen.  Upon click of a button, we will find all unique values in array and update our list. Please have a look over the code example and the steps given below.

HTML & CSS

  • We have 2 elements in the HTML file (button and ul).
  • The innerText for the button element is “Remove Duplicates”.
  • The ul element is empty as of now and we will populate it dynamically using javascript.
  • We have also included our javascript file script.js with a script tag at the bottom.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
  <button>Remove Duplicates</button>
  <ul></ul>
  <script src="script.js"></script>
</body>
</html>

Javascript

  • We have a global variable fruits and it holds an array of strings.
  • We have the addFruits() method which will populate our ul element with list of fruit names.
  • In addFruits() method, we are simply looping through the fruits array and creating a template string with a bunch of li elements.
  • We are displaying that list in the ul element by using the innerHTML property.
  • We are calling the addFruits() method to display our initial fruits list.
  • We have selected the button element using the document.querySelector() method and attached the click event listener to it.

Case Sensitive Comparison

  • We are using the Set constructor to create a Set of fruits. By default, you cannot have duplicate items in a Set. We are storing our fruits Set in the mySet variable
  • We are using Array.from() method to convert Set into an array. We are assigning it back to the fruits variable.
  • We are calling the addFruits() method to update our fruits list.

Case Insensitive Comparison

  • We are using the map() method to loop through all items in the array. Inside the loop, we are using the toLowerCase() method to have all fruit names in the lowercase.
  • We are using the filter() method to remove duplicate items from the array. Inside the loop, we are simply using the indexOf() method to check if a certain item is already present or not.
  • We are again using the map() method to capitalize the first letter of each fruit name.
  • Inside the loop, we are using the index of 0 to get the first letter and then using the toUpperCase() method to capitalize it. We are using the slice() method to slice the string from index 1. We are joining the capitalized letter and sliced string by using the addition (+) operator.
  • We are calling the addFruits() method to update our fruits list.
let fruits = ['Dragon fruit', 'Apple', 'Orange', 'Papaya', 'Plum', 'Watermelon', 'Papaya'];

function addFruits(){
    let template = fruits.map(fruit => `<li>${fruit}</li>`).join('\n');
    document.querySelector('ul').innerHTML = template;
}

addFruits();

document.querySelector('button').addEventListener('click', () =>{
    /* let mySet = new Set(fruits);
    fruits = Array.from(mySet);
    addFruits(); */

    fruits = fruits.map(fruit => fruit.toLowerCase());
    fruits = fruits.filter((item, index) => fruits.indexOf(item) == index);
    fruits = fruits.map(fruit => fruit[0].toUpperCase() + fruit.slice(1));
    addFruits();
});