null vs undefined in JavaScript: differenze e quando usare l'uno o l'altro

Due modi per dire "niente"

La maggior parte dei linguaggi ha un solo valore per indicare un'assenza. JavaScript ne ha due: null e undefined. Si somigliano abbastanza da confondere chi inizia e sono abbastanza diversi da cogliere di sorpresa anche chi ha esperienza. Capire la differenza tra null e undefined in JavaScript vale bene dieci minuti del tuo tempo.

In breve:

• undefined è quello che JavaScript ti dà quando qualcosa manca.
• null è quello che scrivi tu quando vuoi dire "vuoto di proposito".

let x;
console.log(x);           // undefined - declared, never assigned

const user = { name: "Rosa" };
console.log(user.age);    // undefined - property doesn't exist

function greet(name) {
  console.log(name);
}
greet();                  // undefined - argument not passed

const chosen = null;
console.log(chosen);      // null - you put it there

Nota lo schema: ogni undefined qui sopra compare perché JavaScript non ha trovato un valore. Il null, invece, compare perché qualcuno l'ha scritto.

Da dove arriva undefined in JavaScript

Il valore undefined compare in una manciata di situazioni precise, tutte varianti di "non c'è nessun valore disponibile":

// 1. A declared variable with no initializer
let a;
console.log(a);                    // undefined

// 2. A missing object property
const obj = { x: 1 };
console.log(obj.y);                // undefined

// 3. A missing function argument
function f(x, y) { return y; }
console.log(f(1));                 // undefined

// 4. A function with no return statement
function g() {}
console.log(g());                  // undefined

// 5. A missing array element
const arr = [1, 2];
console.log(arr[5]);               // undefined

In tutti questi casi JavaScript ha cercato un valore e non ha trovato niente. undefined è il modo in cui il motore ti dice: "ho cercato, ma lì non c'era nessun valore".

Puoi assegnare undefined a mano (let x = undefined;), ma è meglio evitarlo. Lascia che resti il segnale di "JavaScript non ha trovato niente". Quando la decisione la prendi tu, usa null.

Da dove arriva null

null compare solo quando qualcuno l'ha scritto. È proprio questo il punto: è un segnale intenzionale.

// "No user is logged in yet."
let currentUser = null;

// Later, a user logs in.
currentUser = { name: "Boris" };

// And logs out.
currentUser = null;

Le API del DOM usano null di continuo: document.getElementById("missing") restituisce null, non undefined, perché il browser ti sta dicendo in modo esplicito "ho cercato e la risposta è che non c'è nessun elemento". Anche JSON.parse("null") ti restituisce null: JSON non ha undefined.

Il modello mentale da tenere a mente: undefined è l'assenza predefinita, null è un'assenza scelta.

La stranezza di typeof null

Ed ecco il caso più famoso:

console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object"   ← ???

Il fatto che typeof null restituisca "object" è un bug del 1995 che non si è mai potuto correggere senza rompere i siti esistenti, quindi è rimasto lì per sempre. null non è un oggetto: è un valore primitivo, come undefined, i numeri, le stringhe e i booleani. È typeof che mente.

La conseguenza pratica: typeof non serve a verificare se un valore è null. Usa il confronto diretto:

const value = null;

if (value === null) {
  console.log("è null");
}

if (typeof value === "undefined") {
  console.log("è undefined");
}

Oppure, come succede più spesso, controlla entrambi in una volta sola. È l'argomento della prossima sezione.

Controllare null o undefined in JavaScript: l'idioma == null

Il più delle volte non ti interessa quale dei due valori assenti hai: vuoi solo sapere se manca qualcosa prima di usarlo. Il controllo idiomatico è l'uguaglianza debole con null:

function describe(value) {
  if (value == null) {
    return "nothing here";
  }
  return `got ${value}`;
}

console.log(describe(null));         // nothing here
console.log(describe(undefined));    // nothing here
console.log(describe(0));            // got 0
console.log(describe(""));           // got
console.log(describe("hello"));      // got hello

value == null è true esattamente per null e undefined e false per tutto il resto, compresi 0, "" e false, che di solito è proprio quello che vuoi. È l'unica situazione in cui == è preferibile a ===. I linter lo sanno e lo permettono.

Se preferisci essere esplicito, value === null || value === undefined significa la stessa cosa e si legge con chiarezza.

Operatori per i valori nullish: ?? e ?.

Sono stati aggiunti due operatori proprio per rendere più comodo lavorare con null e undefined. Entrambi trattano i due valori allo stesso modo e lasciano stare tutto il resto.

L'operatore di nullish coalescing (??) fornisce un valore di ripiego solo quando il lato sinistro è null o undefined:

const config = { retries: 0, timeout: null };

const retries = config.retries ?? 3;     // 0 (not nullish - keep it)
const timeout = config.timeout ?? 5000;  // 5000 (was null)
const name = config.name ?? "guest";     // "guest" (was undefined)

console.log(retries, timeout, name);

Confrontalo con ||, che sostituirebbe 0 con 3 perché 0 è un valore falsy. ?? è più rigido: interviene solo per i due valori nullish.

L'optional chaining (?.) interrompe la valutazione di una catena e restituisce undefined appena incontra null o undefined:

const user = { profile: null };

console.log(user.profile?.name);        // undefined (no crash)
console.log(user.settings?.theme);      // undefined (no crash)
console.log(user?.profile?.name);       // undefined

Entrambi gli operatori esistono perché "questo valore è nullish?" è una domanda che ricorre di continuo. Li vediamo a fondo più avanti nel percorso.

I parametri predefiniti scattano solo con undefined

Una regola sottile ma importante: i valori predefiniti dei parametri si applicano solo con undefined, non con null.

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

greet();             // Hello, friend
greet(undefined);    // Hello, friend
greet(null);         // Hello, null   ← default did not apply

Passare null viene interpretato come "ho scelto esplicitamente di non dare un valore" e viene rispettato così com'è. Se vuoi che anche null faccia scattare il ripiego, usa ?? dentro la funzione:

function greet(name) {
  const display = name ?? "friend";
  console.log(`Hello, ${display}`);
}

greet(null);         // Hello, friend

Questa distinzione fa inciampare molte persone. I parametri predefiniti gestiscono gli argomenti mancanti; ?? gestisce gli argomenti nullish.

JSON e l'undefined che sparisce

JSON ha null ma non ha undefined. Questo porta a sorprese silenziose quando serializzi:

const data = {
  name: "Rosa",
  age: undefined,
  nickname: null,
};

console.log(JSON.stringify(data));
// {"name":"Rosa","nickname":null}

Il campo age è sparito del tutto: JSON.stringify elimina le proprietà con valore undefined. null sopravvive perché JSON lo supporta. Far passare un oggetto per JSON andata e ritorno è un modo tipico in cui le proprietà undefined svaniscono senza far rumore.

Negli array, undefined diventa null:

console.log(JSON.stringify([1, undefined, 3]));
// [1,null,3]

Se stai progettando il payload di un'API, per i campi senza valore preferisci null a undefined. Sopravvive al viaggio.

Quando usare null o undefined in JavaScript

Una convenzione ragionevole per il tuo codice:

• Lascia che undefined significhi "non fornito": argomenti mancanti, variabili non assegnate, proprietà assenti. Non assegnare undefined a mano.
• Usa null quando vuoi comunicare in modo esplicito che "questo è vuoto di proposito": un utente che ha fatto logout, un'opzione non selezionata, un campo di un modulo svuotato.
• Ai confini della tua API accetta entrambi (con == null o ??), ma sii coerente su quale dei due produci.

Alcune guide di stile (compresa quella di TypeScript) rinunciano del tutto a null e usano solo undefined. È una scelta difendibile: un valore è più semplice di due. Scegli una regola per progetto e applicala ovunque.

Prossimo passo: la coercizione di tipo

null e undefined si comportano in modi precisi quando JavaScript li converte in numeri, stringhe o booleani. Number(null) è 0, ma Number(undefined) è NaN, e questo tipo di asimmetria causa bug reali. Il prossimo argomento è la coercizione di tipo, e una volta viste le regole complete, molte stranezze di JavaScript smettono di essere un mistero.