How can I check for "undefined" in JavaScript?

Mastering 'undefined' Checks in JavaScript

Learn the various techniques to reliably check for 'undefined' values in JavaScript, understand their nuances, and choose the best method for your code.

In JavaScript, undefined is a primitive value automatically assigned to variables that have been declared but not yet assigned a value, to non-existent object properties, or as the return value of functions that do not explicitly return anything. Understanding how to correctly check for undefined is crucial for writing robust and error-free applications. This article explores several common methods, highlighting their strengths and use cases.

The typeof Operator

The typeof operator is one of the safest and most common ways to check for undefined. It returns a string indicating the type of the unevaluated operand. When an operand is undefined, typeof returns the string 'undefined'. This method is particularly useful because it doesn't throw a ReferenceError if the variable itself has not been declared, making it safe for checking global variables or properties that might not exist.

let myVariable;
console.log(typeof myVariable);     // "undefined"

let anotherVariable = 10;
console.log(typeof anotherVariable); // "number"

// Checking an undeclared variable (safe with typeof)
console.log(typeof nonExistentVariable); // "undefined"

const myObject = {};
console.log(typeof myObject.someProperty); // "undefined"

if (typeof myVariable === 'undefined') {
  console.log('myVariable is undefined');
}

Demonstrates typeof operator for checking undefined.

Direct Comparison with undefined

You can directly compare a variable or property to the global undefined value using the strict equality operator (===). This method is straightforward and works reliably when the variable or property is accessible. However, it will throw a ReferenceError if the variable has not been declared at all, unlike typeof. It's generally safe to use when you know the variable is declared but might hold an undefined value.

let value1;
let value2 = null;
let value3 = 0;

console.log(value1 === undefined); // true
console.log(value2 === undefined); // false (null is not undefined)
console.log(value3 === undefined); // false

const obj = { a: 1 };
console.log(obj.b === undefined);  // true

// This would throw a ReferenceError if 'undeclaredVar' was not declared
// console.log(undeclaredVar === undefined); // DANGER!

if (value1 === undefined) {
  console.log('value1 is undefined');
}

Examples of direct comparison with undefined.

The void Operator

The void operator evaluates an expression and returns undefined. This can be used to explicitly obtain the undefined primitive value, which can then be used for comparison. While less common than typeof or direct comparison, it's a valid and sometimes preferred way to ensure you're comparing against the true undefined value, especially in environments where the global undefined might have been (incorrectly) reassigned (though this is rare in modern JavaScript).

let data;

if (data === void 0) {
  console.log('data is undefined using void 0');
}

// void 0 is equivalent to undefined
console.log(void 0 === undefined); // true

const myObj = { prop: 'hello' };
console.log(myObj.nonExistent === void 0); // true

Using void 0 for undefined checks.

Logical OR (||) for Default Values

While not a direct 'check' for undefined, the logical OR operator (||) is frequently used to provide default values when a variable might be undefined (or null, 0, '', false). JavaScript's short-circuiting behavior means that if the left-hand operand is 'falsy' (including undefined), the right-hand operand will be evaluated and returned.

function greet(name) {
  const actualName = name || 'Guest';
  console.log(`Hello, ${actualName}!`);
}

greet('Alice');     // Hello, Alice!
greet(undefined);   // Hello, Guest!
greet(null);        // Hello, Guest!
greet('');          // Hello, Guest!
greet(0);           // Hello, Guest!

let config = { timeout: 5000 };
const userTimeout = config.userTimeout || 10000;
console.log(userTimeout); // 10000 (since config.userTimeout is undefined)

Using || for providing default values when a variable is undefined or other falsy values.

Nullish Coalescing Operator (??)

Introduced in ES2020, the nullish coalescing operator (??) provides a way to define a default value only when the left-hand operand is null or undefined. Unlike ||, it does not treat 0, '', or false as nullish, offering more precise control over default assignments.

function displayValue(value) {
  const result = value ?? 'Default Value';
  console.log(`Value: ${result}`);
}

displayValue('Hello');    // Value: Hello
displayValue(undefined);  // Value: Default Value
displayValue(null);       // Value: Default Value
displayValue(0);          // Value: 0 (unlike ||, 0 is not treated as nullish)
displayValue('');         // Value:  (unlike ||, '' is not treated as nullish)
displayValue(false);      // Value: false (unlike ||, false is not treated as nullish)

let userSettings = { theme: 'dark' };
const selectedTheme = userSettings.theme ?? 'light';
console.log(selectedTheme); // dark

let userPreferences = {};
const defaultLanguage = userPreferences.language ?? 'en-US';
console.log(defaultLanguage); // en-US

Using ?? for providing default values only when a variable is undefined or null.

Decision flow for choosing the right undefined check.

Best Practices and Summary

Choosing the right method for checking undefined depends on your specific needs:

• typeof myVar === 'undefined': Safest for checking potentially undeclared variables or object properties without risking a ReferenceError.
• myVar === undefined: Direct and clear, suitable when you're sure the variable is declared and accessible.
• myVar === void 0: A robust alternative to === undefined, ensuring you're comparing against the true undefined primitive.
• myVar || defaultValue: Useful for providing default values when myVar is undefined, null, 0, '', or false.
• myVar ?? defaultValue: Ideal for providing default values only when myVar is undefined or null, preserving other falsy values.