How to check for null or undefined in JavaScript

1value == null: null or undefined, nothing elseRecommended

Loose equality == is usually avoided because of its type-coercion rules, but comparing with null is the one case where its rule is short and useful: null and undefined are loosely equal to each other and to nothing else. No numbers or strings get converted. So value == null means exactly "null or undefined", and value != null means "has a value". Even ESLint's eqeqeq rule, which exists to ban ==, has settings ("smart", or { "null": "ignore" }) that still allow this one comparison.

const cases = [
  ["null", null],
  ["undefined", undefined],
  ["0", 0],
  ['""', ""],
  ["false", false],
  ["NaN", NaN],
];

for (const [label, value] of cases) {
  console.log(label.padEnd(9), value == null);
}

// value == null is shorthand for exactly this pair of strict checks
const missing = undefined;
console.log(missing == null, missing === null || missing === undefined);

function formatPrice(amount) {
  if (amount == null) return "price on request";
  return `$${amount.toFixed(2)}`;
}

console.log(formatPrice(null));
console.log(formatPrice(undefined));
console.log(formatPrice(0));

Only null and undefined print true; 0, "", false and NaN all print false. The true true line shows the shorthand and the long form agree. Then formatPrice prints price on request twice and $0.00 for 0: zero is a real price, and == null lets it through where if (!amount) would not. If your team forbids == outright, write value === null || value === undefined. It means the same thing.

2null vs undefined, and the strict checks

undefined is the language's default: a declared variable with no value, a property that isn't there, an argument nobody passed, the result of a function with no return. null never shows up by itself; it is always something code assigned. When that difference matters to you, the strict checks === null and === undefined tell the two apart, and a few language features already treat them differently.

const user = { name: "Ada", nickname: null };

console.log(user.nickname); // set on purpose: "there is no nickname"
console.log(user.email);    // never set at all

let pending;                // declared, never assigned
console.log(pending);

// Strict checks tell the two apart; loose == does not
console.log(user.nickname === null, user.email === undefined);
console.log(null == undefined, null === undefined);
console.log(typeof null, typeof undefined);

// Default parameters (and destructuring defaults) fill in undefined only
function label(text = "(none)") {
  return text;
}
console.log(label(undefined), label(null));

// JSON keeps null and drops undefined
console.log(JSON.stringify({ a: null, b: undefined }));
console.log(JSON.stringify([null, undefined]));

// In arithmetic, null becomes 0 and undefined becomes NaN
console.log(null + 1, undefined + 1);

user.nickname prints null, while user.email and pending print undefined. The strict checks separate them (true true), and null == undefined is true while null === undefined is false. typeof null is object, a mistake from JavaScript's first version that was never fixed, so typeof can't detect null: use === null. Default parameters fill in undefined only, so label(null) returns null, not (none). JSON.stringify keeps null and drops an undefined property ({"a":null}), and in arrays it writes undefined as null ([null,null]). Finally null + 1 is 1 but undefined + 1 is NaN.

3typeof x === "undefined" for names that may not exist

Every check so far reads the variable, and reading a name that was never declared throws a ReferenceError. typeof is the one operator that accepts an undeclared name and returns "undefined" instead of throwing. You only need that for a name that might not exist at all, typically a global that some environments define and others don't. For declared variables, parameters and properties, x === undefined is the same test and reads more plainly.

// typeof never throws, even for a name that was never declared
console.log(typeof notDeclaredAnywhere);
console.log(typeof notDeclaredAnywhere === "undefined");

// Reading the bare name is a ReferenceError
try {
  console.log(notDeclaredAnywhere === undefined);
} catch (err) {
  console.log(`${err.name}: ${err.message}`);
}

// For a global that may or may not exist, check it as a property instead
console.log(globalThis.notDeclaredAnywhere === undefined);
console.log("notDeclaredAnywhere" in globalThis);

// typeof does not rescue a let or const read before its declaration
try {
  console.log(typeof later);
  let later = 1;
} catch (err) {
  console.log(`${err.name}: ${err.message}`);
}

typeof notDeclaredAnywhere prints undefined and the comparison true, while reading the name directly throws ReferenceError: notDeclaredAnywhere is not defined. Checking the global as a property of globalThis is the other safe route: true, then false from the in test. The last case is the trap: inside the block that declares let later, typeof later still throws ReferenceError: Cannot access 'later' before initialization, because a let or const can't be touched until its declaration has run (the "temporal dead zone"). Old code also used typeof because undefined could once be reassigned; since ES5 the global undefined is read-only, so that reason is gone.

4Truthiness and its traps

if (value) and if (!value) are the shortest checks, and they are fine when every falsy value really does mean "nothing here". But JavaScript has eight falsy values, not two: false, 0, -0, 0n, "", null, undefined and NaN. A truthiness check lumps real data, such as a count of 0 or an empty title, in with the missing values.

// The complete list of falsy values
const falsy = [false, 0, -0, 0n, "", null, undefined, NaN];
console.log(falsy.every((value) => !value));

// Everything else is truthy, including a few surprises
console.log(Boolean("0"), Boolean("false"), Boolean(" "), Boolean([]), Boolean({}));

// The trap: 0 is a real value, but !count treats it as missing
function describe(count) {
  if (!count) return "no count given";
  return `count is ${count}`;
}
console.log(describe(undefined));
console.log(describe(0));

function describeFixed(count) {
  if (count == null) return "no count given";
  return `count is ${count}`;
}
console.log(describeFixed(undefined));
console.log(describeFixed(0));

// NaN is falsy, but the right test for it is Number.isNaN
const parsed = Number("abc");
console.log(parsed, !parsed, Number.isNaN(parsed));

The first line prints true: all eight are falsy. The second prints true true true true true, the surprises: "0", "false", a single space, an empty array and an empty object are all truthy, so !arr can't tell you an array is empty (use arr.length === 0). Then the bug: describe(0) prints no count given even though a count was passed, while describeFixed(0) prints count is 0. The last line, NaN true true, shows that !parsed does catch a failed Number() conversion, but it would say the same about a real 0; Number.isNaN asks the actual question.

5Defaults and safe access: ??, ??= and ?.

JavaScript does have a null coalescing operator: a ?? b returns a unless it is null or undefined, and b if it is. It arrived in ES2020 together with optional chaining, ?., and ES2021 added the assignment form ??=. Before them the idiom was a || b, which falls back on any falsy value: the same trap as the previous section.

const settings = { retries: 0, title: "", theme: null };

// || falls back on ANY falsy value, so it throws away 0 and ""
console.log(settings.retries || 3, JSON.stringify(settings.title || "Untitled"));

// ?? falls back only on null or undefined
console.log(settings.retries ?? 3, JSON.stringify(settings.title ?? "Untitled"));
console.log(settings.theme ?? "light", settings.missing ?? "default");

// ??= assigns only when the current value is null or undefined
settings.theme ??= "dark";
settings.retries ??= 5;
console.log(settings);

// ?. stops at null or undefined instead of throwing
const order = { customer: { address: null } };
console.log(order.customer?.address?.city);
console.log(order.customer?.address?.city ?? "no city");
console.log(order.notes?.length);
console.log(order.format?.("short"));

try {
  console.log(order.customer.address.city);
} catch (err) {
  console.log(`${err.name}: ${err.message}`);
}

|| replaces the retry count of 0 and the empty title (3 "Untitled"); ?? keeps both (0 "") and falls back only for the null theme and the missing key (light default). After ??= the object is { retries: 0, title: '', theme: 'dark' }: the theme was null so it was filled, the retries were 0 so they were left alone. ?. returns undefined as soon as it meets null or undefined, pairs naturally with ?? (no city), and also works on calls (order.format?.("short")) and brackets (list?.[0]). Without it the chain throws TypeError: Cannot read properties of null (reading 'city'). Keep || for when you do want to replace every falsy value, such as treating an empty string as missing.

6Which check should you use?

7Common variation: empty or whitespace-only strings

The most-asked version of this question is about form input: is this string null, undefined, empty, or only spaces? Combine == null with trim(), which removes whitespace from both ends. If what is left is "", the string was blank. The typeof guard keeps the helper from crashing when it is handed a number or some other non-string.

function isBlank(value) {
  return value == null || (typeof value === "string" && value.trim() === "");
}

const inputs = [null, undefined, "", "   ", "\t\n", "0", " Ada "];

for (const input of inputs) {
  const shown = JSON.stringify(input) ?? "undefined";
  console.log(shown.padEnd(11), isBlank(input));
}

// trim() also strips Unicode spaces like U+00A0 (no-break) and U+3000
console.log(" 　".trim().length);

// Empty only, where whitespace counts as content: compare with ""
const name = "   ";
console.log(name === "", name.length === 0, name.trim() === "");

null, undefined, "", " " and "\t\n" are blank; "0" and " Ada " are not. trim() removes Unicode whitespace too, so a no-break space plus an ideographic space trims to length 0. The last line, false false true, is the difference between empty and blank: three spaces fail === "" and length === 0 and pass only after trimming. The shorter !value?.trim() works when the value is always a string, null or undefined, but on a number it throws a TypeError: ?. only guards against null and undefined, and numbers have no trim method.