Javascript for Noobs: The for...of and for...in Loops
Tags: javascript, beginners, es6
Published: 2023-04-22 08:42:23

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:

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

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

This will output the following:

```javascript
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:

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

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

This will output the following:

```javascript
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/](https://www.linkedin.com/in/viditmaniyar/)
    
* Twitter: [https://twitter.com/viditmaniyar](https://twitter.com/viditmaniyar)
    
* Instagram: [https://www.instagram.com/viditmaniyar/](https://www.instagram.com/viditmaniyar/)
    

---

### Further Reading

If you'd like to understand these topics in more depth, check out the following resources:

* [Exploring ES6 eBook by Dr. Axel Rauschmayer](https://exploringjs.com/es6/ch_for-of.html)
    
* [Javascript for...in Loop on javascripttutorial.net](https://www.javascripttutorial.net/javascript-for-in/)
    
* [Javascript for...of Loop on javascripttutorial.net](https://www.javascripttutorial.net/es6/javascript-for-of/)