Hey fellow developers

Let's learn the differences between the loops For... In and For... Of in Javascript in less than a minute!

If you prefer to watch the video version, it's right here :

1. The For... Of loop.

The For... Of loop is used to iterate through iterable elements, for example arrays, strings, nodelists, etc. It has the following syntax:

const array = [1, 2, 3];

for(const item of array){
    console.log(item);
}
// in the console :
// 1
// 2
// 3

It will basicaly create a new constant for each element.

If you use a string, it'll be exactly the same:

const str = "123";

for(const item of str){
    console.log(item);
}
// in the console :
// "1"
// "2"
// "3"

2. The For... In loop.

The For... In loop is used to iterate through an object.

const tiger = {
    paws: 4,
    weight: 300,
    height 100
}

for(const prop in tiger){
    console.log(prop);
    console.log(tiger[prop]);
}
// in the console :
// "paws" 4
// "weight" 300
// "height" 100

Here you can access the property name with "prop" and/or the property value with tiger[prop].

You now know the differences between these two loops!

Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

See you soon!

Enzo.