How to Filter a Map in JavaScript

Filter a Map in JavaScript #

To filter a Map in JavaScript:

1. Use the Map.forEach() method to iterate over the Map.
2. Check if each key-value pair meets a condition.
3. Use the Map.delete() method to delete all Map elements that don't meet the condition.

Copied!
const map1 = new Map([
  ['num1', 1],
  ['num2', 2],
  ['num3', 3],
]);

map1.forEach((value, key) => {
  if (value > 1) {
    map1.delete(key);
  }
});

// 👇️ {'num1' => 1}
console.log(map1);

We used the Map.forEach method to iterate over the Map object.

The function we passed to the forEach() method gets called for each key-value pair of the Map and gets passed the following parameters:

1. value - the value of the iteration
2. key - the key of the iteration
3. map - the Map object that's being iterated

We make use of the value to check for a condition and of the key to delete the Map elements that don't meet the condition.

An alternative approach is to convert the Map method to an array and use the filter method.

Filter a Map using filter() #

To filter a Map in JavaScript:

1. Convert the Map to an array.
2. Use the filter() method to iterate over the array.
3. Exclude the elements that don't meet the condition.
4. Convert the array back to a Map.

Copied!
const map1 = new Map([
  ['num1', 1],
  ['num2', 2],
  ['num3', 3],
]);

const filtered = new Map(
  Array.from(map1).filter(([_key, value]) => {
    if (value > 1) {
      return true;
    }

    return false;
  }),
);

// 👇️ {'num2' => 2, 'num3' => 3}
console.log(filtered);

We used the Array.from() method to convert the Map to an array of key-value pairs.

Copied!
const map1 = new Map([
  ['num1', 1],
  ['num2', 2],
  ['num3', 3],
]);

// 👇️ [['num1', 1], ['num2', 2], ['num3', 3]]
console.log(Array.from(map1));

When we convert the Map to an array, we get back a two-dimensional array, on which we can call the Array.filter() method.

The first element in each nested array is the key and the second is the corresponding value.

We used destructuring assignment to destructure the key and value in the callback function we passed to the filter() method.

Copied!
const [key, value] = ['num1', 1];

console.log(key); // 👉️ num1
console.log(value); // 👉️ 1

In the callback function, we check for a condition and return true if the condition is met and false otherwise.

The filter() method returns a new array that only contains the elements that meet the condition.

You can also shorten the callback function by returning the condition directly.

Copied!
const map1 = new Map([
  ['num1', 1],
  ['num2', 2],
  ['num3', 3],
]);

const filtered = new Map(
  Array.from(map1).filter(([_key, value]) => {
    return value > 1;
  }),
);

// 👇️ {'num2' => 2, 'num3' => 3}
console.log(filtered);

Instead of returning true or false explicitly, the code sample returns the condition directly.

The last step is to convert the array back to a Map using the Map() constructor.

Filter a Map using for...of #

You can also filter a Map by using a for...of loop.

Copied!
const map1 = new Map([
  ['num1', 1],
  ['num2', 2],
  ['num3', 3],
  ['num3', 4],
]);

for (const [key, value] of map1) {
  if (value > 1) {
    map1.delete(key);
  }
}

// 👇️ {'num1' => 1}
console.log(map1);

The for...of statement is used to loop over iterable objects like arrays, strings, Map, Set and NodeList objects and generators.

On each iteration, we check if the current value meets a certain condition and delete the elements we don't want to keep in the Map.