(For...of) or (For...in)? What's the difference? JS loops

on

If you are a Javascript developer, you know, there are different kinds of loops you can use in JS.

Background Image Credit: Giphy

For example, there are 3 types of for loops -

  1. Basic For Loop
  2. For...of Loop
  3. For...in Loop
Well, we all know the first one clearly. But what's the difference between of and in?

Every for loop iterates through the elements. The difference is how you use them and what they returns


Let's have a brief look inside! 😉

🅰️ For...of

For...of loop returns the element, not the index of the element.

For example, in case of an array:

const fruits = ["Mango", "Berry", "Orange"]

let text = "";
for (let fruit of fruits) {
  text += fruits
}

console.log(text) 
//It is now "MangoBerryOrrange"

This can be pretty useful and handy sometimes. Remember, this loop is a new addition in ES6. It's supported by all modern browsers. But not in IE 🙃


Just like other loops, this can be used with Strings or other array like elements(Map, Set) 💯

const text = 'foo'

for (const char of text) 
  
    console.log(text)

// "f"
// "o"
// "o"

As you can see, this will return the character, not the index.

So, when should you use it?
  • When you just care about the value, not about their position. For example, when testing elements in array
  • When you want to add up or replace specific content in list
  • Not the best way, but you can search contents in a list using this loop
  • Remember, for...of loop is specially useful for Arrays not Objects


🅱️ For...in

Unlike for...of, it returns the key as it iterates through the content(usually Object)


var obj = {a: 1, b: 2, c: 3}

for (const prop in obj) {
  console.log(`${prop} = ${obj[prop]}`)
}

// "a = 1"
// "b = 2"
// "c = 3"

It's supported in all browsers. Basically, it is similar to the Basic for loop. It returns the key.

So, as you can guess, for...in loop is for object properties.

A for...in loop only iterates over enumerable, non-Symbol properties

It's not really recommended to use for...in with Arrays or Strings as for...of loop works really good there. But for...in loop is very important when you store data in Objects.



👉 For example, we need to display posts from data retrieved from database. It's usually in an array.

So, first you run a for...of loop to get each individual element of the list(Array). Then, every post data is obviously  stored in an Object. So, you can run a for...in loop to get all those data and do something.  

🥳 Ta da!

There are other cases when you will need for...in loop. Let's summarize it -

When do you use for...in?

  • To work with data stored in Object 
  • To test and process data based on key
  • To debug your code


Further Stuffs to Read 👋



👆 Read these docs to know more about our friendly JS loops!

Conclusion! 🥱

I hope I was able to provide you with a basic idea about the difference between those 2 loops and their usage.

Remember, this is not a complete explanation or code presentation. It's just to introduce you with the core theme. To learn more, check the links above.




Let me know in comments below if you have any more questions or suggestions 👇









Comments

Post a Comment