Spieghiamo il MEME JavaScript ('b' + 'a' + + 'a' + 'a').toLowerCase();

Questo MEME sul JavaScript gioca sull'effetto dell'operatore + che, quando usato tra stringhe di testo, le concatena, come abbiamo avuto modo di vedere dalla lezione sugli operatori nel mio corso sul JavaScript Semplificato per Google.

La domanda pertanto è:

- perché utilizzando questo operatore per concatenare il carattere "b" con una serie di caratteri "a", vengono aggiunte delle "n" ed il risultato è… banana?

function meme() {
  var result = ('b' + 'a' + + 'a' + 'a').toLowerCase();
  console.log(result); // banana
}

Sicuramente è facile intuire che la prima parte della parola è costituita dalla semplice concatenazione dei primi due caratteri, "b" + "a". Provando ad eseguire questa singola operazione il risultato è infatti "ba".

function esempio_1() {
  var result = 'b' + 'a';
  console.log(result); // ba
}

Ma dove sono le "n"? È proprio questo il gioco. Il secondo operatore di concatenazione concatena un altro operatore + con una "a". In questo caso, il secondo + non viene interpretato come concatenatore bensì come un operatore unario (in matematica, un'operazione unaria è un'operazione con un solo operando. Per esempio, la negazione logica è un'operazione unaria, -1, così come l'elevamento al quadrato o il fattoriale, n!):

function esempio_2() {
  var result = 'b' + 'a' + + 'a'; // (+ 'a') --> operazione unaria, come -1, 3^2 o 10!
  console.log(result); // baNaNa
}

Il simbolo + applicato al successivo testo, se non preceduto da una stringa, tenta di trasformarlo in un numero.
Se io applicassi il + ad una stringa con caratteri numerici, ad esempio + "22" otterrei come risultato 22 (non più di tipo stringa ma numero intero). Mentre, se applico il + ad un carattere come appunto la "a" tentando di trasformarlo in numero, ottengo in tutta risposta NaN (Not a Number), tradotto "Non un numero", proprio in virtù del fatto che sto trasformando in formato numerico un valore che non lo è.

function esempio_3() {
  var stringa = "22";
  var intero = +"22";
  var notanumber = +"a";
  console.log(stringa + " è di tipo " + typeof(stringa)); // string
  console.log(intero + " è di tipo " + typeof(intero)); // number
  console.log(notanumber + " è di tipo " + typeof(intero)); // number
}

Per rendere più intuitiva l’espressione, è come se la concatenazione fosse scritta in questo modo, con le parentesi all'operazione unaria:

function esempio_4() {
  var result = 'b' + 'a' + (+ 'a') + 'a';
  console.log(result); // baNaNa
}

Ed ecco dove saltano fuori le "n"...quindi "b"... "a"... "NaN"... "a".

Questo è permesso anche dal fatto che, quando si concatena una stringa con NaN, essendo quest'ultimo a tutti gli effetti un valore di tipo numerico, quando aggiunto alle stringhe, si concatena proprio come farebbe qualsiasi altro numero.

A rendere il tutto più omogeneo c'è infine il metodo toLowerCase() che applicato ad una stringa rende tutti i suoi caratteri minuscoli. Nel caso specifico le N di NaN.

console.log(('b' + 'a' + + 'a' + 'a'); // baNaNa
console.log(('b' + 'a' + + 'a' + 'a').toLowerCase()); // banana

Grazie a questo MEME abbiamo avuto l'occasione di approfondire alcuni tra i più importanti operatori ed il loro comportamento nel JavaScript quando utilizzati all'interno di un contesto di stringhe e numeri.

Spero che questo video ti sia piaciuto, fammelo sapere nei commenti e non peritarti a scrivere se hai altre curiosità sul JavaScript che vorresti approfondire.

Ti invito anche iscriverti al mio canale se ancora non l'hai fatto e ci vediamo al prossimo MEME, ciao ;)