DEV Community

loading...

Learn JavaScript's for...of and for...in - in 2 minutes

Jordi Enric
Hey, I'm a self-taught senior Frontend Engineer + UX Designer. I'm writing about frontend, software, career advice and building things. Follow me on twitter if you like it @jordienr 😁
Originally published at jordienric.com ・1 min read

The for...in loop

We use for...in when we want to use the keys of an Object.

const myObject = {
  keyOne: 'valueOne',
  keyTwo: 'valueTwo',
  keyThree: 'valueThree'
}

for (const propertyKey in myObject) {
    console.log(propertyKey)
}

// Will result in:
> 'keyOne'
> 'keyTwo'
> 'keyThree'
Enter fullscreen mode Exit fullscreen mode

As we can see in the example propertyKey will be the key of the object.

You should know
💡 for...in will ignore any Symbols in your Object

If we want to access the value we can still do it like this

for (const propertyKey in myObject) {
    console.log(myObject[propertyKey])
}
Enter fullscreen mode Exit fullscreen mode

But instead of doing this we could use a for...of loop.

The for...of loop

The for...of loop will iterate over the values of the Iterable Object.

Here's an example with an Array

const myIterableObject = [
  'valueOne', 'valueTwo', 'valueThree'
]

for (const myValue of myIterableObject) {
    console.log(myValue)
}

// Will result in
> 'valueOne'
> 'valueTwo'
> 'valueThree'
Enter fullscreen mode Exit fullscreen mode

This is a good alternative to the forEach method

This was a quick introduction to these two syntaxes of the for loop in Javascript. I recommend you play around with them. These two are really useful to know when you want to write short for loops.

🚀 Follow me on twitter for more

Discussion (1)

Collapse
leoloopy profile image
Leoloopy

Nice article, short and precise