For in JavaScript

Il ciclo for in è utilizzato per elencare tutte le proprietà di un determinato oggetto in JavaScript.

Può essere utilizzato sugli oggetti ma anche sugli array. Utilizzando questo ciclo non serve precisare la lunghezza dell’array come abbiamo fatto utilizzando invece il ciclo for.

Attenzione: non utilizzare il ciclo for in sugli array quando l’ordine dell’indice è importante, in tal caso occorre infatti preferire il semplice ciclo for. Dunque, possiamo dire che il ciclo for in è più utilizzato con gli oggetti in JavaScript.

La sintassi è la seguente:

for (var in object)
  istruzioni

Dove in è una parola chiave che serve a testare se la variabile specificata è presente nell’oggetto. Quindi l’espressione (var in object) restituisce un valore booleano. Finché questo valore sarà vero il ciclo sarà eseguito.

Facciamo alcuni esempi per comprenderne meglio il funzionamento:

Esempio 1 – ciclo for in

In questo primo esempio costruiamo un semplice oggetto utente con 3 proprietà.


utente = {
  nome: 'Coding',
  cognome: 'Creativo',
  telefono: '333'
}

for (var k in utente){
  console.log(k);
}

Nel nostro esempio k assumerà il valore di tutte le proprietà presenti nel nostro oggetto. Dunque nel console.log si visualizzerà: nome, cognome e telefono.

Al posto di k possiamo indicare qualsiasi nome di variabile. Il nome è puramente indicativo. Attenzione anche al fatto che va utilizzato var.

Il ciclo for viene eseguito dunque finché non trova proprietà all’interno dell’oggetto.

Se vogliamo visualizzare anche i valori delle proprietà, allora occorre indicare ciascun elemento.

In questo caso utilizziamo la notazione con le parentesi quadre, questo perché se scrivessi utente.k, k non è riconosciuta come proprietà dell’oggetto utente, quindi darebbe errore. Dunque l’unico modo per poter accedere al valore della chiave in un oggetto è la notazione con le parentesi quadre.


utente = {
  nome: 'Coding',
  cognome: 'Creativo',
  telefono: '333'
}

for (var k in utente){
  console.log(k + 'valore ' + utente[k]);
}

Nella console in questo modo visualizzerò: nome valore Coding, cognome valore Creativo e telefono valore 333.

Nel caso in cui ci troviamo ad utilizzare degli oggetti annidati, possiamo annidare il ciclo for all’interno di un altro, come da esempio sotto:


utente = {
  nome: 'Coding',
  cognome: 'Creativo',
  telefono: '333',
  indirizzo: {
    via: 'dei tulipani',
    citta: 'Modica'
  }
}

for (var k in utente){
  if (k == 'indirizzo'){
    for (var j in utente.indirizzo){
      console.log(j + ': ' + utente.indirizzo[j]);
    }
  } else {
      console.log(k + ': ' + utente[k]);
  }
}

Dunque per visualizzare gli elementi all’interno della proprietà indirizzo, che rappresenta un oggetto, utilizzo un altro ciclo for.

Notiamo che possiamo scrivere anche in questo modo:


for (var k in utente){
  if (k == 'indirizzo'){
    for (var j in utente[k]){
      console.log(j + ': ' + utente[k][j]);
    }
  } else {
      console.log(k + ': ' + utente[k]);
  }
}

In questa lezione abbiamo introdotto questo nuovo ciclo iterativo, nelle prossime lezioni proporrò altri esempi.

Alcuni link utili

Indice tutorial JavaScript

Le funzioni di callback

Esempi funzioni di callback

Come utilizzare le callback e setTimeout

Cifrario di Cesare online

Come realizzare un convertitore da decimale a binario, ottale ed esadecimale

Come creare PDF con JavaScript

PDF da un form con JavaScript

Proprietà di un PDF con JavaScript

Libreria jsPDF

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *