Spieghiamo il MEME JavaScript array.sort()

In questo MEME sul JavaScript riferito al metodo sort per l’ordinamento dei valori di un array, l'espressione di Leonardo Di Caprio, nel film "Django Unchained", si fa beffa del risultato ottenuto:

In effetti, provando in console ad ordinare i numeri di questo array come indicato, l'esito non è quello atteso, ovvero il seguente [1, 4, 21, 30, 100000], bensì proprio quello mostrato nel MEME:

var myarray = [4, 100000, 1,30, 21];
myarray.sort();

// [1, 100000, 21, 30, 4]

Questo succede perché il metodo sort() ordina i valori di un array in ordine alfabetico, li tratta come se fossero stringhe e non numeri. Per questo motivo il primo carattere è quello che ne definisce la sequenza: prima i numeri che iniziano con l'1, poi quelli con il 2, con il 3 e così via…

Tuttavia questo è l’utilizzo base del metodo sort() applicato ad un array. Questo metodo infatti accetta un parametro, facoltativo, sotto forma di un riferimento a una funzione che consente di ordinare un array in base a criteri personalizzati, ad esempio in modo random oppure, come nel caso di nostro interesse, in base ai valori effettivamente numerici.

Per ottenere il risultato desiderato il codice da utilizzare è il seguente:

myarray.sort(function(a, b) {
    return a - b;
});

Quando una tale funzione viene passata a array.sort(), gli elementi dell'array vengono ordinati in base alla relazione tra ciascuna coppia di elementi "a" e "b" e il valore restituito dalla funzione. In pratica ogni volta che "a" è minore di "b", viene restituito un valore negativo, quindi gli elementi più piccoli appariranno sempre a sinistra di quelli più grandi, appunto, in ordine crescente.

Eseguendo il codice, ecco il risultato atteso: [1, 4, 21, 30, 100000]

Per ordinare i valori in modo decrescente è sufficiente invertire i due operandi "a" e "b":

myarray.sort(function(a, b) {
    return b - a;
});

Ecco il risultato: [100000, 30, 21, 4, 1]

Grazie a questo MEME abbiamo avuto l'occasione di approfondire il metodo sort() e soprattutto di mostrare come dietro ad un'apparente comportamento anomalo del JavaScript c'è una spiegazione plausibile che, conoscendola, ci eviterà dei grossi grattacapi :)

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