How to remove falsy values from an array in JavaScript ?

Falsy/Falsey Values:  In JavaScript there are 7 falsey 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 falsey values. Let’s see some approaches on how we can remove falsey 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 approached to achieve this some of them are the following:

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

Javascript

<script>
  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));
</script>

Output:

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

Using the Array.filter() method: In this approach, we are using the array.filter method. The filter method checks the array and filter out the falsy values of the array and return a new array.

Example:

Javascript

<script>
  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));
</script>

Output:

[]

ES6 wayo of Array.filter() method: If you can use this es6 sentence.

Example:

Javascript

<script>
  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));
</script>

Output:

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

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

Example:

Javascript

<script>
  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));
</script>

Output:

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

Using 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 accumulator else we return accumulator only.

Example:

Javascript

<script>
  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));
</script>

Output:

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

Using for…of loop

Using 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 the push the item to a newly created array.

Example:

Javascript

<script>
  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));
</script>

Output:

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

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

Example:

Javascript

<script>
  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));
</script>

Output:

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