How to Remove Empty Strings from an Array in TypeScript?

by

Recently, I got a requirement to clean up data or process user input. We can do this using built-in JavaScript methods and TypeScript features. In this tutorial, I will explain how to remove empty strings from an array in TypeScript.

The Problem

Let’s say you have an array of names that includes some empty strings:

const names: string[] = ["John", "", "Emma", "Olivia", "", "Liam", "Ava", "", "William"];

Our goal is to remove all the empty strings from the names array, leaving only the non-empty names.

Solution 1: Using the filter() Method

One straightforward approach to remove empty strings from an array is to use the filter() method. The filter() method creates a new array with all elements that pass the test implemented by the provided callback function. Here’s how we can use it:

const names: string[] = ["John", "", "Emma", "Olivia", "", "Liam", "Ava", "", "William"];
const filteredNames = names.filter(name => name !== "");
console.log("Filtered names:", filteredNames);

In this example, we use an arrow function as the callback for filter(). The arrow function takes each name as an argument and returns true if the name is not an empty string (name !== ""). The filter() method will then include only the non-empty names in the resulting filteredNames array.

Here is the exact output in the screenshot below:

Remove Empty Strings from an Array in TypeScript

Check out Check if an Array is Not Empty in TypeScript

Solution 2: Using the filter() Method with TypeScript’s Type Assertion

TypeScript provides type assertions that allow you to tell the compiler that a value is of a specific type. We can use type assertions with the filter() method to ensure that the resulting array only contains strings:

const names: string[] = ["John", "", "Emma", "Olivia", "", "Liam", "Ava", "", "William"];
const filteredNames = names.filter((name): name is string => name !== "");
console.log("Filtered names:", filteredNames);

In this case, we use a type predicate name is string to assert that the name argument is of type string. This provides additional type safety and helps catch potential type-related issues at compile-time.

Here is the exact output in the screenshot below:

TypeScript Remove Empty Strings from an Array

Check out Check if an Array is Empty in TypeScript

Solution 3: Using the filter() Method with a Regular Expression

Another approach is to use a regular expression with the filter() method to remove empty strings:

const names: string[] = ["John", "", "Emma", "Olivia", "", "Liam", "Ava", "", "William"];
const filteredNames = names.filter(name => /\S/.test(name));

The regular expression /\S/ matches any non-whitespace character. By using the test() method, we check if each name contains at least one non-whitespace character. If it does, the test() method returns true, and the name is included in the filteredNames array.

Solution 4: Using the reduce() Method

The reduce() method can also be used to remove empty strings from an array. It allows you to reduce an array to a single value by applying a callback function to each element:

const names: string[] = ["John", "", "Emma", "Olivia", "", "Liam", "Ava", "", "William"];
const filteredNames = names.reduce((acc, name) => {
  if (name !== "") {
    acc.push(name);
  }
  return acc;
}, [] as string[]);

In this example, we use reduce() with an initial value of an empty array ([] as string[]). The callback function checks if each name is not an empty string. If it’s not empty, the name is pushed into the accumulator array acc. Finally, the accumulator array containing only the non-empty names is returned.

Check out Declare and Initialize Empty Arrays in TypeScript

Handle Real-World Scenarios

In real-world scenarios, you might encounter arrays with various types of empty or whitespace-only strings. For example:

const userInput: string[] = ["Alice", " ", "Bob", "", "   ", "Charlie"];

To handle such cases, you can modify the filtering condition to trim the strings before checking for emptiness:

const validNames = userInput.filter(name => name.trim() !== "");

The trim() method removes leading and trailing whitespace from a string. By trimming each name before comparing it with an empty string, we ensure that strings containing only whitespace are also considered empty and removed from the resulting array.

Conclusion

In this tutorial, we explored several approaches to remove empty strings from an array in TypeScript, including using the filter() method with various conditions, leveraging TypeScript’s type assertions, and utilizing the reduce() method.

With these techniques, you’ll be able to cleanly remove empty strings from arrays in your TypeScript projects, ensuring data integrity and improving the overall quality of your code.

You may also like: