In-depth Analysis of null and undefined in JavaScript

Type Definitions and Basic Concepts

In JavaScript, both undefined and null represent the absence of a value, but they have different semantics and purposes. undefined is a primitive data type that indicates a variable has been declared but not yet assigned a value. For example:

var testVar;
console.log(testVar); // shows undefined
console.log(typeof testVar); // shows undefined

In contrast, null is a special object value that represents the intentional absence of any object value. It must be explicitly assigned to a variable:

var testVar = null;
console.log(testVar); // shows null
console.log(typeof testVar); // shows object

Assignment Mechanisms and Automatic Behaviors

undefined appears automatically in the following situations: uninitialized variables, functions without return statements, and non-existent object properties or array elements. For example:

let x; // variable declared but not initialized
console.log(x); // Output: undefined

function doSomething() {
    // no return statement
}
console.log(doSomething()); // Output: undefined

let obj = {};
console.log(obj.property); // Output: undefined

Meanwhile, null requires explicit assignment by developers to indicate that a variable or property should have no value:

let y = null; // variable intentionally set to null
console.log(y); // Output: null

let obj = { property: null }; // property intentionally set to null
console.log(obj.property); // Output: null

Type Checking and Equality Comparisons

When using the typeof operator, undefined returns "undefined", while null returns "object", which is a historical artifact from JavaScript's early design.

In equality comparisons, loose equality (==) considers null and undefined equal because both are falsy values:

console.log(null == undefined); // true

However, strict equality (===) checks both type and value, thus returning false:

console.log(null === undefined); // false
console.log(null === null); // true

Practical Applications and Default Parameters

In function default parameters, undefined triggers the default value, while null does not:

function example(str = "default") {
    console.log(str);
}

example(); // Output: "default"
example(undefined); // Output: "default"
example(null); // Output: null

ES2021 New Feature: Logical Nullish Assignment Operator

ES2021 introduced the logical nullish assignment operator (??=), which assigns a value only if the variable is null or undefined:

let a = null;
let b = "new value";

a ??= b; // equivalent to a = a ?? b
console.log(a); // Output: "new value"

let c = ""; // empty string is falsy but not null or undefined
c ??= b;
console.log(c); // Output: ""

This operator only applies to null and undefined, unlike the logical OR assignment operator (||=) which applies to all falsy values.

Conclusion and Best Practices

undefined signifies an undefined value, typically assigned automatically by JavaScript; null denotes an intentional empty value, set explicitly by developers. When comparing, use strict equality to avoid unexpected behavior from type coercion. Understanding these distinctions aids in writing clearer, more predictable code, especially when handling default values and data validation.