<VR>

  • Home
  • Talks
  • Podcast
  • Blog

for...in vs for...of in Javascript

Published on May 13, 2022

🚀1 min to read

  • javascript
  • typescript
  • code

They both iterate but over lists but behave slightly differently.

for...in iterates over the keys of the list - think keys in an object or indices in an array. Think of it like looping over what’s returned for Object.keys

for...of iterates over the values of the list - think values stored in the array or values in the object. Think of it like looping over what’s returned with Object.values

Example with String

const a = 'hello world'; for (let i in a) { console.log(i); } // 0 // 1 // 2 // 3 // 4 // 5 // 6 // 7 // 8 // 9 // 10 for (let i of a) { console.log(i); } // h // e // l // l // o // w // o // r // l // d

Example with Set

You can run for...in on a data set with no keys. As long as it is iterable, if the data set does not have any keys, it will return undefined.

a = new Set([1, 2, 3]); for (let key in a) { console.log(key); } // undefined for (let values of a) { console.log(values); } // 1 // 2 // 3

Example with Map

With a map, all the values are stored as entries similar to each entry you might get with Object.entries

const a = new Map(); a.set('a', 1); a.set('b', 2); a.set('c', 3); for (let key in a) { console.log(key); } // undefined for (let values of a) { console.log(values); } ['a', 1][('b', 2)][('c', 3)];

ES5

In ES5, it was illegal to run for...of on anything but an array. This has since been changed to allow running for...of on any value that implements Symbol.iterator.

Symbol Iterator

Some native values come with a built in implementation of the @@iterator method. You can also build your own iterable value by manually implementing your own iterable using generators.

var myIterable = {}; myIterable[Symbol.iterator] = function* () { yield 1; yield 2; yield 3; }; for (let val of myIterable) { console.log(val); } // 1 // 2 // 3

When a variable is iterable, it allows you to spread it using the spread operator

[...myIterable]; // [1, 2, 3]

Reference

Built with passion...

React

Used mainly for the JSX templating, client-side libraries and job secruity.

Gatsby

To enable static site generation and optimize page load performance.

GraphQL

For data-fetching from multiple sources.

Contentful

CMS to store all data that is powering this website except for blogs, which are markdown files.

Netlify

For static site hosting, handling form submissions and having CI/CD integrated with Github.

Images

From unsplash when they are not my own.

..and other fun technologies. All code is hosted on Github as a private repository. Development is done on VS-Code. If you are interested, take a look at my preferred dev machine setup. Fueled by coffee and lo-fi beats. Current active version is v2.7.1.

</VR>