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/Learntocreate/videos
See you soon!
Enzo.