Blog

To remove empty elements from an array in JavaScript –

1. Use a filter() method and pass it a function.
2. This function will return a new array, with only those values that are not null or undefined.
3. You can also use the forEach() method to iterate over the array and use a conditional statement to check if the current element is not null or undefined. If it isn’t, you can add it to a new array.

Let’s discuss these methods in detail below.

filter() To Remove Empty Elements From An Array In JavaScript

The filter() method creates a new array with all elements that pass the test implemented by the callback function. It accepts two arguments –

The first argument is the callback function which tests each element of the array. This function takes in three parameters – element, index, and arr.

If the callback function returns true, then the element is included in the new array.

If it returns false, then the element is not included in the new array.

Now, let’s see how we can use the filter() method to remove empty elements from an array.

We will create a function which checks if the value of an element is null or undefined.

If it isn’t, then it returns true. Else, it returns false. This function will be passed as the callback function to the filter() method.

const removeEmpty = (arr) => {

return arr.filter( (e) => {

  return e !== null && e !== undefined;

});

};

console.log(removeEmpty([1, null, 2, undefined, 3])); // Output: [1,2,3] 

Your use case might also be to remove all the falsy values from an array. Falsy values in JavaScript are – undefined, null, NaN, 0, ”” and false.

In that case, you can use the Boolean object as follows –

const removeEmpty = (arr) => {

  return arr.filter(Boolean);

};

console.log(removeEmpty([1, null, 2, undefined, 3, 0, "", false])); // Output:  [1,2,3]

The Boolean object converts a value to its corresponding boolean value – true or false.

Thus, when you pass it to the filter() method, only those elements which are truthy (i.e., not – null, undefined, 0, ”, NaN, and false) will be added to the new array.

forEach() To Remove Empty Elements From An Array In JavaScript

The forEach() method executes a provided function once per array element. It accepts two arguments –

The first argument is the callback function which is executed for each element in the array. This function takes in three parameters – element, index, and arr.

The second argument is the `this` value for the callback function.

Now, let’s see how we can use the forEach() method to remove empty elements from an array.

We will create a function which checks if the value of an element is null or undefined. If it isn’t, then it adds it to a new array.

const removeEmpty = (arr) => {

let newArr = [];

arr.forEach( (e) => {

  if(e !== null && e !== undefined){

    newArr.push(e);

  }

});

return newArr;

};

console.log(removeEmpty([1, null, 2, undefined, 3])); // Output: [1,2,3]

Conclusion

In this article, we saw how to remove empty elements from an array in JavaScript.

We discussed two methods – the filter() method and the forEach() method.

Both these methods are widely used and you can choose either of them based on your use case.

I hope this article was helpful to you. Thank you for reading! 🙂