Javascript for Noobs: The for...of and for...in Loops
A quick guide explaining the difference and best practices
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:
1
2
3
4
5
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!
Twitter: https://twitter.com/viditmaniyar
Instagram: https://www.instagram.com/viditmaniyar/
Further Reading
If you'd like to understand these topics in more depth, check out the following resources: