Understanding for-in and for-of loop of JavaScript

JavaScript | Sun Apr 17 2022 | 2 min read

Overview

for-in loop iterates over enumerable property key of an object, array, string etc.
for-of iterates over the values of an iterable object, eg: arrays, strings etc.

iteration using for-in and for-of loop

let c = [];
c[2] = 10;
c[5] = 20;

for(let p in c) {
    console.log(p);
}

//output:
2
5

for(const p of c) {
    console.log(p);
}

//output:
undefined
undefined
10
undefined
undefined
20

This is a caveat with for-in loop, it doesn't iterates items that not defined yet.

hasOwnProperty and for-in loop

for-in loop iterates through every property on the prototype chain, either direct instance or inherited property.

function Student() {
    this.name = 'name-val';
}

//Prototypal property
Student.prototype = {age: 'age-val'};

var studentObject = new Student();
studentObject.grade = 'grade-val';

function forEach(studentObject) {
    var key;
    for (key in studentObject) {
        if (studentObject.hasOwnProperty(key)) 
            console.log('has own property of Student Object', key, studentObject[key]);
        else 
            console.log('not own property of Student Object', key, studentObject[key]);
    }
}
forEach(studentObject);

//Output
has own property of Student Object name name-val
has own property of Student Object grade grade-val
not own property of Student Object age age-val

Mutable variable with for-of

const arr = ['Apple', 'Banana']
for(const item of arr){
    console.log(item);
}

const can be used with iterable variable, the iteration variable can still be different for each iteration.

for loops must be declared via let or var

Destructuring with for-of

const arr = ['a', 'b', 'c', 'd'];
for (const [index, item] of arr.entries()){
    console.log(`${index} -- ${elem}`);
}

//Output
0 -- apple
1 -- banana
2 -- grapes
3 -- mango

Recommendation is not to use for-in loop