How to Identify Duplicate Values Within an Array In JavaScript.

This blog post you’ll learn how to find items that appear more than once within a single array in JavaScript. We'll explore different approaches to identify these duplicate elements.

JavaScript Methods Used:

includes()
indexOf()
push()
forEach() method.

JavaScript loop used:

for loop.

Get the Common Items From A Given Array In JavaScript.

Apprache 1: Using for loop, include() and push() Method.

In this approach, we first create two separate arrays, new_array and common_array, in addition to the given array. 

We then use a for loop to iterate through the elements of the given array. For each element, we check if it already exists in new_array using the includes() method. If the element is not found, we add it to new_array using the push() method. Otherwise, if the element is already present, we add it to common_array instead.

This approach effectively identifies unique elements added to new_array and common elements added to common_array.

The includes() method is a common approach that returns true if the item is present in the array and false otherwise.

As an alternative to includes, you can use the indexOf method. This method returns the index of the first occurrence of the specified item in the array. If the item is not found, it returns -1.

JavaScript

    let fruits_array = ["Mango", "Orange", "Banana", "Apple", "Mango", "Orange", "Guava", "Grapes"];
    let new_array = [];
    let common_element = [];

    for (let i = 0; i < fruits_array.length; i++) {
        const element = fruits_array[i];
        if (!new_array.includes(element)) {
            new_array.push(element);
        } else {
            common_element.push(element)
        }
    }
    document.write("<b>Common Items: </b>", common_element);
    // Ouput:
    // Common Items: Mango,Orange
  

Approach 2: Using push(), indexOf() and forEach() Method.

This approach achieves the same functionality as approach 1, but utilises the forEach method instead of a traditional for loop. Additionally, I've employed the indexOf method (you can also use the includes method).

JavaScript

    let fruits_array = ["Mango", "Orange", "Banana", "Apple", "Mango", "Banana", "Orange", "Guava", "Grapes"];
    let new_array = [];
    let common_element = [];

    fruits_array.forEach(element => {
        if(new_array.indexOf(element) == -1){
            new_array.push(element);
        }else{
            common_element.push(element);
        }
    });
    document.write("<b>Common Items: </b>", common_element);
    // Ouput:
    // Common Items: Mango,Banana,Orange
  

You can also use includes() method.

JavaScript

    let fruits_array = ["Mango", "Orange", "Banana", "Apple", "Mango", "Orange", "Guava", "Grapes"];
    let new_array = [];
    let common_element = [];

    for (let i = 0; i < fruits_array.length; i++) {
        const element = fruits_array[i];
        if (!new_array.includes(element)) {
            new_array.push(element);
        } else {
            common_element.push(element)
        }
    }
    document.write("<b>Common Items: </b>", common_element);
    // Ouput:
    // Common Items: Mango,Orange
  

The above methods is case sensitive. You can make it case in-sensitive like this: Changing the case of array items. See below code:

JavaScript

    let fruits_array = ["Mango", "Orange", "Banana", "Apple", "mango", "Banana", "Orange", "Guava", "Grapes"];
    let new_array = [];
    let common_element = [];
    fruits_array.forEach(element => {
        if (new_array.indexOf(element.toLowerCase()) == -1) {
            new_array.push(element.toLowerCase());
        } else {
            common_element.push(element);
        }
    });

    document.write("<b>Common Items: </b>", common_element);
    // Ouput:
    // Common Items: mango,Banana,Orange
  

Approach 3: Using Combination filter() and includes() Methods.

This approach utilises the filter() and indexOf() methods to create a new array based on a specific condition.

The filter() method iterates through each element in the given array. It compares the index of each element (0, 1, 2, ...) with the index returned by the indexOf() method for the element's value.

The indexOf() method returns the first occurrence of a specific value within the array and its corresponding index. For example, if "mango" appears first in the array, the indexOf() method will return 1 (assuming zero-based indexing). If "mango" appears again later, it will still return 1, referencing the first occurrence.

Understanding the Comparison:

1. The index of each element is compared to its normal position in the array.
2. The first element ("mango") has an indexOf() result of 0 (first occurrence) and a normal index of 0. Since both are equal, the element is not filtered out.
3. The second element ("orange") has an indexOf() result of 1 (first occurrence) and a normal index of 1. Again, both are equal, so it's not filtered.
4. The third element ("apple") has an indexOf() result of 2 (first occurrence) and a normal index of 2. Both are equal, so it remains.
5. The fourth element (again "mango") has an indexOf() result of 0 (first occurrence) and a normal index of 3. Since they differ, this element is filtered out because it's a duplicate value.
6. This process continues for all elements in the array, resulting in a new array containing only unique elements based on their first occurrence.

JavaScript

    let fruits_array = ["Mango", "Orange", "Banana", "Apple", "Mango", "Orange", "Guava", "Grapes"];
    
    let new_array = fruits_array.filter((l, i) => { return fruits_array.indexOf(l) !== i });
    document.write("<b>Common item: </b>", new_array);
    // Ouput:
    // Common item: Mango,Orange
  

So, that's how you can find the common items within an array in JavaScript. If you have any questions or suggestions, feel free to write them in the comment section.