What is difference between forin and for of in javascript?

For...in loop

The for...in loop improves upon the weaknesses of the for loop by eliminating the counting logic and exit condition.

Example:

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const index in digits) {
  console.log(digits[index]);
}

But, you still have to deal with the issue of using an index to access the values of the array, and that stinks; it almost makes it more confusing than before.

Also, the for...in loop can get you into big trouble when you need to add an extra method to an array (or another object). Because for...in loops loop over all enumerable properties, this means if you add any additional properties to the array's prototype, then those properties will also appear in the loop.

Array.prototype.decimalfy = function() {
  for (let i = 0; i < this.length; i++) {
    this[i] = this[i].toFixed(2);
  }
};

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const index in digits) {
  console.log(digits[index]);
}

Prints:

0

1

2

3

4

5

6

7

8

9

function() { for (let i = 0; i < this.length; i++) { this[i] = this[i].toFixed(2); } }

This is why for...in loops are discouraged when looping over arrays.

NOTE: The forEach loop is another type of for loop in JavaScript. However, forEach() is actually an array method, so it can only be used exclusively with arrays. There is also no way to stop or break a forEach loop. If you need that type of behavior in your loop, you’ll have to use a basic for loop.

For...of loop

The for...of loop is used to loop over any type of data that is iterable.

Example:

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const digit of digits) {
  console.log(digit);
}

Prints:

0

1

2

3

4

5

6

7

8

9

This makes the for...of loop the most concise version of all the for loops.

But wait, there’s more! The for...of loop also has some additional benefits that fix the weaknesses of the for and for...in loops.

You can stop or break a for...of loop at anytime.

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const digit of digits) {
  if (digit % 2 === 0) {
    continue;
  }
  console.log(digit);
}

Prints:

1

3

5

7

9

And you don’t have to worry about adding new properties to objects. The for...of loop will only loop over the values in the object.

There are two ways of many using which you can loop over the iterables in JavaScript.

• A for...in statement
• A for...of statement

While both of the statements can loop over the iterables such as enumerable properties, there are key differences in both which I’ll discuss here.

• The #1 Difference
• The #2 Difference
• In closing

The #1 Difference

First, the for...in can loop through both Arrays and Objects while the for...of can only loop through Arrays, Map, Set, arguments object.

For instance, let’s say we have the following object.

const car = {
  brakes: '2',
  tires: '4'
}

Now, if we can loop over this object using for...in like so.

for (let i in car) {
   console.log(car[i]); // "2", "4"
}

As you can observe, the for...in statement can successfully iterate over the object. But this won’t be possible using for...of statement.

Upon iterating using the same object using for...of statement will result in a TypeError error like so.

for (let i of car) {
   console.log(i); // TypeError: car is not iterable
}

The #2 Difference

The second and the biggest difference between both of these statements are, by default, the for...in iterates over property names and the for...of iterates over property values.

For instance, let’s say we have the following array.

const rgb = ['red', 'green', 'blue']

Let’s first iterate it using for...in.

for (let key in rgb) {
   console.log(key); // logs "0", "1", "2"
}

As you may observe, the for...in is iterating over the keys of the array and hence the output is "0", "1", "2".

On the other hand, let’s iterate the same array using for...of.

for (let value of rgb) {
   console.log(value); // logs "red", "green", "blue"
}

As you can see, the for...of can only iterate over array values, and hence the output would be "red", "green", "blue".

In closing

So, by looking at the differences both of these for statements, it would be safe to tell that the for...in can be used in most of the cases as you’d be using it with both Objects and Arrays and also you can get values of the properties using their keys. However, when you’re only working with Arrays and only cares about property values, you’d be better off with the for...of.

If you’re a visual learner, there’s a video form as well which you can checkout below.

Beep! Beep! I'm also running a YouTube channel which I hope you're going to love!

What is difference between Forin and for of loop?

What is the difference between forEach and for OF in JavaScript?

What is for of and for in?

What is Forin in JavaScript?