Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to check empty/undefined/null strings in JavaScript?
In JavaScript, “” represents the empty string, and we can use the null keyword to initialize the string with a null value. If we don’t assign any value to any variable, it is undefined by default.
Sometimes, we need to check if the string is empty, undefined, or null while working with the strings. For example, we are taking the details from the users via an HTML form, and users can add an empty string to the input field; we need to validate the input field and show the error message to the users.
In this tutorial, we will learn three approaches to checking whether a string is empty, null, or undefined.
Use the string.trim() method and string.length property
The string.trim() method allows us to remove the space from the start of the string. So, we can remove the string from the start of the string. After that, we can check that if the string’s length is zero, the string can be either empty, null, or undefined.
Syntax
Users can follow the syntax below to check empty, undefined, or null strings using the string.trim() method and string.length() property.
let string1 = " ";
string1 = string1.trim();
if (string1.length == 0) {
// string is empty
}
Example
In the example below, we have created two different strings. One is empty, and another contains the space only. Users can see in the output that our logic shows that both strings are empty, as the second string contains only spaces.
<html>
<body>
<h3> Using the<i> string.trim() method and string.length() </i> property to check whether a string is null, undefined, or empty. </h3>
<p id = "output"> </p>
<script>
let output = document.getElementById("output");
let string1 = "";
let string2 = " ";
string1 = string1.trim();
string2 = string2.trim();
if (string1.length == 0) {
output.innerHTML += "The string1 is empty! </br>";
}
if (string2.length == 0) {
output.innerHTML += "The string2 is empty! </br>";
}
</script>
</body>
</html>
Convert the string to Boolean and check if it is empty, undefined, or null
We can convert the strings to boolean using the Boolean constructor or the Double Not operator (!!). When we convert any variable to the Boolean, it maps to the false for all falsy values and true for other values. In JavaScript, empty string, null, and undefined are falsy values, so when we convert it to Boolean, the Boolean() constructor always returns false.
Syntax
In the syntax below, we used the Boolean() constructor to convert the string to a boolean value and check if it’s empty.
let string3 = undefined;
if (Boolean(string3) == false) {
// string3 is either null, empty, or undefined
}
Example
We have converted the three stings containing empty, null, and undefined values in the example below. Also, we have created the isValid() function, which takes the string as a parameter and converts a string to Boolean. After that, we check if the returned value for the string from the Boolean() constructor is true or false.
<html>
<body>
<h3> Converting the<i> string to boolean </i> to check whether a string is null, undefined, or empty. </h3>
<p id = "output"> </p>
<script>
let output = document.getElementById("output");
let str1 = "";
let str2 = null;
let str3 = undefined;
function isValid(str) {
if (Boolean(str)) {
output.innerHTML += "The " + str + " is valid <br/>";
} else {
output.innerHTML += "The " + str + " is not valid <br/>";
}
}
isValid(str1);
isValid(str2);
isValid(str3);
isValid("Hello");
</script>
</body>
</html>
In the above output, users can observe that the Boolean constructor returns false for empty, null, and undefined strings and returns true for the “Hello” string.
Use the strict equality operator
The strict equality operator allows us to compare two variables’ values, and it also compares the types of variables. Here, we will compare our string with “”, null, and undefined. Also, we will use the OR operator to use all three conditions together in the single if condition.
If any one of the three conditions becomes true, that means the string is not valid.
Syntax
Users can follow the syntax below to use the strict equality operator to check whether the sting is empty, null, or undefined.
if (str === "" || str === null || str === undefined) {
// string is not valid
} else {
// string is valid
}
Example
In the example below, the isValid() function contains the if-else statement, which checks string is valid or not. As discussed in the syntax, we have used the OR operator in the if-statement condition, checking all three conditions together for empty, null, and undefined strings.
<html>
<body>
<h3> Using the<i> strict equality operator </i> to check whether string is null, undefined or empty.</h3>
<p id = "output"> </p>
<script>
let output = document.getElementById("output");
function isValid(str) {
if (str === "" || str === null || str === undefined) {
output.innerHTML += "The " + str + " is not valid <br/>";
} else {
output.innerHTML += "The " + str + " is valid <br/>";
}
}
isValid(null);
isValid(undefined);
isValid("TutorialsPoint");
</script>
</body>
</html>
Users learned three approaches to check if the string is empty, undefined, or null. The best approach from all three is the second approach, which uses the Boolean() constructor.
However, users can use the Doble, Not(!!) operator, which provides easy syntax but is not for beginners.
14K+ Views
