Metodi di Array in JavaScript – Come Usare every() e some() in JS

Articolo originale: JavaScript Array Methods – How to Use every() and some() in JS

In JavaScript, every e some ti aiutano a verificare rispettivamente se una condizione sia vera per ogni elemento o per alcuni elementi di un array.

In questo articolo, ti mostrerò come usare questi utili metodi di array.

Sommario

1. Una panoramica su come funzionano every() e some()
2. Parametri di every e some
   • 2.1 predicato
   • 2.2 thisArg opzionale
3. Casi limite per every e some
   • 3.1 Cosa succede quando every e some sono chiamati su un array vuoto?
   • 3.2 Gli elementi non esistenti sono ignorati
   • 3.3 Mutare l'array nel predicato
4. Una sfida per te

1. Una panoramica su come funzionano every() e some()

Per prima cosa ci servono dei dati di prova. Per semplicità consideriamo un array di numeri:

const nums = [34, 2, 48, 91, 12, 32];

Ora diciamo che vogliamo verificare se ogni numero dell'array è inferiore a 100. Possiamo verificarlo facilmente usando every come segue:

nums.every(n => n < 100);
// true

Breve ed efficace! Puoi pensare a ciò che accade qui in questo modo:

• every esegue un ciclo sugli elementi dell'array, da sinistra a destra.
• Per ogni iterazione, chiama la funzione passata con l'elemento corrente dell'array come suo primo argomento.
• Il ciclo continua fino a quando la funzione ritorna un valore falsy. In quel caso every restituisce false – altrimenti restituisce true.

some funziona in modo molto simile a every:

• some esegue un ciclo sugli elementi di un array da sinistra a destra.
• Per ogni iterazione, chiama la funzione passata con l'elemento corrente dell'array come primo argomento.
• Il ciclo continua finché la funzione non restituisce un valore truthy. In quel caso some restituisce true – altrimenti restituisce false.

Ora usiamo some per verificare se alcuni numeri nell'array sono dispari:

nums.some(n => n % 2 == 1);
// true

È vero! 91 è dispari.

Non è tutto qui. Questi metodi hanno altro da offrire. Vediamo.

2. Parametri di every e some

Il modo in cui usare i metodi di array every e some è esattamente lo stesso. Hanno lo stesso insieme di parametri, i quali hanno lo stesso significato. Quindi è molto facile apprenderli assieme.

Abbiamo già lavorato con il primo parametro di questi metodi, che è una funzione. Chiamiamo questa funzione predicato.

In informatica, un predicato è una funzione con un insieme di parametri che restituisce una risposta booleana. JavaScript tratta la funzione che passiamo a every/ some come un predicato. Possiamo restituire qualsiasi tipo di valore che desideriamo, ma questi sono trattati come un booleano, quindi è comune definire questa funzione un predicato.

Hanno anche un secondo parametro opzionale per controllare this all'interno di predicati non in funzioni freccia. Lo chiamiamo thisArg.

Quindi puoi chiamare questi metodi nei modi seguenti:

arr.every(predicato)
arr.every(predicato, thisArg)

arr.some(predicato)
arr.some(predicato, thisArg)

Vediamo predicato e thisArg opzionale in dettaglio qui sotto.

2.1 Predicato

Tramite il predicato, every e some non solo ci forniscono accesso all'elemento corrente dell'array, ma anche alla sua posizione e all'array originale attraverso questi parametri:

• 1° parametro: l'elemento corrente dell'array.
• 2° parametro: l'indice dell'elemento corrente.
• 3° parametro: l'array stesso sul quale sono chiamati every/some.

Abbiamo visto solo il primo parametro in azione negli esempi precedenti. Ora catturiamo l'indice e l'array definendo due ulteriori parametri. Questa volta diciamo che abbiamo dei dati relativi a delle T-Shirt e vogliamo verificare se tutte hanno il logo freeCodeCamp :

let tshirts = [
  { size: "S", color: "black", logo: "freeCodeCamp" },
  { size: "S", color: "white", logo: "freeCodeCamp" },
  { size: "S", color: "teal",  logo: "freeCodeCamp" },
  { size: "M", color: "black", logo: "freeCodeCamp" },
  { size: "M", color: "white", logo: "freeCodeCamp" },
  { size: "M", color: "teal",  logo: "freeCodeCamp" },
  { size: "L", color: "black", logo: "freeCodeCamp" },
  { size: "L", color: "white", logo: "freeCodeCamp" },
  { size: "L", color: "teal",  logo: "freeCodeCamp" },
];

tshirts.every((item, i, arr) => {
  console.log(i);
  console.log(arr);
  return item.logo == "freeCodeCamp";
})

Esegui questo codice nella tua console per vedere il risultato. E non dimenticare di sperimentare anche con some.

2.2 thisArg opzionale

Nel caso tu debba avere un valore particolare di this all'interno del tuo predicato, puoi impostarlo con thisArg. Nota che si può fare solo con predicati non freccia in quanto le funzioni freccia non hanno associazione con this.

Se ometti questo argomento, this all'interno del predicato (per funzioni non freccia) funziona come al solito, vale a dire:

• Nella modalità strict this è undefined.
• Nella modalità non strict this è l'oggetto globale, che è window nel browser e global in Node.

Non riesco a immaginare un qualsiasi buon caso d'uso di thisArg. Tuttavia penso che sia un bene che esista in quanto consente di avere il controllo su this all'interno del predicato. Quindi se un giorno ci fosse la necessità, sai che esiste un modo.

Se hai qualche buona idea per utilizzare thisArg, per favore fammelo sapere su  Twitter :)

3. Casi limite per every e some

3.1 Cosa succede quando every e some sono chiamati su un array vuoto?

Talvolta l'array che vuoi verificare potrebbe essere vuoto. Per esempio hai ottenuto da una chiamata API un array che potrebbe avere, a seconda delle volte, un numero arbitrario di elementi o esserne privo.

Nel caso di every un valore ritornato true può significare due cose:

• Se l'array ha almeno un elemento allora tutti gli elementi dell'array soddisfano il predicato.
• L'array non ha elementi.

In questo modo, se vogliamo, possiamo fare follie all'interno del predicato come segue:

const ilContoCorrenteDelMioGatto = [];
ilContoCorrenteDelMioGatto.every(conto => conto.saldo > elonMusk.patrimonioTotale)

ottenendo ancora true come valore di ritorno!

Se l'array è vuoto, JavaScript ritorna direttamente true senza nessuna chiamata al predicato.

Questo perché, secondo logica, puoi dire qualsiasi cosa sugli elementi di un array vuoto e questa sarà considerata come vera o, più precisamente, una verità vacua. Tale logica potrebbe sembrare senza senso nell'uso di tutti i giorni ma è così che funziona. Leggi la pagina wiki (in lingua inglese) linkata qui sopra per saperne di più.

Quindi se ottieni true come valore di ritorno di every dovresti essere consapevole che l'array potrebbe essere vuoto.

some, d'altro canto, ritorna direttamente false su array vuoti senza chiamate al predicato e senza stranezze.

3.2 Gli elementi non esistenti sono ignorati

Se il tuo array ha dei vuoti come quello qui sotto, saranno ignorati da every/some:

const myUntiddyArry = [1,,,3,,42];

3.3 Mutare l'array nel predicato

Non tratterò questo caso qui, in quanto modificare l'array originale nella maggior parte dei casi complica le cose e apre la strada a dei bug.

Se davvero devi o sei interessato, per favore leggi la nota nelle specifiche per ulteriori dettagli.

4. Una sfida per te

Esprimi every con some e some con every in JavaScript.

Spero che sentirai anche l'immensa gioia e la meraviglia che ho avuto quando ho scoperto questa relazione!

const myEvery = (arr, predicato) => !arr.some(e => !predicato(e));

const mySome = (arr, predicato) => !arr.every(e => !predicato(e));

Grazie per la lettura! Spero che questo articolo sia stato utile. Puoi dare un'occhiata ai miei articoli qui. Seguimi su Twitter.