Remove Null values from an Array in TypeScript

avatar

Borislav Hadzhiev

Last updated: Mar 2, 2022

banner

Photo from Unsplash

Remove Null values from an Array in TypeScript #

To remove all null values from an array in TypeScript:

  1. Call the filter() method, passing it a function.
  2. Check whether each array element is not equal to null.
  3. The filter method returns a new array, containing only the elements that satisfy the condition.
index.ts
// 👇️ const arr: (string | null)[] const arr = ['a', null, 'b', null, 'c']; // 👇️ string[] const result = arr.filter((element): element is string => { return element !== null; }); console.log(result); // 👉️ ['a', 'b', 'c']

The array in the example contains strings and null values. So we used a type predicate to narrow the variable type to string, so we get the correct type for the new array.

You might have to change this according to the types in your array. For example, if your array contains numbers and null values, you would write it as element is number:

index.ts
// 👇️ const arr: (number | null)[] const arr = [1, null, 2, null, 3]; // 👇️ number[] const result = arr.filter((element): element is number => { return element !== null; }); console.log(result); // 👉️ [1, 2, 3]

An alternative is to use a simple type assertion.

index.ts
// 👇️ const arr: (number | null)[] const arr = [1, null, 2, null, 3]; // 👇️ number[] const result = arr.filter((element) => { return element !== null; }) as number[]; console.log(result); // 👉️ [1, 2, 3]

We know that the new array won't contain any null values, so we can safely use a type assertion to type it as a number[].

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 does not change the contents of the original array. It returns a new array, containing only the elements that satisfy the condition.

An alternative approach is to use the forEach method.

To remove all null values 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.
  4. If the condition is satisfied, push the element into the results array.
index.ts
const arr = ['a', null, 'b', null, 'c', null]; const results: string[] = []; arr.forEach((element) => { if (element !== null) { results.push(element); } }); console.log(results); // 👉️ ['a', 'b', 'c']

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

We conditionally check if the current element is not equal to null before pushing it into the results array.

We typed the results array as a string[], but you might have to tweak this depending on the types in your array.

This solution is a bit more verbose, but we didn't have to use a type assertion.

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.