Deep Dive into JavaScript: Null vs Undefined and the Difference Between == and ===

Core Differences Between Null and Undefined

In JavaScript, both null and undefined represent forms of "empty" values, but they have significant semantic and usage differences. undefined typically indicates that a variable has not been defined or assigned a value, serving as the default value automatically provided by the JavaScript engine. For example, declared but uninitialized variables, missing function parameters, and non-existent object properties all return undefined.

In contrast, null represents an explicit reference to "no object," usually assigned intentionally by developers. In scenarios requiring explicit "empty object reference" indication, such as when the DOM API's getElementById method fails to find an element, it returns null rather than undefined.

From a type system perspective, null is the sole value of the Null type, while undefined is the only value of the Undefined type. Although typeof null returning "object" is considered a historical artifact of JavaScript, developers must still distinguish between their different semantics in practice.

Methods for Detecting Null and Undefined

When checking if a variable is null, it's recommended to use the strict equality operator:

if (variable === null) {
    // variable is explicitly null
}

For detecting undefined, multiple approaches exist, with the most reliable being the typeof operator:

if (typeof variable === "undefined") {
    // variable is undefined
}

Alternatively, strict equality can be used:

if (variable === undefined) {
    // variable is undefined
}

It's important to note that when using loose equality == for detection, null == undefined returns true, which may not be the desired behavior. In practical development, the "falsy" nature of both values can be leveraged for simplified checking:

if (!variable) {
    // variable is falsy, including undefined, null, "", 0, NaN, false
}

In-depth Comparison of == and ===

The fundamental difference between === (strict equality) and == (loose equality) lies in type coercion. Strict equality first compares the types of operands, returning false immediately if types differ. Only when types match does it proceed to value comparison.

Loose equality performs type conversion before comparison, following complex conversion rules. For example:

console.log("1" == 1);   // true, string "1" converts to number 1
console.log("1" === 1);  // false, types differ
console.log(null == undefined);  // true
console.log(null === undefined); // false
console.log("" == 0);    // true, empty string converts to 0
console.log("" === 0);   // false

The complexity of type coercion can lead to unexpected results, making strict equality the recommended choice in practice to avoid potential issues.

Modern Null Value Handling in JavaScript

ES2021 introduced the logical nullish assignment operator ??=, which performs assignment only when the left operand is null or undefined:

let name = null;
let defaultName = "default name";

name ??= defaultName;
// equivalent to:
// if (name === null || name === undefined) {
//     name = defaultName;
// }

console.log(name); // "default name"

This is closely related to the nullish coalescing operator ??, which returns the right operand only for null and undefined, unlike the traditional || that returns the right operand for all falsy values:

const value1 = null ?? "default";     // "default"
const value2 = "" ?? "default";       // "" (empty string)
const value3 = "" || "default";       // "default"

These new features provide more precise null value handling mechanisms, making code intent clearer.

Practical Application Scenarios

In function parameter handling, undefined and null exhibit different behaviors. With default parameters, undefined triggers the default value, while null does not:

function greet(name = "Guest") {
    console.log(`Hello, ${name}!`);
}

greet();           // "Hello, Guest!"
greet(undefined);  // "Hello, Guest!"
greet(null);       // "Hello, null!"

This difference reflects JavaScript's distinct handling logic for "value not provided" (undefined) versus "explicitly provided empty value" (null).