JavaScript - convert array with null value to string

In this article, we will learn to convert an array with a null value to a string in Javascript. Handling arrays containing null, undefined, and falsy values in JavaScript is a frequent challenge. The default methods might not behave as expected when converting such arrays to strings, requiring custom solutions for meaningful string representations.

Problem Statement

Given an array containing null, undefined, empty strings, and other values, the task is to concatenate its elements into a single string while excluding the unwanted values.

Following is our array, with some null and undefined values ?

Input

["Here", "is", null, "an", undefined, "example", 0, "", "of", "a", null, "sentence"]

Output

"Hereisanexampleofasentence"

The solution should process the array such that null, undefined, and empty strings are removed while preserving valid values.

Using Array.prototype.reduce()

The reduce() method is a unique tool in JavaScript that allows you to accumulate a result by iterating over an array. In this approach, we use reduce() to build the final string by conditionally appending values to an accumulator.

Following are the steps to convert an array with a null value to a string in Javascript ?

• The reduce() method iterates over each element of the array.
• If the value is falsy (null, undefined, or ""), it is replaced with an empty string "".
• Valid values are concatenated to form the final string.

Example

Below is an example of converting an array with a null value to a string using the reduce() method ?

const arr = ["Here", "is", null, "an", undefined, "example", 0, "", "of", "a", null, "sentence"];

const joinArray = arr => {
   const sentence = arr.reduce((acc, val) => {
      return acc + (val || "");
   }, "");
   return sentence;
};

console.log(joinArray(arr));

Output

Hereisanexample0ofasentence

Using Array.prototype.filter() and join()

The combination of filter() and join() offers a clean and intuitive solution for removing unwanted values and concatenating the remaining elements into a string.

• The filter() method iterates through the array and removes elements that are null, undefined, or empty strings.
• The remaining elements are joined into a single string using join() method.

Example

Below is an example to convert an array with a null value to a string using filter() and join() methods ?

const arr = ["Here", "is", null, "an", undefined, "example", 0, "", "of", "a", null, "sentence"];

const joinArray = arr => {
   const sentence = arr
      .filter(val => val !== null && val !== undefined && val !== "") 
      .join(""); // Combine the filtered elements into a single string
   return sentence;
}; 

console.log(joinArray(arr));

Output

Hereisanexample0ofasentence

Using Boolean Constructor for Filtering

A concise alternative is using the Boolean constructor to filter out falsy values, then joining the remaining elements.

const arr = ["Here", "is", null, "an", undefined, "example", 0, "", "of", "a", null, "sentence"];

const joinArray = arr => {
   return arr.filter(Boolean).join("");
};

console.log(joinArray(arr));

Output

Hereisanexampleofasentence

Comparison

Conclusion

Converting arrays with null values to strings can be achieved through multiple approaches. Use filter() + join() for clarity, reduce() for custom logic, or Boolean filtering for concise falsy value removal.