Remove Empty Elements from an Array in JavaScript

Here are different approaches to remove empty elements from an Array in JavaScript.

1. Using array.filter() Method

The array filter() method is used to create a new array from a given array consisting of elements that satisfy given conditions.

array.filter( callback( element, index, arr ), thisValue )

// Given array
let a = [10, , null, 20, undefined, "", 30, 40, 50];

// New array with filtered values 
let a1 = a.filter(function (e) {
    return e; // Returns only the truthy values
});

console.log("Updated Array: ", a1);

Updated Array:  [ 10, 20, 30, 40, 50 ]

2. Using array reduce() Method

The array reduce() method is used to iterate over the array and on each iteration check the falsey value and remove it from the array by using the if condition.

Syntax

array.reduce( function(total, currentValue, currentIndex, arr), initialValue )

// Given an Array
let a = [10, , null, 20, undefined, "", 30, 40, 50];

// New array with filtered values 
let a1 = a.reduce( (acc, e)=> {

	// Check if the current element is truthy
    if (e) { 
        acc.push(e);
    }

    return acc;
}, []); // Initialize acc as empty array

// Display the updated array
console.log("Updated Array: ", a1);

Updated Array:  [ 10, 20, 30, 40, 50 ]

3. Using Array flat() Method

The Array flat() Method was introduced in ES2019. It is used to flatten an array, to reduce the nesting of an array. The flat() method is heavily used in the functional programming paradigm of JavaScript.

Syntax

arr.flat()

// Given an Array
let a = [10, , null, 20, undefined, "", 30, 40, 50];

// New Array  
let a1 = a.flat();

// Display the updated array
console.log("Updated Array: ", a1);

Updated Array:  [ 10, null, 20, undefined, '', 30, 40, 50 ]

Note: This method only remove the empty elements not other values like empty string, null, and undefined.

4. Brute Force Approach

The splice() method can be used to directly modify an array by removing or replacing existing elements. Iterate through the array in reverse order and use splice() to remove empty elements (like undefined, null, or empty strings) in place.

// Given an Array
let a = [10, , null, 20, undefined, "", 30, 40, 50];

for (let i = a.length - 1; i >= 0; i--) {
    if (!a[i]) {
        a.splice(i, 1);
    }
}

// Display the updated array
console.log("Updated Array: ", a);

Updated Array:  [ 10, 20, 30, 40, 50 ]

5. Using forEach() with push() Methods

You can use forEach() method to iterate through the array, pushing only non-empty elements into a new array. This method provides a more manual approach where you have full control over what to include or exclude.

Syntax

array.forEach(callback(element, index, arr), thisValue);

// Given array
let a = [10, , null, 20, undefined, "", 30, 40, 50];

let a1 = [];

// Iterate the array using foreach
a.forEach((element) => {
	
   	// Check if the value is truty
    if (element) {
    
    	// Push the value to new array
        a1.push(element);
    }
});

// Display the updated array
console.log("Updated Array: ", a1);

Updated Array:  [ 10, 20, 30, 40, 50 ]