How do I check for an empty/undefined/null string in JavaScript?

To check for an empty, undefined, or null string in JavaScript, you need to account for three scenarios:

1. The variable is undefined.
2. The variable is null.
3. The variable is an empty string ('').

Below are detailed methods with explanations and examples for different use cases.

1. Explicit Check for null, undefined, or Empty String

This method explicitly checks all three conditions:

function isEmpty(str) {
  return str === null || str === undefined || str === '';
}

// Examples:
isEmpty(null);       // true
isEmpty(undefined);  // true
isEmpty('');         // true
isEmpty('Hello');    // false
isEmpty(0);          // false (non-string)

Key Notes:

• Strict Equality Checks (===): Ensures type safety (avoids unintended type coercion).
• Edge Case Handling: Non-string values like numbers or objects return false.

2. Loose Equality Check (==)

Use str == null to check for both null and undefined in one condition:

function isEmpty(str) {
  return str == null || str === '';
}

// Examples:
isEmpty(null);       // true
isEmpty(undefined);  // true
isEmpty('');         // true
isEmpty(0);          // false (non-string)

Why str == null works:

• null and undefined are loosely equal (null == undefined returns true).
• This is a concise way to check for both null and undefined.

3. Nullish Coalescing Operator (??) (ES2020+)

Replace null/undefined with an empty string and check:

function isEmpty(str) {
  return (str ?? '') === '';
}

// Examples:
isEmpty(null);       // true
isEmpty(undefined);  // true
isEmpty('');         // true
isEmpty(0);          // false (non-string)

How It Works:

• str ?? '' replaces null/undefined with '', leaving other values unchanged.
• Then checks if the result is an empty string.

4. Type-Safe Check

Ensure the variable is a string before checking for emptiness:

function isEmpty(str) {
  return str == null || (typeof str === 'string' && str.length === 0);
}

// Examples:
isEmpty(null);       // true
isEmpty(undefined);  // true
isEmpty('');         // true
isEmpty('   ');      // false (whitespace is not trimmed)
isEmpty(0);          // false (non-string)

Key Use Case:
Use this when you want to ignore non-string values (e.g., numbers, objects).

5. Handling Whitespace-Only Strings

Trim whitespace and check if the result is empty:

function isEmptyOrWhitespace(str) {
  return str == null || (typeof str === 'string' && str.trim().length === 0);
}

// Examples:
isEmptyOrWhitespace('   ');      // true
isEmptyOrWhitespace('\t\n\r');   // true
isEmptyOrWhitespace('Hello');    // false

Use Case:
Validating form inputs where whitespace-only entries should be considered empty.

6. Truthy/Falsy Check (Caution!)

Using if (!str) works for null, undefined, and '', but fails for non-strings:

function riskyIsEmpty(str) {
  return !str;
}

// Examples:
riskyIsEmpty('');      // true
riskyIsEmpty(null);    // true
riskyIsEmpty(undefined); // true
riskyIsEmpty(0);       // true (oops! 0 is falsy)
riskyIsEmpty(false);   // true (oops! false is falsy)

Why Avoid This:

• Falsy values like 0, false, or NaN will incorrectly return true.

7. Optional Chaining (?.) (ES2020+)

Safely check nested properties without errors:

const user = { name: '' };

function isNameEmpty(user) {
  return user?.name?.trim() === '';
}

// Example:
isNameEmpty(user); // true

Use Case:
Avoiding Cannot read property 'trim' of undefined errors in nested objects.

Summary Table

Method	null	undefined	''	' '	Non-String Values (e.g., 0)
str === null || ...	✅	✅	✅	❌	❌ (safe)
str == null || ...	✅	✅	✅	❌	❌ (safe)
(str ?? '') === ''	✅	✅	✅	❌	❌ (safe)
Type-Safe Check	✅	✅	✅	❌	✅ (ignores non-strings)
Trim Whitespace	✅	✅	✅	✅	✅ (ignores non-strings)

When to Use Which Method?

• Basic Checks: Use str == null || str === ''.
• Whitespace Handling: Add .trim() for user inputs (e.g., str.trim() === '').
• Type Safety: Include typeof str === 'string' if non-strings might appear.
• Modern Code: Use nullish coalescing (??) or optional chaining (?.) for cleaner syntax.

Let me know if you need further clarification!