for...of e for...in in JavaScript: array e oggetti

Due cicli, due compiti diversi

JavaScript ha due forme di ciclo che sembrano quasi identiche ma fanno cose molto diverse. for...of scorre i valori di un iterabile. for...in scorre le chiavi di un oggetto. Una lettera di differenza, un comportamento completamente diverso.

Ecco tutta la storia in un solo esempio:

const fruits = ["apple", "banana", "cherry"];

for (const fruit of fruits) {
    console.log(fruit);
}

for (const key in fruits) {
    console.log(key);
}

Il primo ciclo stampa apple, banana, cherry: i valori. Il secondo stampa 0, 1, 2: le chiavi, e per di più come stringhe. Se sbagli ciclo, passerai dieci minuti a chiederti perché il tuo array è pieno di numeri.

for...of: valori da qualsiasi iterabile

for...of è il ciclo che userai più spesso. Funziona con tutto ciò che JavaScript considera iterabile: array, stringhe, Map, Set, NodeList, generatori e altro ancora.

const scores = [92, 87, 73, 100];
let total = 0;

for (const score of scores) {
    total += score;
}

console.log("media:", total / scores.length);

Niente acrobazie con gli indici, niente scores[i]. Chiedi ogni valore e ricevi ogni valore. Anche le stringhe sono iterabili, quindi for...of le scorre carattere per carattere:

for (const char of "hi!") {
    console.log(char);
}

Funziona correttamente anche con la maggior parte dei code point Unicode, un vantaggio piccolo ma reale rispetto all'accesso ai caratteri di una stringa tramite indice numerico.

Ottenere l'indice con for...of

L'unica cosa che for...of non ti dà direttamente è la posizione. Quando ti serve, abbina il ciclo a entries():

const names = ["Rosa", "Boris", "Ada"];

for (const [index, name] of names.entries()) {
    console.log(`${index}: ${name}`);
}

names.entries() produce coppie [indice, valore], e il destructuring a sinistra le separa in due variabili. Di solito è più pulito che tornare al classico for (let i = 0; ...) solo perché ti serve i.

for...in: le chiavi di un oggetto

for...in è pensato per gli oggetti semplici. Itera sulle chiavi enumerabili di tipo stringa:

const user = {
    name: "Rosa",
    age: 30,
    city: "Lisbon",
};

for (const key in user) {
    console.log(key, "->", user[key]);
}

Nota che ottieni la chiave, non il valore. Per leggere il valore, accedi di nuovo all'oggetto con user[key]. Ogni chiave è una stringa, anche quando sembra un numero.

for...in risale anche la catena dei prototipi, quindi può far emergere proprietà ereditate. Con i tuoi oggetti letterali raramente è un problema, ma quando iteri istanze di una classe o oggetti che arrivano da una libreria conviene essere prudenti:

const user = { name: "Rosa", age: 30 };

for (const key in user) {
    if (Object.hasOwn(user, key)) {
        console.log(key, user[key]);
    }
}

Object.hasOwn(user, key) salta tutto ciò che è ereditato. Nel codice moderno, la maggior parte delle persone evita del tutto for...in e usa Object.keys, Object.values o Object.entries, che è proprio l'argomento della prossima sezione.

Il modo moderno di scorrere un oggetto

Invece di for...in, combina for...of con uno degli helper Object.*. Scegli quello dei tre che corrisponde a ciò che ti serve:

const user = { name: "Rosa", age: 30, city: "Lisbon" };

for (const key of Object.keys(user)) {
    console.log("chiave:", key);
}

for (const value of Object.values(user)) {
    console.log("valore:", value);
}

for (const [key, value] of Object.entries(user)) {
    console.log(`${key} = ${value}`);
}

Object.entries è particolarmente comodo: destrutturare la coppia [key, value] si legge quasi come una frase. E siccome questi metodi restituiscono solo le proprietà proprie ed enumerabili dell'oggetto, non devi preoccuparti della spazzatura ereditata.

Non usare for...in sugli array

Tecnicamente è consentito, ma fa inciampare molte persone:

const nums = [10, 20, 30];
nums.tag = "scores";

for (const key in nums) {
    console.log(key);
}

Ottieni 0, 1, 2 e tag. Qualsiasi proprietà che qualcuno abbia aggiunto all'array, o a Array.prototype tramite un polyfill, compare anche lei. Le chiavi sono stringhe, quindi key + 1 concatena invece di sommare. E l'ordine di iterazione non è garantito uguale a quello dell'array in tutti i casi limite.

Regola pratica:

• Valori dell'array? for...of arr.
• Indice e valore dell'array? for...of arr.entries().
• Solo l'indice, per contare? Il classico for (let i = 0; i < arr.length; i++).
• Chiavi o voci di un oggetto? Object.keys(obj) / Object.entries(obj) con for...of.

In sostanza: for...in è uno strumento di nicchia. for...of più gli helper di Object copre tutto ciò che ti serve.

break e continue funzionano in entrambi

Entrambi i cicli supportano i soliti strumenti di uscita anticipata:

const numbers = [1, 2, 3, 4, 5, 6];

for (const n of numbers) {
    if (n % 2 === 0) continue;
    if (n > 4) break;
    console.log(n);
}

continue passa all'iterazione successiva; break esce del tutto dal ciclo. È il motivo principale per preferire for...of a .forEach(): le callback di forEach non possono uscire dal ciclo con break, mentre for...of sì.

Riepilogo a confronto

const arr = ["a", "b", "c"];
const obj = { x: 1, y: 2, z: 3 };

// Values of an array:
for (const v of arr) console.log(v);         // a, b, c

// Index and value of an array:
for (const [i, v] of arr.entries()) console.log(i, v);

// Keys of an object:
for (const k of Object.keys(obj)) console.log(k);

// Key and value of an object:
for (const [k, v] of Object.entries(obj)) console.log(k, v);

Quattro cicli, quattro compiti, un solo modello mentale: se vuoi i valori di qualcosa di iterabile, usa for...of. Se vuoi lavorare con le proprietà di un oggetto, passa da Object.keys / Object.values / Object.entries, sempre con for...of. Lascia for...in per il raro caso in cui vuoi davvero ogni chiave stringa enumerabile di un oggetto, ereditata o no.

Prossimo passo: valori truthy e falsy

Ogni ciclo e ogni if in JavaScript finisce per porsi la stessa domanda: questo valore è considerato vero? La risposta non è sempre ovvia: stringhe vuote, zero, null e undefined si comportano in modo diverso da come potresti aspettarti. I valori truthy e falsy sono il prossimo argomento.