For in, ciclo su oggetti in JavaScript, usare il ciclo for in

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.

Lezione precedente: array di oggetti

Lezione successiva: esempi con il ciclo for in