When to Use "variable === undefined" vs. "typeof variable === 'undefined'"

According to the jQuery Core Style Guidelines, there are two methods to determine whether a variable is defined:

• Global Variables: typeof variable === "undefined"
• Local Variables: variable === undefined
• Properties: object.prop === undefined

Why the Distinction?

The distinction between these approaches stems from the fundamental difference between declared and undeclared variables in JavaScript.

When a variable is declared but not assigned a value, its value is considered to be undefined. Checking if the variable is undefined using variable === undefined would return true for such variables.

However, if a variable is not declared at all (undeclared variable), checking if it is undefined using variable === undefined would trigger a ReferenceError with the message "'variable is not defined'".

Specific Use Cases

• Global Variables: Global variables are assumed to be declared, so the typeof check (typeof variable === "undefined") is preferred here to avoid ReferenceErrors.
• Local Variables: Local variables are known to be declared within the current scope, so the identity check (variable === undefined) is safe to use and provides a concise syntax.
• Properties: Properties of an object can be either declared or undeclared, so the identity check (object.prop === undefined) is employed to guard against ReferenceErrors.

By using these conventions, jQuery ensures that variable checks are performed consistently and without unexpected errors, based on the variable's scope and declaration status.