How to Check for Empty String in JavaScript/TypeScript

Verifying whether a variable is an empty string is a common task that at some point developers have to do. There are different solutions presented online for such a simple task, yet they might fail to only check whether a variable is an empty string or not.

Note: In this article, we are going to constantly refer to JavaScript rather than TypeScript. Remember, TypeScript is a superset of JavaScript. In other words, it is JavaScript with type definition. Hence, all JavaScript concepts will also apply when using TypeScript.

Whether you use JavaScript or TypeScript to verify a variable is an empty string ensure the type of the variable is a “string” and verify the string has a length of zero after removing any white spaces the string could have.

let data: string = "";

if (typeof data === "string" && data.trim().length == 0) {
   // It is an empty string
   console.log("empty")
}

Since this check can be a repetitive task, it is recommended, although not required, to generate a utility function.

const isEmptyString = (data: string): boolean => typeof data === "string" && data.trim().length == 0;

Table of Contents

Other Solutions (Be Aware Of Unexpected Behaviors)

There are several ways to check for an empty string. However, depending on the business logic, the following solutions might or not be the best alternative to do the string check.

Let’s look at each of the solutions and the things you must take into account if you decide to use any of the following:

Convert String to a Boolean

To convert a string to a boolean, we use the Boolean object. To make the conversion, pass a string parameter when calling theBoolean() object. For instance, this can be Boolean("Hello World") or Boolean(myStr) where the variable myStr contains a string value.

Booleans can be either true or false. Whenever we convert a string to a boolean, it will return true as long as there is a value in the string. Otherwise, if there is an empty string, the boolean generated will be false.

Boolean(""); // returns false
Boolean("Hello"); // returns true

Therefore, getting a false value from converting a string to a boolean can be a quick way to tell whether a string is empty.

if (!Boolean(myStr)) {
  // it is an empty string
}

// or 
if (Boolean(myStr) == false) {
  // it is an empty string
}

// or
if (Boolean(myStr) === false) {
  // it is an empty string
}

However, there are a few points you must be aware of when using this solution.

For instance, if we pass a variable myStr that is inferred to be a string to convert it to a Boolean, we must make sure there is a string value. Otherwise, if myStr is undefined or null, attempting to convert the string using the Boolean object will lead to a false value.

let myStr;
Boolean(myStr); // The value of myStr is undefined and it will return false

myStr = null;
Boolean(myStr); // The value of myStr is null and it will return false

While the conversion still returns false, we are not truly checking if the variable has an empty string.

Another situation that can cause issues is when there are empty spaces in the string. Although a string made out of just empty spaces seems to be an empty string, technically empty spaces represent a truthy value in JavaScript.

Every time we pass truthy values to convert to a boolean, the output will be true .

let myStr = '     ';
Boolean(myStr);  // The value of myStr has empty spaces and it will return false

Depending on the business logic, empty spaces can be seen as an empty string leading to a flaw in the check if (!Boolean(myStr)) {}.

Use Double Exclamation Marks (!!) to Cast to Boolean

Another alternative solution is to use double exclamation marks to cast a string value to a boolean. This solution works in a similar way we used the Boolean object to convert a string into a boolean.

Therefore, attempting to cast a string to a boolean will lead to a true boolean value. If the string is empty, the boolean returned will be false.

if (!!myStr) {
  // string is not empty
} else {
  // string is empty
}

This solution has the same scenarios as the solution of converting a string to a boolean using the Boolean object that you must take into account, whether you are exclusively checking for a string or not.

Having said that, if the value of myStr variable is either undefined or null , the result of casting the string to a value will be false.

let myStr;
if (!!myStr) {
   // logic will never reach here
} else {
   // undefined will cast to false 
}

myStr = null;
if (!!myStr) {
   // logic will never reach here
} else {
   // null cast to false 
}

Also, if myStr has empty spaces, casting the string to a boolean will have an output of false.

let myStr = '    ';
if (!!myStr) {
   // '    ' will cast to true
} else {
   // logic will never reach here 
}

Once again, depending on the business logic, casting a string to a boolean to check for an empty string can be an ok solution as long as you understand all the possible scenarios that can happen when using this solution.

Use Double Equals (==) to Compare Against an Empty String

Checking if a variable has an empty string by using the double equals == (abstract equality operator) to compare against an empty string is a straightforward solution.

if (myStr == '') {
   // it is an empty string
}

By using this solution, we don’t have to worry about when myStr value is undefined or null.

However, there is a catch.

What if for any reason the variable myStr can have any value besides a regular string? This means it could either be a number or even a NaN. Doing the comparison using double equals == wouldn’t work at all times.

Here is why.

For instance, if the value of myStr is 1 , then 1 == '' is false.

However, what if the value of myStr is 0, would the check 0 == '' return false too?

Unfortunately, no.

The result from comparing 0 == '' would betrue.

How come?

It all has to do with double equals == being an abstract equality comparison. This means it will try to convert the two operands into the same type. Therefore, if in the comparison a == b , a is a number and b is a string, JavaScript will attempt to convert the string b to a numeric value.

In the case of dealing with an empty string, JavaScript will convert it into 0 when checking against another number.

That’s why 1 == '' is false , because what is actually happening is checking 1 == 0 , which are not the same numeric value.

However, in the case 0 == '' we are referring to 0 == 0 after the empty string is converted into a number. Hence, the output from this check is true.

Confusing, ah!

To check more about the type conversions when doing a comparison with the double equal, I recommend reading this article.

As long as you are dealing only with checks between the same type, in this case, comparing a string with another string, the solution of using double equals should be ok if you are looking to check for empty strings, unless the variable myStr could have empty spaces and that is categorized as an empty string as part of your business logic. In that scenario, there should be additional logic to remove all empty spaces from the string variable prior to doing the comparison.

if (myStr.trim() == '') {
   // it is an empty string
}

Use Triple Equals (===) to Compare Against an Empty String

Checking if a variable has an empty string by using the triple equals === (strict equality operator) to compare against an empty string is also a similar solution when compared to using double equals ==.

if (myStr === '') {
   // it is an empty string
}

In this solution, we won’t have to worry about JavaScript converting the type of the operands a and b, i.e. a === b , as the triple equals won’t convert the values to a common type.

At this point, the only thing to be aware of is the possible presence of an empty space for the string variable myStr, a common problem faced in all the alternative solutions previously mentioned. Once again, make sure to remove all empty spaces to verify if there is a character in myStr or rather it is an empty string.

if (myStr.trim() === '') {
   // it is an empty string
}

Conclusion

It is common to find JavaScript developers implementing solutions, such as checking whether a variable is equal to a string, that is either partially correct or completely correct as it all comes down to what the business logic is.

Many people, including myself, have made logical mistakes as JavaScript might behave completely differently when compared to other programming languages, and it becomes challenging to determine what the error could be when the solution can be “correct” at the naked eye of a typical programmer.

Was this article helpful?

I hope this article helped you find a definite answer to such a common and “simple” task as checking for empty strings.

Share your thoughts by replying on Twitter of Become A Better Programmer or to my personal Twitter account.