Back to blog

How to Check if a String is Empty, Null, or Undefined in JavaScript

Validating user input is a fundamental task in web development. In JavaScript, checking if a text input value is empty is a source of confusion due to the language's dynamic type system.

A variable meant to hold a string might evaluate to an empty string "", a null object null, an uninitialized state undefined, or a string composed entirely of blank spaces " ".

In this guide, we will analyze JavaScript's truthy and falsy rules, compare string check methods, and write a robust string validation helper.

1. The Simple Check (Truthy/Falsy)

In JavaScript, empty strings "", null, and undefined are all falsy values. This means you can check for all three states using the logical NOT (!) operator:

let str1 = "";
let str2 = null;
let str3 = undefined;

if (!str1) console.log("str1 is empty"); // Triggers
if (!str2) console.log("str2 is empty"); // Triggers
if (!str3) console.log("str3 is empty"); // Triggers

The Pitfall: Whitespace Strings

While !str is clean, it fails if the string contains only spaces:

let str = "   "; // User typed spaces in form
if (!str) {
  console.log("Empty");
} else {
  console.log("Not Empty"); // Outputs: "Not Empty"
}

Because a string containing spaces is a non-empty string, JavaScript evaluates it as truthy. If your application accepts input like " " without checking, you will write blank spaces into your database.

2. The Robust Check (Trimming Whitespaces)

To ensure strings containing only spaces are detected as empty, use the trim() method. trim() removes leading and trailing whitespaces from both ends of a string.

Combine the falsy check with a trim length verification:

// Safe check for empty or space-only inputs
if (!str || str.trim().length === 0) {
  console.log("String is empty, null, or only whitespace");
}
  • !str intercepts null, undefined, and "" immediately.
  • str.trim().length === 0 removes spaces from " " and detects that the resulting length is zero.

3. Strict Type Guard Verification

If your function accepts multiple variable types and you must ensure the input is specifically a string before checking its contents, use the typeof guard:

function isStringEmpty(value) {
  return typeof value === 'string' && value.trim() === '';
}

Without the typeof check, calling .trim() on a number or object would throw a TypeError crash.

Creating a Universal Helper Function

Here is a robust helper function that handles all empty validation test scenarios:

/**
 * Safely checks if a value is an empty string, null, undefined, or whitespace.
 */
export function isBlank(value: unknown): boolean {
  if (value === null || value === undefined) {
    return true;
  }

  if (typeof value === 'string') {
    return value.trim().length === 0;
  }

  // Treat non-string types (arrays, objects) as not empty string representations
  return false;
}

Performance Note: length vs. Strict Equal

When comparing strings, checking str.length === 0 is micro-optimally faster than checking str === '' in some older browser JS engines. However, in modern V8 engines (Chrome/Node.js), their performance is identical. Focus on readability first.

Conclusion

Validating strings in JavaScript requires checking beyond simple truthy assertions. While !str is convenient for catching null, undefined, and "", you must incorporate .trim() to prevent users from submitting whitespace-only values. For library utilities, wrap validations with typeof checks to prevent runtime runtime crashes.