Javascript for Noobs: The for...of and for...in Loops

Vidit Maniyar — Sat, 22 Apr 2023 08:42:23 +0000

In JavaScript, loops are an essential part of programming, and they help developers to iterate over data structures like arrays and objects. Two common types of loops in JavaScript are the for of and for in loops. Although these two loops look similar, they have different use cases and behave differently.

for...of Loop

The for of loop was introduced in ECMAScript 6, and it is used to iterate over iterable objects like arrays and strings. The loop assigns each value of the iterable to a variable defined in the loop statement.

Here is an example of a for of loop iterating over an array of numbers:

const numbers = [1, 2, 3, 4, 5];

for (const num of numbers) {
  console.log(num);
}

This will output the following:

In the example above, the loop iterates over the numbers array and assigns each value to the num variable. The loop then logs each number to the console.

One important thing to note about the for of loop is that it only works with iterable objects. It cannot be used to iterate over plain JavaScript objects or other non-iterable data types.

for...in Loop

The for in loop is used to iterate over the keys of an object. Unlike the for of loop, it can be used with any JavaScript object, including non-iterable objects.

Here is an example of a for in loop iterating over an object:

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

for (const key in person) {
  console.log(key + ': ' + person[key]);
}

This will output the following:

name: John
age: 30
city: New York

In the example above, the loop iterates over the person object and logs each key and value to the console.

It's important to note that the for in loop doesn't guarantee the order of the keys. If the order of the keys is important, it's recommended to use another method like Object.keys().

Usage and Best Practices

Now that we've looked at the differences between the for of and for in loops, let's summarize their recommended usage and best practices.

Use the for of loop when:

Iterating over arrays and strings.
You need to access the values of the iterable.

Use the for in loop when:

Iterating over the keys of an object.
You need to access the properties of the object.

When using the for in loop, it's important to keep in mind that it can iterate over inherited properties as well. To avoid this, use the hasOwnProperty() method to check if the property belongs to the object itself or is inherited from its prototype chain. Conversely when you are adding a property to an object by using Object.defineProperty() method, you can set the enumerable to be true explicitly to make it enumerable when using for in.

Conclusion

In summary, the for of and for in loops are both important tools in JavaScript, but they have different use cases and behave differently. Understanding the differences between these two loops and when to use them will help you write more efficient and effective code.

Fin.

Let's Connect!

LinkedIn: https://www.linkedin.com/in/viditmaniyar/
Twitter: https://twitter.com/viditmaniyar
Instagram: https://www.instagram.com/viditmaniyar/