Remove Null or Undefined Values from an Array in Javascript

avatar
Borislav Hadzhiev

Last updated: Dec 26, 2022
6 min

banner

# Remove Null or Undefined Values from an Array in Javascript

To remove all null values from an array:

  1. Use the Array.filter() method to iterate over the array.
  2. Check if each element is not equal to null.
  3. The filter() method returns a new array containing only the elements that satisfy the condition.
index.js
// โœ… Remove null values from an array const arr = ['one', null, 'two', 0, null, undefined, 'three', null]; const results = arr.filter(element => { return element !== null; }); console.log(results); // ๐Ÿ‘‰๏ธ [ 'one', 'two', 0, undefined, 'three' ] // ----------------------------------------------------------- // โœ… Remove null and undefined values from an array const arr2 = ['a', , 'b', , undefined, 0, 'c', null]; const results2 = arr2.filter(element => { return element !== null && element !== undefined; }); console.log(results2); // ๐Ÿ‘‰๏ธ [ 'a', 'b', 0, 'c' ]

remove null values from array

The same approach can be used to only remove the undefined values from an array.

index.ts
// โœ… Remove all undefined values from an array const arr = ['a', undefined, 'b', undefined, 'c', undefined]; const results = arr.filter(element => { return element !== undefined; }); console.log(results); // ๐Ÿ‘‰๏ธ ['a', 'b', 'c']

The function we passed to the Array.filter method gets called with each element in the array.

If the function returns a truthy value, the element gets added to the results array.

We explicitly check if each element is not equal to null to only add non-null elements to the new array.

The filter() method doesn't change the contents of the original array. It returns a new array that contains only the elements that satisfy the condition.

Something we often have to do is remove all falsy values from an array.

Falsy values in JavaScript are: false, 0, "", null, undefined, NaN.

# Remove all falsy values from an array

To remove all falsy values from an array:

  1. Use the Array.filter() method to iterate over the array.
  2. On each iteration, return the current element.
  3. The filter() method will return a new array that only contains the truthy values of the original array.
index.js
// โœ… Remove all falsy values from an array const arr = [null, NaN, 'one', null, 'two', 0, null, undefined, 'three', null]; const results = arr.filter(element => { return element; }); console.log(results); // ๐Ÿ‘‰๏ธ [ 'one', 'two', 'three' ]

remove all falsy values from array

The filter() method has to determine if 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.

index.js
const arr = [null, NaN, 'one', null, 'two', 0, null, undefined, 'three', null]; const results = arr.filter(element => { return Boolean(element); }); console.log(results); // ๐Ÿ‘‰๏ธ [ 'one', 'two', 'three' ]

# Creating a reusable function

If you have to remove all null values from an array often, define a reusable function.

index.js
function removeNull(array) { return array.filter(element => { return element !== null; }); } const arr = ['one', null, 'two', 0, null, undefined, 'three', null]; const result = removeNull(arr); console.log(result); // ๐Ÿ‘‰๏ธ [ 'one', 'two', 0, undefined, 'three' ]

creating reusable function

The removeNull() function takes an array and removes all null values from the array.

Similarly, you can define a reusable function that removes all undefined values from an array.

index.js
function removeUndefined(array) { return array.filter(element => { return element !== undefined; }); } const arr = ['a', undefined, 'b', undefined, 'c', undefined]; // ๐Ÿ‘‡๏ธ [ 'a', 'b', 'c' ] console.log(removeUndefined(arr));

An alternative approach is to use the Array.forEach() method.

# Remove all null values from an array using Array.forEach()

This is a four-step process:

  1. Declare a results variable and set it to an empty array.
  2. Use the forEach() method to iterate over the array.
  3. Check if each element is not equal to null.
  4. Push the elements that meet the condition into the results array.
index.js
const arr = ['one', null, 'two', null, 'three', null]; const results = []; arr.forEach(element => { if (element !== null) { results.push(element); } }); console.log(results); // ๐Ÿ‘‰๏ธ ['one', 'two', 'three']

remove all null values from array using foreach

The same approach can be used to remove all undefined values from an array.

index.js
const arr = ['a', undefined, 'b', undefined, 'c', undefined]; const results = []; arr.forEach(element => { if (element !== undefined) { results.push(element); } }); console.log(results); // ๐Ÿ‘‰๏ธ ['a', 'b', 'c']

The function we passed to the Array.forEach method gets invoked with each element in the array.

On each iteration, we check if the current element is not equal to null before pushing it into the results array.

The new array only contains the non-null elements of the original array.

If you have to remove the null values from arrays often, define a reusable function.

index.js
function removeNull(array) { const newArray = []; array.forEach(element => { if (element !== null) { newArray.push(element); } }); return newArray; } const arr = ['one', null, 'two', null, 'three', null]; const result = removeNull(arr); console.log(result); // ๐Ÿ‘‰๏ธ [ 'one', 'two', 'three' ]

The function takes an array as a parameter and removes all null values from the array.

You can tweak the function slightly if you need to remove the undefined values from an array.

index.js
function removeUndefined(array) { const newArray = []; array.forEach(element => { if (element !== undefined) { newArray.push(element); } }); return newArray; } const arr = ['a', undefined, 'b', undefined, 'c', undefined]; const results = removeUndefined(arr); console.log(results); // ๐Ÿ‘‰๏ธ [ 'a', 'b', 'c' ]

The function takes an array as a parameter and removes all undefined values from the array.

# Remove Empty (nullish) Elements from an Array in JavaScript

To remove all empty elements from an array:

  1. Use the filter() method to iterate over the array.
  2. Check if each element is not equal to null and undefined.
  3. The filter() method will return an array containing only the non-empty elements of the original array.
index.js
const arr = ['one', null, 'two', undefined, 'three', null, undefined]; const results = arr.filter(element => { return element !== null && element !== undefined; }); console.log(results); // ๐Ÿ‘‰๏ธ [ 'one', 'two', 'three' ]

The function we passed to the Array.filter() method gets called 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 empty, null and undefined elements from the array.

Note that empty elements get removed automatically because the function never gets called with an empty element.

Notice that we used the Logical AND && operator which only returns true if both conditions return true.

Your use case might be different, e.g. you also need to exclude all empty strings and NaN values. In this case, add additional conditions using the && (and) operator.
index.js
const arr = ['one', '', 'two', , undefined, 0, 'three', null, NaN]; const results = arr.filter(element => { return ( element !== null && element !== undefined && element !== '' && !Number.isNaN(element) ); }); console.log(results); // ๐Ÿ‘‰๏ธ [ 'one', 'two', 0, 'three' ]

We removed all empty, undefined, null, empty string or NaN elements from the array.

We used the logical AND && operator, so all conditions have to be met for the element to get included in the results array.

You can use the logical AND && operator to chain as many conditions as necessary.

You can also use a basic for loop.

# Remove all null values from an array using a for loop

This is a four-step process:

  1. Declare a results variable and initialize it to an empty array.
  2. Use a for loop to iterate over the original array.
  3. Check if each element is not equal to null.
  4. Push the matching elements into the results array.
index.js
const arr = ['one', 'two', null, undefined, 0, 'three', null, undefined]; // โœ… Remove null values from an array const results1 = []; for (let index = 0; index < arr.length; index++) { if (arr[index] !== null) { results1.push(arr[index]); } } // ๐Ÿ‘‡๏ธ [ 'one', 'two', undefined, 0, 'three', undefined ] console.log(results1); // ----------------------------------------------- // โœ… Remove null and undefined values from an array const results2 = []; for (let index = 0; index < arr.length; index++) { if (arr[index] !== null && arr[index] !== undefined) { results2.push(arr[index]); } } // ๐Ÿ‘‡๏ธ [ 'one', 'two', 0, 'three' ] console.log(results2);

We used a for loop to iterate over the array.

On each iteration, we check if the current element is not equal to null.

If the condition is met, we push the element into the results array.

Which approach you pick is a matter of personal preference. I'd use the Array.filter() method as I find it quite direct and intuitive.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev