What is the difference between for... in and for... of statements in JavaScript

Published

12 Jan 2023

Summary

Both for...of and for...in statements iterate over lists; the values iterated on are different though, for...in returns a list of keys on the object being iterated, whereas for...of works on an iterable object and returns the result of the iterators implementation.

💡

An object is iterable if it implements the Symbol.iterator property. Some built-in types like Array, Map, and Set already have this implemented.

for...in

for...in sometimes written as for-in returns the index value for the specific loop.

javascript
let numbers = [1,2,3];numbers['four'] = 4;numbers.five = 5;
for (let i in numbers) {  console.log(i);}

JavaScript Code

console
'0''1''2''four''five'

Console Output

If you want to gain access to the value when using for..in on an array, you use the index of the current loop to access from the array object.

javascript
let numbers = [1,2,3];numbers['four'] = 4;numbers.five = 5;
for (let i in numbers) {  console.log(numbers[i]);}

JavaScript Code

console
12345

Console Output

for...of

for...of sometimes written as for-of gives you the value returned by the iterator implementation. This can be different depending upon how the iterater was implemented. For example, the built in iterator implementation for array iterator yields all the values in the array, ignoring non-index properties.

javascript
let numbers = [1,2,3];numbers['four'] = 4;numbers.five = 5;
for (let i of numbers) {  console.log(i);}

JavaScript Code

console
123

Console Output

Using Symbol.iterator, you can create custom iterators that can be used inside of for-of Array spreads and other iterable loops. For example, you could create a new iterator that iterated over an array in reverse.

javascript
let numbers = [1,2,3];numbers['four'] = 4;numbers.five = 5;
const createCustomIterator = (inputArray) => ({    [Symbol.iterator]() {        let i = inputArray.length;              return {            next: () => ({                value: inputArray[--i],                done: i < 0            })        }    }})
for (let i of createCustomIterator(numbers)) {  console.log(i);}

JavaScript Code

console
321

Console Output

In this example, createCustomIterator is a function that takes an array and returns an implementation iterator. It could be used on multiple arrays to reverse iterate over them.

Share this article:
XXLinkedInFacebookFacebookWhatsAppWhatsAppBlueskyBlueskyRedditRedditEmail

Similar articles