Back

Technologies:

javascriptjavascript
avatar
Tolerim
a month ago

What is the difference between for...of and for...in loops, and why can they be substituted for each other in certain cases?

As a senior JavaScript developer, I am inquisitive to understand the differences between for...in and for...of loops in JavaScript. Recently, I faced an issue while working on a coding exercise that required me to list all odd and even numbers of an array consisting of integers from 1-10 inclusive, which led me to switch up the two loops. When I implemented a for...in loop, I was able to list all odd numbers. However, when I tried to list all even numbers using the same loop, the code didn’t work correctly, as it displayed only some even numbers.

After that, I realized my mistake and switched to a for...of loop, which helped me to iterate through each element of the array. While I was able to find a solution, I am curious to understand how it works under the hood. Below is the function where I made the initial mistake.

let numbers = [1,2,3,4,5,6,7,8,9,10]
function displayOddNumbers() {
    for (num in numbers) {
        num % 2 != 0 ? console.log(num) : console.log();
    };
};
The code worked correctly, but I used a for...in loop instead of a for...of loop. For the next exercise, I was supposed to display all even numbers from the same array. I used the same for...in loop, which displayed some even numbers instead of all of them. The code I used is shown below.

function displayEvenNumbers() {
    for (num in numbers) {
        num % 2 == 0 ? console.log(num) : console.log();
    };
};
In this case, I needed to list all even numbers from the same array, but this code only displayed some even numbers. When I analyzed it, I realized that the for...in loop didn't work correctly because it iterates over keys instead of values. That’s why I changed my code to:

function displayEvenNumbers() {
    for (num in numbers) {
        num % 2 != 0 ? console.log(numbers[num]) : console.log();
    };
};
After switching to a for...of loop or using the correct index, I was able to display all even numbers effectively.

Answers(2)
avatar
Vogi
a month ago
Verified Answer
The main difference between for...in and for...of loops in JavaScript is that for...in loops through the properties of an object while for...of loops over the values of an iterable object such as arrays, strings, and NodeLists. In your case, you used a for...in loop to iterate through an array of integers from 1-10 inclusive. However, this loop iterates over keys instead of values. That's why it didn't work correctly when you tried to list all even numbers from the same array. On the other hand, a for...of loop helps you iterate through each element of an array. This loop is used to loop over strings and arrays. When you switched to a for...of loop or used the correct index, you were able to display all even numbers effectively. I hope this helps! Let me know if you have any other questions.

Sources

javascript - What is the difference between ( for... in ) and ( for ...for...of - JavaScript | MDN - Mozilla Developerdifference between for loop and for-in loop in javascriptDifference between for...of and for...in loop in JavaScript.Explain the differences between for(..in) and for(..of) statement in ...
avatar
Tolerim
a month ago
The difference between for...in and for...of loops in JavaScript is that for...in loops iterate over the properties of an object, while for...of loops iterate over the values of an iterable object such as an array. In the first example, using a for...in loop to iterate over the array worked because the loop variable "num" was used as an index to access the elements of the array, but this is not recommended since "num" is actually a string representing the name of the property. In this case, it happened to work because the indices of the array were string representations of their integer values. However, the console output would have been the array indices (0-9) instead of the actual values. In the second example, using the same for...in loop to iterate over the array did not work because the loop variable was again used as an index, but this time the values of the array were not accessed correctly. This is because the index values in the loop are strings, and using the modulus operator with a string will return NaN. To fix this issue, we can use the for...of loop, which iterates over the values of the array directly, avoiding the need to access elements by index. Alternatively, we can use the parseInt() function to convert the loop variable to an integer before using the modulus operator.
;