JavaScript Program to Remove Duplicates from an Array

Introduction

Removing duplicates from an array is a common task in programming. JavaScript provides several ways to achieve this, such as using Set, filter(), and reduce() methods. This guide will walk you through writing a JavaScript program to remove duplicates from an array using different approaches.

Problem Statement

Create a JavaScript program that:

• Accepts an array of integers or strings.
• Removes duplicate elements from the array.
• Displays the result with duplicates removed.

Example:

• Input: [1, 2, 2, 3, 4, 4, 5]

• Output: [1, 2, 3, 4, 5]

• Input: ['apple', 'banana', 'apple', 'orange']

• Output: ['apple', 'banana', 'orange']

Solution Steps

1. Initialize the Array: Provide an array with duplicate elements.
2. Remove Duplicates Using a Set: Convert the array to a Set, which automatically removes duplicates.
3. Alternative: Use filter(): Implement the filter() method to keep only unique elements.
4. Display the Result: Output the array with duplicates removed.

JavaScript Program

Method 1: Using Set

// JavaScript Program to Remove Duplicates from an Array using Set
// Author: https://www.rameshfadatare.com/

function removeDuplicates(arr) {
    // Step 1: Convert the array to a Set to remove duplicates
    const uniqueArray = [...new Set(arr)];

    // Step 2: Display the result
    console.log("Array with duplicates removed:", uniqueArray);
}

// Example usage
const numbers = [1, 2, 2, 3, 4, 4, 5];
removeDuplicates(numbers);

Method 2: Using filter()

// JavaScript Program to Remove Duplicates from an Array using filter()
// Author: https://www.rameshfadatare.com/

function removeDuplicatesFilter(arr) {
    // Step 1: Use filter to remove duplicates
    const uniqueArray = arr.filter((value, index) => arr.indexOf(value) === index);

    // Step 2: Display the result
    console.log("Array with duplicates removed (using filter):", uniqueArray);
}

// Example usage
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana'];
removeDuplicatesFilter(fruits);

Method 3: Using reduce()

// JavaScript Program to Remove Duplicates from an Array using reduce()
// Author: https://www.rameshfadatare.com/

function removeDuplicatesReduce(arr) {
    // Step 1: Use reduce to accumulate unique values
    const uniqueArray = arr.reduce((unique, value) => {
        if (!unique.includes(value)) {
            unique.push(value);
        }
        return unique;
    }, []);

    // Step 2: Display the result
    console.log("Array with duplicates removed (using reduce):", uniqueArray);
}

// Example usage
const names = ['John', 'Alice', 'John', 'Bob', 'Alice'];
removeDuplicatesReduce(names);

Explanation

Method 1: Using Set

• The Set object automatically removes duplicate values because it only stores unique elements. By converting the array to a Set and back to an array using the spread operator [...], you can easily remove duplicates.

Method 2: Using filter()

• The filter() method iterates through the array and returns only elements whose first occurrence index matches the current index (arr.indexOf(value) === index). This ensures that only unique elements are retained.

Method 3: Using reduce()

• The reduce() method accumulates a new array by pushing elements into the accumulator only if they haven't been added already. This method is flexible and can be customized for more complex cases.

Output Example

Array with duplicates removed: [1, 2, 3, 4, 5]
Array with duplicates removed (using filter): ['apple', 'banana', 'orange']
Array with duplicates removed (using reduce): ['John', 'Alice', 'Bob']

Conclusion

This JavaScript program demonstrates three different ways to remove duplicates from an array using Set, filter(), and reduce(). Each method provides a unique approach to solving the problem efficiently. This exercise is useful for understanding array manipulation techniques in JavaScript and learning how to handle duplicate data.