Spieghiamo il MEME JavaScript: '2' + '2' - '2' = 20

Questo MEME sul JavaScript gioca sul diverso comportamento degli operatori di addizione e di sottrazione quando gli operandi sono valori numerici in formato stringa o numero intero.

Puoi trovare maggiori informazioni sugli operatori nella video lezione dedicata nel mio Corso GRATUITO sul JavaScript Semplificato per Google: https://www.youtube.com/watch?v=9agqHjskIW8

Per spiegare l'apparente inatteso comportamento delle operazioni mostrate in figura, come nel video del MEME precedente, farò riferimento alle specifiche di ECMAScript, uno standard di linguaggio di scripting pensato per garantire l'interoperabilità delle pagine web tra diversi browser.

L'operatore di addizione può eseguire la concatenazione di stringhe o, appunto, l'addizione numerica. Nel primo caso si tratta di una semplice operazione aritmetica, non c’è niente di strano nell’aspettarsi che 2 + 2 dia come risultato 4.

Nel secondo caso invece i valori che si trovano a destra e sinistra del simbolo + sono due stringhe "2" + "2" = "22".

Il risultato in questo caso infatti non è più 4 bensì la concatenazione delle due stringe, "22". Può trarre in inganno il fatto che si tratti di stringhe composte da caratteri numerici, più chiaro potrebbe essere vedere la concatenazione considerando anche i caratteri alfabetici, come "a" + "1" che dà come risultato "a1", oppure un esempio più reale nel mondo della programmazione:

var nome_utente = "Michele";
var anno_di_nascita = 1980;
console.log("Mi chiamo " + nome_utente + " e sono nato nel " + anno_di_nascita);

Che si traduce nella relativa concatenazione delle stringhe dando come risultato, "Mi chiamo Michele e sono nato nel 1980".

In questo esempio è interessante notare che il valore di anno_di_nascita non è una stringa, bensì un numero, infatti, come si può leggere dalle specifiche di ECMAScript, con l’operatore di addizione è sufficiente che uno dei due valori sia una stringa affinché il linguaggio in modo automatico effettui un CAST per fare in modo che entrambi i valori risultino di tipo stringa.

La sottrazione invece funziona in altro modo.

L'immagine mostra che 2 + 2 - 2 dà come risultato 2, ed in effetti non è niente di più che una semplice operazione aritmetica dove 2 + 2 è uguale a 4 al quale sottraiamo 2 per dare come risultato 2.

Il complementare esempio dove i tipi dei valori numerici non sono numeri interi bensì stringhe, dà un risultato diverso: "2" + "2" - "2" = 20

I principi sono gli stessi descritti nell'esempio visto poco fa, ovvero il primo segno di addizione trovandosi a sommare stringhe le concatena, quindi è come se l’operazione diventasse “22” - “2”.

A questo punto, le specifiche di ECMAScript spiegano perché il risultato di questa sottrazione tra stringhe è 20 e, per di più, non in formato stringa bensì numerico.

Ovvero, perché in caso di sottrazione, sia il valore a sinistra che quello a destra del simbolo meno vengono convertiti in modo automatico in numeri, di conseguenza l’operazione è come se fosse 22 - 2, che dà 20.

Motivo per il quale se provo a sottrarre una stringa con valore numerico da una stringa con caratteri alfabetici, ad esempio: "22" - "a"

JavaScript li prova a convertire entrambi in numeri e, poiché “a” non è convertibile in numero, il risultato diventa NaN (Not a Number).

Grazie a questo MEME abbiamo avuto l'occasione di mettere a confronto il comportamento degli operatori di addizione e sottrazione quando il contesto nel quale sono applicati coinvolge non solo valori numerici ma anche stringhe.

Spero che questo video ti sia piaciuto, fammelo sapere nei commenti e non peritarti a scrivere se hai altre curiosità del JavaScript che vorresti approfondire. Ti invito anche iscriverti al mio canale se ancora non l'hai fatto e ci vediamo al prossimo MEME, ciao ;)