Name: For...in Loop vs. For...of Loop
Uploaded: 2019-07-16T08:01:14-05:00
Description: Arrays can be iterated through using both for...in and for...of, but there are differences. This video shows that for...of accesses the values of each element and for...in accesses the indexes of each element.

Copy an Array with the Spread Operator

Nested Destructuring for Objects

Copy an Object with the Spread Operator

Merge Arrays using the Spread Operator

Flatten a Nested Array in JavaScript with Array.prototype.flat

Merge Objects with JavaScript's Spread Operator

For...in Loop vs. For...of Loop

Array.prototype.flatMap from ES2019

Convert an Object to an Array and back again with Object.entries and Object.fromEntries

Safely Access a Property on a JavaScript Object with Optional Chaining

Safely Access a Property on a JavaScript Array with Optional Chaining

ES6 and Beyond

Arrays can be iterated through using both for...in and for...of, but there are differences. This video shows that for...of accesses the values of each element and for...in accesses the indexes of each element.

https://app.egghead.io/api/v1/lessons/javascript-for-in-loop-vs-for-of-loop/subtitles

Instructor: [00:01] define and array with the elements one, two and three. If we use a for of loop on the array and console log each item, we'll see that they're equivalent to each item in the array. If instead we use a for in loop and console log each item, we'll see that it's equivalent to the index of that array element.

[00:31] In a real world use case, we'd likely start with an object, in this case, obj. Remember that Object.entries() turns an object into its multi-dimensional array representation. If we want to access both the key and value of each sub-array, we'd use for of on Object.entries() result. Here we can see that we can console.log the key and the value in one loop.

[01:19] On the other hand, if we decided not to manipulate the object, we could access the key directly using a for in loop, which is similar to the way that array and disease are treated in our simplified example.

For...in Loop vs. For...of Loop

Share this video with your friends

Course

ES6 and Beyond