JavaScript for…in VS for…of Loop
Looping plays a vital role in accessing the items to retrieve some value based on condition. This result is performing some operation upon a particular string or an object conveniently. Moreover, it is also effective in iterating along the data in bulk thereby saving time. In such cases, “for…in” and “for…of” loops provide great functionalities in smartly accessing data.
This blog will explain the differences between for…in and for…of loop in JavaScript with the help of examples.
JavaScript for…in VS for…of Loop
The “for…in” loop is helpful in case of iterating through the properties of an object. When iterated through a string, it returns the indexes corresponding to the string values rather than the string values.
The “for…of” loop, on the other hand, is not preferred for iterating through object properties. Rather, it loops through the values of an iterable object. However, it is suitable for iterating along the string values as it accesses them easily and returns the contained characters separately as well.
Syntax
}
In the given syntax:
- “variable” refers to the contained characters in a string.
- “string” corresponds to the string value to be iterated upon.
}
In the above syntax:
- “variable” points to the value of the next property which is to be assigned to the variable at each iteration.
- “iterable” indicates the object having iterable properties.
Example 1: Iterating the for…in and for…of Loops Over the String Value
This example will explain the behavior of both the stated loops upon iterating them over the specified string value.
for…in Loop
Let’s follow the below-given example of the “for…in” loop:
let string = "Linuxhint";
for(items in string) {
console.log(items);
}
</script>
In the above code snippet:
- Assign the stated string value named “Linuxhint”.
- After that, apply the “for…in” loop to iterate along the string characters.
- Upon logging, the result will instead point to the indexes at which the string characters are stored.
Output
From the above output, it can be observed that the string indexes are retrieved instead.
for…of Loop
Let’s observe the behavior of the “for…of” loop upon iterating through the specified string value below:
let string = "Linuxhint";
for(items of string) {
console.log(items);
}
</script>
In the above lines of code, perform the following steps:
- Likewise, specify the stated string value.
- In the next step, apply the “for…of” loop to iterate along the initialized string value.
- Finally, the output will result in fetching the characters directly which are contained in a string and displaying them.
Output
In the above output, it is evident that the string values are returned.
Example 2: Iterating for…in and for…of Loop Over the Object
In this particular example, iterate both loops over the created object and observe the resultant output against each of them.
for…in Loop
Let’s observe the behavior of the “for…in” loop by iterating it through an object.
Let’s follow the below-stated example:
let objData = {
Name: "Harry",
Id: 1,
age: 25,
}
for(data in objData) {
console.log(data, objData[data]);
}
</script>
In the above lines of code:
- Create an object named “objData” with the properties named (Harry, Id, and age) and the corresponding values.
- In the next step, apply the “for…in” loop to access the object’s properties as well as the corresponding values.
- The first parameter in the “log()” method corresponds to the object’s property and the other refers to its corresponding value.
- As a result, both the object properties and values will be logged on the console.
Output
In the above output, it can be observed that the object’s properties and the corresponding values are displayed on the console.
for…of Loop
Let’s check out the iteration of the “for…of” loop over the object.
Have a look at the following JavaScript code:
let objData = {
Name: "Harry",
Id: 1,
age: 25,
}
for(data of objData) {
console.log(data, objData[data]);
}
</script>
In the above code snippet, perform the following steps:
- Recall the steps for creating an object in the previous example.
- In the next step, apply the “for…of” loop similarly to iterate along the object properties and the corresponding values.
- This will result in throwing an error which can be seen in the below output.
Output
From the above output, it can be observed that the accessed object is not iterable.
Conclusion
The “for…of” loop can be utilized to loop over the strings and the “for…in” loop can be suitable to loop over objects in JavaScript. The former loop directly accesses the characters contained in a string and returns them. The latter loop can be utilized to loop over objects to access their properties and the corresponding values conveniently. This tutorial explained the differences between for..in and for…of loop.
Source: linuxhint.com