How to remove falsy values from an array in JavaScript ? (original) (raw)

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

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:

**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:

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.

**Example: In this example, we will be using Javascript **forEach() loop to remove the falsy values.

JavaScript `

let arr = [23, 0, "gfg", false, true, NaN, 12, "hi", undefined, [], ""];

function removeFalsey(arr) { // newly created array let newArr = [];

// Iterate the array using the forEach loop
arr.forEach((k) => {
    // check for the truthy value
    if (k) {
        newArr.push(k);
    }
});
// return the new array
return newArr;

} console.log(removeFalsey(arr));

`

**Output:

[23, "gfg", true, 12, "hi", []]

**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.

**Example: In this example, we will be using the **Array.filter() method to remove the false values from the array.

JavaScript `

let arr = ["", 0, false, undefined, NaN, null];

function removeFalsey(arr) { // Applying the filter method on the array return arr.filter((k) => { // Checking if the value is truthy if (k) { return k; } }); } console.log(removeFalsey(arr));

`

**Output:

[]

ES6 way of **Array.filter() Method:

If you can use this es6 sentence.

**Example: In this example, we will use the Javascript **Array.filter() method in ES6.

JavaScript `

let arr = [23, 0, "gfg", false, true, NaN, 12, "hi", undefined, [], ""];

function removeFalsey(arr) { // Return the first parameter of the callback function return arr.filter((val) => val); }

console.log(removeFalsey(arr));

`

**Output:

[23, "gfg", true, 12, "hi", []]

**Passing Boolean Value: You can also achieve this by passing the **Boolean constructor as the argument of the filter method.

**Example: In this example, we will a boolean constructor in the argument of the filter method.

JavaScript `

let arr = [23, 0, "gfg", false, true, NaN, 12, "hi", undefined, [], ""];

function removeFalsey(arr) { // Passing Boolean constructor inside filter return arr.filter(Boolean); }

console.log(removeFalsey(arr));

`

**Output:

[23, "gfg", true, 12, "hi", []]

**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.

**Example: In this example, we will use the Javascript **Array.reduce() method to remove the falsy values from the array.

JavaScript `

let arr = [23, 0, "gfg", false, true, NaN, 12, "hi", undefined, [], ""];

function removeFalsey(arr) { return arr.reduce((acc, curr) => { // Check if the truthy then return concatenated value acc with curr. // else return only acc. if (curr) { return [...acc, curr]; } else { return acc; } }, []); // Initialize with an empty array }

console.log(removeFalsey(arr));

`

**Output:

[23, "gfg", true, 12, "hi", []]

**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.

**Example: In this example, we will use Javascript **for..of loop to remove the falsy values from the array.

JavaScript `

let arr = [23, 0, "gfg", false, true, NaN, 12, "hi", undefined, [], ""];

function removeFalsey(arr) {

// Create a new array
let output = [];
for (x of arr) {
    if (x) {

        // Check if x is truthy
        output.push(x);
    }
}
return output;

}

console.log(removeFalsey(arr));

`

**Output:

[23, "gfg", true, 12, "hi", []]

**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.

**Example: In this example, we will use the Javascript **for loop to remove the falsy values from the array.

JavaScript `

let arr = [23, 0, "gfg", false, true, NaN, 12, "hi", undefined, [], ""];

function removeFalsey(arr) { // Create a new array let output = []; for (let i = 0; i < arr.length; i++) { if (arr[i]) { output.push(arr[i]); } } return output; } console.log(removeFalsey(arr));

`

**Output:

[23, "gfg", true, 12, "hi", []]

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.

**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);

`

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.

**Example: In this example, we use the reduceRight() method to remove falsy values from an array.

JavaScript `

let arr = [23, 0, "gfg", false, true, NaN, 12, "hi", undefined, [], ""];

function removeFalsey(arr) { return arr.reduceRight((acc, curr) => { // Check if the current value is truthy, then concatenate it to the accumulator if (curr) { return [curr, ...acc]; } else { return acc; } }, []); // Initialize with an empty array }

console.log(removeFalsey(arr));

`

Output

[ 23, 'gfg', true, 12, 'hi', [] ]