RAJ
RAJ's Blog

RAJ's Blog

Do you know the difference between for...in and for...of loops in JavaScript?

Do you know the difference between for...in and for...of loops in JavaScript?

RAJ

Published on Jul 9, 2021

2 min read

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Table of content:-

  • for...in
  • for...of
  • Comparison

for...in:

for...in iterates over through properties of an Object.

//Syntax:  
for (variable in object) {
     statement;
}

Example I: Object

if you use for...in loop in Object it returns the Keys

const object = {
    loop: "for",
    ds: "Array",
    dataType: "int"
};
for(const i in object) {
    console.log(i);
}
//output
loop
ds
dataType

Example II: Array

if you used for...in loop in Array it returns the index number

const list = ["for", 3, "while", 2];
for(const i in list) {
    console.log(i);
}
//output
0
1
2
3

Example III: String

in the string for...in loop returns the index number

const str1 = "Hello folks";

for(const i in str1) {
    console.log(i);
}
//output
0
1
2
3
4
5
6
7
8
9
10

for...of:

for...of iterates through the values of an iterable object such as Array, String, array-like objects (e.g., arguments or NodeList ), TypedArray , Map , Set , and user-defined iterables.

//Syntax:
 for (variable of iterable) {
    statement;
}

Example I: Object

We can't use for...of loop in Object. because Object is not iterable

for..of used in object.png

Example II: Array

If we use for...of loop in Array, It returns the value of the Array. because Array is iterable

const list = ["for", 3, "while", 2];
for(const i of list) {
    console.log(i);
}
//output
for
3
while
2

Example III: String

If we use for...of loop in String, It returns the letter from that String. because String is iterable

const str = "Hello folks";
for(const i of list) {
    console.log(i);
}
//output
H
e
l
l
o

f
o
l
k
s

Comparison

for..in vs for...of.png

If you enjoyed learning and find it useful please do like and share so that, it reaches others as well 🤝

Thanks for reading 😃

I would ❤ to connect with you at Twitter | LinkedIn | GitHub | Telegram .
Let me know in the comment section if you have any doubts or feedback.
See you in my next Blog article, Take care!!
Happy Learning😃😃

 
Share this