How to find duplicate values in a JavaScript array?

In this tutorial, we will discuss how we can find duplicate or repeating values in a JavaScript array using different methods or approaches to reach the solution to this problem.

Below is the list of the approaches or methods we can use to solve the problem of finding duplicates −

Let us discuss all of the above approaches to find duplicates in the JavaScript array −

By Simply Traversing the Array

Traversing the array using a nested for loop to find the duplicates is the most basic and naïve approach, which takes O(n2) time and O(n) extra space to solve the problem.

In this method, we use two for loops that are nested, where the first loop indicates the array item for which we search for duplicates in the remaining array, while another loop will traverse the array for remaining items and compares it with the item that is contained by the first loop.

Algorithm

  • Step 1 − First we need to create a JavaScript array in which we will search for the duplicate elements.
  • Step 2 − We will create a new empty array that holds the items that are repeated in the original array.
  • Step 3 − In the next step, we will create a JavaScript function that contains the original logic of finding duplicates using nested for loops and updates the new array created in the previous step with the values that are repeated. After updating the new array, it will return it.
  • Step 4 − In the last step, we will display the items contained by the new array because those values are the value which has duplicates in the original array.

Example 1

Below code example will show how we can get duplicate values in an array.

<!DOCTYPE html>
<html>
<body>
   <h3>Finding duplicate values in a JavaScript array</h3>
   <p>Here, we will find the repeating values in the given array.</p>
   <p>Original array: [6, 9, 15, 6, 13, 9, 11, 15]</p>
   <p id="result"></p>
   <script>
      //simple traversal method
      let array = [6, 9, 15, 6, 13, 9, 11, 15];
      let index = 0, newArr = [];
      const length = array.length; // to get length of array
      function findDuplicates(arr) {
         for (let i = 0; i < length - 1; i++) {
            for (let j = i + 1; j < length; j++) {
            if (arr[i] === arr[j]) {
                  newArr[index] = arr[i];
                  index++;
               }
            }
         }
         return newArr;
      }
      document.getElementById('result').innerHTML = 'Duplicate values are: <b>' + findDuplicates(array) + '</b>';
   </script>
</body>
</html>

In above example, we have taken original array as array and new array as newArr, the findDuplicates() method which takes array as an argument and traverse it using two nested for loops to find out the duplicates in the array and updates the newArray with the values that are repeated or have duplicates in the original array.

Using the filter() and indexOf() Methods

This is the shortest and the easiest way of finding duplicates in an array, where the filter() method traverses the array and filters items according to the defined condition and returns a new array, while the indexOf() gives the index of the passed item.

Steps

  • Step 1 − In this step, we need to define an array to operate on.
  • Step 2 − Define the JavaScript function that contains the logic to find duplicates using the filter() and indexOf() method.
  • Step 3 − The third step contains the way of displaying the output data on the user screen.

Example 2

<!DOCTYPE html>
<html>
<body>
   <h3>Finding duplicate values in a JavaScript array</h3>
   <p>Here, we will find the repeating values in the given array.</p>
   <p>Original array: [1, 4, 8, 2, 4, 1, 6, 2, 9, 7]</p>
   <p id="result"></p>
   <script>
      // indexOf() and filter()
      var array = [1, 4, 8, 2, 4, 1, 6, 2, 9, 7];
      function findDuplicates(arr) {
         return arr.filter((currentValue, currentIndex) =>
         arr.indexOf(currentValue) !== currentIndex);
      }
      document.getElementById('result').innerHTML = 'Duplicate values are: <b>' + findDuplicates(array) + '</b>';
   </script>
</body>
</html>

In the example above, the array is the original array that is passed to the findDuplicates() method where the filter() method filters the array by comparing the currentIndex with the index of currentValue appears in the array.

Using Set() object and has() Method

In this method, we will use a set object and has() method of JavaScript, where the set object will allow us to store the unique values of any type, and has() method is used to check whether the current array element is present in the list or not.

STEPS

  • Step 1 − The first step involves the creation of a dummy array and the setting of the unique values in the set object.
  • Step 2 − In the next step, we will use the filter() method to traverse and filter the array by checking whether the set contains the current element or not by using the has() method.
  • Step 3 − Next step is to display the repeating or duplicate elements on the user screen.

Example 3

<html>
<body>
   <p>Original array: [3, 8, 7, 5, 3, 9, 8]</p>
   <p id="result"></p>
   <script>
      // using set() and has() method
      const array = [3, 8, 7, 5, 3, 9, 8];
      const uniqueSet = new Set(array);
      const filteredElements = array.filter(currentValue => {
            if (uniqueSet.has(currentValue)) {
               uniqueSet.delete(currentValue);
            }
            else {
               return currentValue;
            }
         }
      );
      document.getElementById('result').innerHTML = 'Duplicate values are: <b>' + filteredElements + '</b>';
   </script>
</body>
</html>

In the above example, the array is the initial array, and uniqueSet is the set that contains all the values from the array only one time. After that we are using the filter() function where the array is checked for duplicate values with uniqueSet using has() method, and it will return all the values from the array that remains after deleting the items that are common in the uniqueSet and array.

In this tutorial, we have learned about the three different ways of finding duplicate values in an array, where all the methods return the duplicate values that are associated with a particular array

Updated on: 02-Sep-2023

62K+ Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements