| Interactive Media Design

for...in

The for...in statementopen in new window iterates over the properties of an object.

The expression of the for...in loop starts with an initialization of the variable used to hold the key of each property. This is followed by the keyword in and ends with the object.

To retrieve each property's value, bracket notation MUST be used with the object's variable and the current key. If dot notation is used, it will likely return undefined.

for (const key in object) {
  console.log(object[key]) // retrieve the value  
  console.log(object.key)  // undefined
}

const sounds = {
  cow: 'moo',
  duck: 'quack',
  horse: 'nay'
}

for (const animal in sounds) {
  // Logs each animals' sound
  console.log(sounds[animal])
}

NOTE

While it is possible to use the for...in statement with arrays, it is not recommended. It is better to use the for...of statement with arrays.

This YouTube video was created by Steve Griffith.