Borislav Hadzhiev
Wed Oct 13 2021·3 min read
Photo by KaLisa Veer
To remove all empty elements from an array:
filter()
method, passing it a function.null
and
it's not equal to undefined
.filter
method returns a new array containing only the elements that
satisfy the condition.const arr = ['a', , 'b', , undefined, 0, 'c', null]; const results = arr.filter(element => { return element !== null && element !== undefined; }); console.log(results); // ['a', 'b', 0, 'c']
The function we passed to the Array.filter method gets invoked with each element in the array.
If the function returns a truthy value, the filter
method adds the element
to the results array.
In the example we remove all exclude all empty, null
or undefined
elements
from the results array.
Note that empty elements get removed automatically because the function never gets called with an empty element.
The filter method does not change the contents of the original array. It returns a new array, containing only the elements that satisfy the condition.
Notice that we use the &&
(And) operator, which only returns true
if both
conditions return true
.
NaN
values. In that scenario you can add additional conditions using the &&
(and) operator.const arr = ['a', '', 'b', , undefined, 0, 'c', null, NaN]; const results = arr.filter(element => { return ( element !== null && element !== undefined && element !== '' && !Number.isNaN(element) ); }); console.log(results); // 👉️ ['a', 'b', 0, 'c']
In the example we exclude all empty, undefined
, null
, empty string or NaN
elements from being added to the results array.
Because we use the &&
(and) operator the condition is only satisfied if all
conditions are met.
falsy
values from an array.Falsy values in JavaScript are: false
, 0
, ""
, null
, undefined
, NaN
.
To remove all falsy values from an array:
filter()
method, passing it a function.filter
method will return a new array, which only includes the truthy
values.const arr = ['a', '', 'b', , undefined, 0, 'c', null, NaN]; const results = arr.filter(element => { return element; }); console.log(results); // ['a', 'b', 'c']
The filter
method has to determine, whether the value of each element is
truthy or falsy as it only adds truthy values to the results array.
You can imagine that each element gets passed to the Boolean()
constructor and
only truthy elements return true
and get included in the new array.
An alternative and perhaps easier to read approach is to use the forEach
method instead.
To remove all empty elements from an array:
forEach()
method to iterate over the array.null
and not
equal to undefined
.const arr = ['a', , 'b', , undefined, 0, 'c', null]; const results = []; arr.forEach(element => { if (element !== null && element !== undefined) { results.push(element); } }); console.log(results); // 👉️ ['a', 'b', 0, 'c']
The function we pass to the Array.forEach method gets called with each element in the array.
In the example we check if each element is not equal to null
and undefined
,
before pushing it into the results array.
&&
(and) operator.This approach is a little easier to read for new developers because we don't
have to get into the nitty gritty of how the filter
method works to solve the
problem.