Remove Empty Elements from an Array in JavaScript

Remove Empty Elements from an Array #

To remove all empty elements from an array:

1. Call the filter() method, passing it a function.
2. For each element in the array, check if its value is not equal to null and it's not equal to undefined.
3. The filter method returns a new array containing only the elements that satisfy the condition.

Copied!
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.

Copied!
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 in JavaScript are: false, 0, "", null, undefined, NaN.

To remove all falsy values from an array:

1. Call the filter() method, passing it a function.
2. On each iteration of the function return the current element.
3. The filter method will return a new array, which only includes the truthy values.

Copied!
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.

Remove Empty Elements from an Array using forEach #

An alternative and perhaps easier to read approach is to use the forEach method instead.

To remove all empty elements from an array:

1. Create an empty array, that will store the results.
2. Use the forEach() method to iterate over the array.
3. On each iteration check if the current element is not equal to null and not equal to undefined.
4. If the condition is met, push the element into the results array.

Copied!
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.

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.