How to use Array.prototype.flatMap() In Javascript

Using Array.prototype.flatMap(), you can remove falsy values by mapping each element to an array containing the element if it’s truthy, or an empty array if it’s falsy. The resulting arrays are then flattened into a single array of truthy values.

Example: In this example The filteredArray filters out falsy values from the array using flatMap(), resulting in a new array containing only truthy values.

JavaScript
const array = [0, 1, false, 2, '', 3, null, undefined, NaN];
const filteredArray = array.flatMap(value => value ? [value] : []);
console.log(filteredArray); 

Output
[ 1, 2, 3 ]

How to remove falsy values from an array in JavaScript ?

Falsy/Falsey Values:  In JavaScript, there are 7 falsy values, which are given below

  • false
  • zero(0,-0)
  • empty string(“”, ‘ ‘ , ` `)
  • BigIntZero(0n,0x0n)
  • null
  • undefined
  • NaN

In JavaScript, the array accepts all types of falsy values. Let’s see some approaches on how we can remove falsy values from an array in JavaScript:

  • Using for-each loop
  • Using the Array.filter method
  • Using Array.reduce method
  • Using for…of loop

Example: 

Input: [23, 0, “gfg”, false, true, NaN, 12, “hi”, undefined, [], “”] 
Output: [23, “gfg”, true, 12, “hi”, []]
Input: [“”, 0, false, undefined, NaN, null] 
Output: []

Approach: There are many approaches to achieve this some of them are the following:

Table of Content

  • JavaScript for..each loop:
  • JavaScript Array.filter() Method
  • ES6 way of Array.filter() Method
  • JavaScript Array.reduce() Method
  • JavaScript for…of loop
  • JavaScript for loop
  • Using Array.prototype.flatMap()

Similar Reads

JavaScript for..each loop:

In this approach, we will iterate the array using the for..each loop and at every iteration, we check if the value is truthy, if it is truthy then we push the value in a newly created array, and then we return the new array....

JavaScript Array.filter() Method:

In this approach, we are using the array.filter method. The filter method checks the array and filters out the false values of the array and returns a new array....

ES6 way of Array.filter() Method:

If you can use this es6 sentence....

JavaScript Array.reduce() Method:

Using the Array.reduce method we iterate the array and initialize the accumulator with an empty array and if the current value is not a falsy value then we return a concatenated value of the accumulator else we return the accumulator only....

JavaScript for…of loop:

Using for…of loop iterate the array and check every item if it is falsy or truthy. If the item is truthy then push the item to a newly created array....

JavaScript for loop:

Using for loop iterate the array and check every item if it is falsy or truthy. If the item is truthy then push the item to a newly created array....

Using Array.prototype.flatMap()

Using Array.prototype.flatMap(), you can remove falsy values by mapping each element to an array containing the element if it’s truthy, or an empty array if it’s falsy. The resulting arrays are then flattened into a single array of truthy values....

JavaScript Array.prototype.reduceRight() Method:

Using the Array.prototype.reduceRight() method, we iterate over the array from the last element to the first element. Similar to the reduce() approach, we initialize the accumulator with an empty array and add elements to it only if they are truthy....