Filter out null values from a map in JavaScript
This post will discuss how to filter out the null values from a map in JavaScript.
Filtering out the null values from a map in JavaScript is a common task that can be done in different ways. Here are some examples:
1. Using Array.filter() function
If we have an object literal as a map, we can use the Object.entries() function to get an array of the key-value pairs, and then use the Array.filter() function to remove the pairs that have null values. However, this takes two iterations and an extra array to be created. The following code illustrates this:
|
1 2 3 4 5 6 7 |
// Create an object with some null values const obj = {a: 1, b: null, c: 3, d: null}; // Filter out the pairs with null values const filtered = Object.entries(obj).filter(([key, value]) => value !== null); console.log(filtered); // [['a', 1], ['c', 3]] |
This function will not modify the original map object, but creates an array of arrays. If we want to convert it back to an object or a Map, we can use the Object.fromEntries() function and Map() constructor, respectively. The following code illustrates this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// Create an object with some null values const obj = {a: 1, b: null, c: 3, d: null}; // Filter out the pairs with null values const filtered = Object.entries(obj).filter(([key, value]) => value !== null); console.log(filtered); // [['a', 1], ['c', 3]] // Create a new object from the filtered array const filteredObj = Object.fromEntries(filtered); console.log(filteredObj); // {a: 1, c: 3} // Create a new map from the filtered array const filteredMap = new Map(filtered); console.log(filteredMap); // Map(2) { 'a' => 1, 'c' => 3 } |
If we have a Map object as a map, we can use the Array.from() function to convert the map into an array of entries (key-value pairs) and use the Array.filter() function to remove the ones with null values. Then we can use the new Map() constructor to create a new map from the filtered array. For example:
|
1 2 3 4 5 6 7 8 9 10 |
// Create a map with some null values let map = new Map([['a', 1], ['b', null], ['c', 3], ['d', null]]); // Filter out entries with null values let filtered = Array.from(map).filter(([key, value]) => value !== null); // Create a new map from the filtered array let filteredMap = new Map(filtered); console.log(filteredMap); // Map(2) { 'a' => 1, 'c' => 3 } |
2. Using Map.forEach() function
If we have a Map object as a map, we can use the Map.forEach() function to iterate over the key-value pairs and delete the ones that have null values. We can use the delete() function which takes a key as an argument and removes the key-value pair associated with that key from the map object. This will modify the original map in place, without creating a new one. The following code illustrates this:
|
1 2 3 4 5 6 7 8 9 10 |
const map = new Map([['a', 1], ['b', null], ['c', 3], ['d', null]]); map.forEach((value, key) => { // If the value is null, remove the key from the map if (value === null) { map.delete(key); } }); console.log(map); // Map(2) { 'a' => 1, 'c' => 3 } |
We can also use a for…of loop to iterate over the entries of the map and use the Map.delete() function to remove any key that has a null value. For example:
|
1 2 3 4 5 6 7 8 9 10 |
const map = new Map([['a', 1], ['b', null], ['c', 3], ['d', null]]); for (let [key, value] of map.entries()) { // If the value is null, remove the key from the map if (value === null) { map.delete(key); } } console.log(map); // Map(2) { 'a' => 1, 'c' => 3 } |
3. Using a custom function
If we want a more generic and efficient way to filter null values from a map in JavaScript, we can use a custom function that takes a map as an argument and returns a new map with the filtered pairs. For example, the following function will return a new map without modifying the original one. It will also only iterate over the map’s entries once and avoid creating any extra arrays.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function filterNull(map) { let result = new Map(); for (let [key, value] of map) { if (value !== null) { result.set(key, value); } } return result; } let map = new Map([['a', 1], ['b', null], ['c', 3], ['d', null]]); console.log(filterNull(map)); // Map(2) {'a' => 1, 'c' => 3} |
4. Using Lodash library
Lodash is a popular JavaScript library that provides numerous utility functions for working with various data structures. Lodash has a function called omitBy() that takes an object and a predicate function as arguments and returns a new object without the elements that satisfy the predicate function. This is opposite of the _.pickBy() function, which returns a new object containing elements satisfying the predicate function. We can use these function to filter out the null values from a map by passing it to the predicate function. For example:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// import lodash library let _ = require("lodash"); // Create an object with some null values const obj = {a: 1, b: null, c: 3, d: null}; // Filter out the null values using lodash let filtered = _.omitBy(obj, value => value === null); console.log(filtered); // { a: 1, c: 3 } filtered = _.pickBy(obj, value => value !== null); console.log(filtered); // { a: 1, c: 3 } |
That’s all about filtering out the null values from a map in JavaScript.
Thanks for reading.
To share your code in the comments, please use our online compiler that supports C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.
Like us? Refer us to your friends and support our growth. Happy coding :)