Coercizione dei tipi in JavaScript: implicita ed esplicita

Due tipi di coercizione

JavaScript è permissivo con i tipi. Quando un operatore riceve un valore del tipo "sbagliato", il linguaggio non lancia un errore: lo converte. Questa conversione si chiama coercizione, e ne esistono due varianti:

• Esplicita: la chiedi tu, con Number("42"), String(99), Boolean(value).
• Implicita: la scatena un operatore senza che tu scriva una conversione, come in "5" - 2, "" == 0, if (value).

Entrambe finiscono per applicare le stesse regole di conversione sottostanti. La differenza è se a decidere di convertire sei stato tu o il linguaggio. Quasi ogni risultato strano di JavaScript ("5" + 1 === "51", [] == false, null == undefined) nasce da una coercizione implicita che ti coglie di sorpresa.

console.log(Number("42"));    // 42     (explicit)
console.log("5" - 2);         // 3      (implicit)
console.log("5" + 2);         // "52"   (implicit, and different!)
console.log(Boolean(""));     // false  (explicit)
console.log(!!"");            // false  (implicit, same result)

Il modello mentale: se scrivi Number(...) o String(...) sai cosa stai chiedendo. Se non lo fai, ogni operatore ha la sua opinione su cosa fare, ed è proprio lì che si nascondono i bug.

I tre tipi di destinazione

La coercizione converte sempre verso uno di tre tipi primitivi: string, number o boolean. (Ce n'è un quarto, bigint, ma non riceve mai una conversione automatica da altri tipi.) Tutto il resto delle regole deriva da quale destinazione punta un operatore.

console.log(String(123));       // "123"
console.log(String(true));      // "true"
console.log(String(null));      // "null"
console.log(String(undefined)); // "undefined"
console.log(String([1, 2, 3])); // "1,2,3"
console.log(String({a: 1}));    // "[object Object]"

La coercizione a stringa è quella più indulgente: ogni valore ha una forma testuale. Nota che gli oggetti diventano il poco utile "[object Object]", ed è per questo che stampare un oggetto concatenato a una stringa ("user: " + user) quasi non mostra mai quello che volevi. Usa invece JSON.stringify o template literal con campi specifici.

Coercizione a number

La coercizione a numero è più rigida. Le stringhe devono sembrare davvero un numero, altrimenti ottieni NaN:

console.log(Number("42"));       // 42
console.log(Number("42.5"));     // 42.5
console.log(Number(""));         // 0    (!)
console.log(Number("   "));      // 0    (!)
console.log(Number("42px"));     // NaN
console.log(Number(true));       // 1
console.log(Number(false));      // 0
console.log(Number(null));       // 0    (!)
console.log(Number(undefined));  // NaN
console.log(Number([]));         // 0    (!)
console.log(Number([42]));       // 42   (!)
console.log(Number([1, 2]));     // NaN

Le sorprese tra parentesi sono quelle da imparare a memoria:

• La stringa vuota e le stringhe fatte solo di spazi diventano 0, non NaN.
• null diventa 0, ma undefined diventa NaN.
• Un array vuoto diventa 0; un array con un solo elemento converte quell'elemento; un array con più elementi diventa NaN.

Se vuoi estrarre un numero da una stringa che contiene altri caratteri, usa parseInt o parseFloat invece di Number:

console.log(parseInt("42px", 10));   // 42
console.log(parseFloat("3.14em"));   // 3.14
console.log(parseInt("", 10));       // NaN  (stricter than Number(""))

Passa sempre la base (10) a parseInt. Senza, le stringhe che iniziano con "0x" vengono lette come esadecimali, cosa che raramente è quello che intendevi.

Coercizione a boolean

La coercizione a booleano è la più semplice delle tre. Un breve elenco di valori diventa false; tutto il resto è true.

I valori falsy sono:

• false
• 0, -0, 0n
• "" (stringa vuota)
• null
• undefined
• NaN

Tutto qui. Ogni altro valore, compresi "false", "0", [] e {}, è truthy.

console.log(Boolean(""));      // false
console.log(Boolean("false")); // true   (non-empty string)
console.log(Boolean(0));       // false
console.log(Boolean("0"));     // true   (stringa non vuota)
console.log(Boolean([]));      // true   (un array vuoto è truthy!)
console.log(Boolean({}));      // true   (un oggetto vuoto è truthy!)

if ([]) console.log("l'array vuoto esegue il blocco dell'if");
if ({}) console.log("anche l'oggetto vuoto lo esegue");

I risultati con array e oggetti vuoti fregano chi arriva da Python, dove le collezioni vuote sono falsy. In JavaScript sono truthy: se vuoi sapere "questo array è vuoto?", controlla esplicitamente arr.length === 0.

La coercizione a booleano avviene ogni volta che un valore compare dove ci si aspetta un booleano: if (...), while (...), l'operatore ternario ? : e gli operatori logici &&, ||, !.

L'operatore + è un caso speciale

La maggior parte degli operatori aritmetici converte gli operandi in numeri. + è diverso: se uno qualsiasi dei due lati è una stringa, + concatena le stringhe. Altrimenti fa una somma numerica.

console.log(1 + 2);       // 3
console.log("1" + 2);     // "12"
console.log(1 + "2");     // "12"
console.log(1 + 2 + "3"); // "33"    (left-to-right: 3, then "33")
console.log("1" + 2 + 3); // "123"   (once it's a string, it stays one)

console.log("5" - 2);     // 3       (- has no string version)
console.log("5" * "2");   // 10      (* coerces both sides)
console.log("5" / "2");   // 2.5

La valutazione procede da sinistra a destra. 1 + 2 + "3" calcola prima 1 + 2 = 3, poi 3 + "3" = "33". Invece "1" + 2 + 3 parte come stringa e resta stringa: "12", poi "123".

Ecco perché costruire stringhe con + è fragile. I template literal non hanno questo problema:

const count = 3;
console.log("count: " + count + 1);   // "count: 31"  (oops)
console.log(`count: ${count + 1}`);   // "count: 4"

Il template literal valuta count + 1 come espressione numerica a sé, poi inserisce il risultato. Nessuna coercizione a sorpresa.

Preferisci le conversioni esplicite

Quando devi convertire un tipo, dillo chiaramente. Costa qualche carattere in più ed elimina ogni ambiguità per chi leggerà dopo:

const input = "42";

// Implicit - works, but easy to misread.
const n1 = +input;
const n2 = input * 1;

// Explicit - reads as "I want a number from this string".
const n3 = Number(input);

// For user input that might be messy:
const n4 = parseInt(input, 10);

console.log(n1, n2, n3, n4);

Lo stesso vale per i booleani. !!value funziona ed è diffuso, ma Boolean(value) dice esattamente cosa fa:

const value = "hello";
console.log(!!value);          // true
console.log(Boolean(value));   // true - easier to grep for

Una regola ragionevole: usa le conversioni esplicite nella logica dell'applicazione e riserva le forme brevi (+x, !!x) ai punti in cui la brevità conta e l'intenzione è ovvia dal contesto.

L'operatore == si appoggia molto sulla coercizione

Gli operatori di uguaglianza sono la fonte principale di sorprese legate alla coercizione. == converte prima di confrontare; === no.

console.log(1 == "1");         // true   (string coerced to number)
console.log(0 == "");          // true   (both coerce to 0)
console.log(0 == false);       // true   (false coerces to 0)
console.log(null == undefined); // true  (special case, only these two)
console.log(null == 0);        // false  (null does NOT coerce for ==)
console.log([] == false);      // true   ([] → "" → 0, false → 0)
console.log([1] == 1);         // true   ([1] → "1" → 1)

console.log(1 === "1");        // false  (different types, done)
console.log(null === undefined); // false

Ogni true qui sopra è il risultato di una catena di coercizioni in più passaggi che la maggior parte degli sviluppatori non saprebbe recitare a memoria. È questo il problema: il codice che funziona per caso è codice che prima o poi si rompe. Vedremo le regole complete dell'uguaglianza nella prossima pagina; per ora il messaggio è: usa === per impostazione predefinita, e ricorri a == solo per l'idioma specifico x == null (che cattura sia null sia undefined).

Mettere insieme i pezzi

Un esempio completo che mostra dove la coercizione aiuta e dove fa danni:

function parsePrice(input) {
    // Explicit: we want a number or nothing.
    const n = Number(input);
    if (Number.isNaN(n)) return null;
    return n;
}

function formatTotal(price, quantity) {
    // Template literal handles string building without + surprises.
    const total = price * quantity;
    return `Total: $${total.toFixed(2)}`;
}

console.log(parsePrice("19.99"));  // 19.99
console.log(parsePrice(""));        // 0      (Number("") is 0 - watch out)
console.log(parsePrice("abc"));     // null
console.log(formatTotal(parsePrice("19.99"), 3)); // "Total: $59.97"

Guarda la seconda chiamata. Number("") restituisce 0, non NaN, quindi parsePrice("") restituisce 0, che probabilmente non è ciò che vorrebbe chi usa questa funzione. Se l'input vuoto va rifiutato, aggiungi un controllo esplicito:

function parsePrice(input) {
    if (typeof input !== "string" || input.trim() === "") return null;
    const n = Number(input);
    return Number.isNaN(n) ? null : n;
}

console.log(parsePrice(""));       // null
console.log(parsePrice("  "));     // null
console.log(parsePrice("19.99"));  // 19.99

Sapere quali valori diventano 0 e quali NaN è proprio il tipo di dettaglio che ti salva da un bug subdolo più avanti.

Cosa portarsi a casa

• La coercizione converte in string, number o boolean a seconda dell'operatore.
• + con una qualsiasi stringa diventa concatenazione; ogni altro operatore aritmetico converte in numero.
• I valori falsy sono un breve elenco fisso: imparalo a memoria. Tutto il resto è truthy, compresi [] e {}.
• Number("") è 0, Number([]) è 0, Number(null) è 0, ma Number(undefined) è NaN. Questi casi compaiono in bug reali.
• Preferisci Number(x), String(x), Boolean(x) ai trucchetti impliciti. Il te del futuro ti ringrazierà.

Prossimo passo: gli operatori di uguaglianza

Tutto ciò che la coercizione fa nei confronti vive dentro ==. La prossima pagina mette a confronto ==, === e Object.is, mostra l'unico idioma in cui == è ancora utile e spiega perché i linter segnalano per impostazione predefinita la forma non rigorosa.