Removing duplicate values in a twodimensional array in JavaScript

When working with two-dimensional arrays in JavaScript, you may need to remove duplicate values that appear across different sub-arrays. This article shows how to create a function that removes all duplicate values from a 2D array, keeping only the first occurrence of each value.

Problem Statement

We need to write a JavaScript function that takes a two-dimensional array and returns a new array where duplicate values across all sub-arrays are removed, preserving only the first occurrence of each value.

Example

Here's how to implement this functionality:

const arr = [
    [1,2,3,4,5],
    [3,4,6,7,8,2],
    [7,2,4,9,11,15],
    [10,12,3,7,11]
];

const removeDuplicates = arr => {
    let map = {};
    let res = [];
    res = arr.map(el => {
        return el.filter(val => {
            if(map[val]){
                return false;
            };
            map[val] = 1;
            return true;
        });
    });
    return res;
};

console.log(removeDuplicates(arr));

Output

[ [ 1, 2, 3, 4, 5 ], [ 6, 7, 8 ], [ 9, 11, 15 ], [ 10, 12 ] ]

How It Works

The function uses a hash map to track seen values:

1. Map Object: map stores values we've already encountered
2. Outer map(): Iterates through each sub-array
3. Inner filter(): For each element, checks if it exists in the map
4. First occurrence: If not in map, adds it and returns true (keeps the value)
5. Duplicates: If already in map, returns false (removes the value)

Alternative Approach Using Set

Here's a cleaner implementation using ES6 Set:

const removeDuplicatesWithSet = arr => {
    const seen = new Set();
    return arr.map(subArr => 
        subArr.filter(val => {
            if (seen.has(val)) return false;
            seen.add(val);
            return true;
        })
    );
};

const arr2 = [
    [1,2,3,4,5],
    [3,4,6,7,8,2],
    [7,2,4,9,11,15],
    [10,12,3,7,11]
];

console.log(removeDuplicatesWithSet(arr2));

[ [ 1, 2, 3, 4, 5 ], [ 6, 7, 8 ], [ 9, 11, 15 ], [ 10, 12 ] ]

Key Points

• Both approaches preserve the original array structure
• Only the first occurrence of each value is kept
• The Set approach is more modern and slightly more readable
• Time complexity: O(n×m) where n is number of sub-arrays and m is average sub-array length

Conclusion

Removing duplicates from 2D arrays requires tracking seen values across all sub-arrays. Use a hash map or Set to efficiently identify and filter duplicate values while maintaining the original array structure.