16.4: for...of loop - Topics of JavaScript/ES6

In this video, I explore the new JavaScript ES6 loop: "for...of". This style loop is useful when iterating over the elements of an array.

Contact:

Links discussed in this video:

Help us caption & translate this video!

[SimonTiger]

Here are all types of for loops in JS:


// for
for (let i = 0; i < arr.length; i++) {
// i is index, arr[i] is element
}


// for
..in
for (let i in arr) {
// i is index, arr[i] is element
}


// for
..of
for (let elt of arr) {
// index not available, elt is element
}


// forEach
arr.forEach((elt, i) => {
// i is index, elt is element
});

[BrianMikasa]

I love how this guy articulates this stuff. It really makes it click.

[cemkahraman]

"But you are in the future..." that part made me feel like you are directly talking to me.

[goldthumb]

Finally I met the "foreach" equivalent in JavaScript. It looks so cool compared with the traditional for loop with "i".

[zackina]

THANK YOU SO MUCH FOR TEACHING ME THIS!
It all made sense now!

[shaunkhulani]

This is different from the foreach loop in that the foreach only works with arrays whereas this for of loop works with any iterable, there is a third called the for..in loop for the curious

[makarakvar]

I love you from the future! Unicorn! Rainbow!

[astropgn]

I always thought that foreach was analogous to the implementation Python uses on its for loops, but watching this video I realize that "for of" is closer to Python's for than the Javascript's foreach. That is because Python can loop to any iterative object (not only arrays of things, but characters in a string, or generated elements in a lazy function that yields a value when it is called). Nice!

[KutadguB]

Thank you Dan,

I just want to add there is also for (in) syntax but you still have to use [i] in it.

for (let i in bubbles) {
bubbles[i].move();
bubbles[i].show();
}

this also does the same thing.

Peace

[eti]

With all the comments about forEach, I was amused to find that "each" is not a reserved word in JavaScript.
So you could write:

for (let each of bubbles) {
each.move();
each.show():
}

[pieteb_nl]

I'm here now 'from the future', watching your video now! THANKS

[AllanKobelansky]

Its hilarious how you time travel. Really educational videos. Thanks for doing these.

[yuyafujikawa]

Beautiful explanation!!! You have exactly answered my question!!! So the name(variable) for each element in an array is completely arbitrary!! Very nice, short and concise video! Thank you!!

[jorge]

"I don't feel like counting today"
made my day :D

[JakubWojciechowski]

I love how you gae me valuable lesson of coding, some nice joke and a quick existancial crisis just in under four minutes

[Albertazzzo]

I didn't think it was possible for you to make videos this short!

[kamoroso]

Maybe when you cover iterables, you can come back to this and explain how it works in a little more detail. I liked how you explained the convention of naming the elements. That might be confusing for a beginner. ES6 is awesome! Oh, I almost forgot! With the for-of loop, the element variable can be declared with const, so may as well!

[sodiboo]

Just the title here has taught me something completely new

I know that in other programming languages there’s a syntax like for element in array, but i never realized this exact same thing exists in javascript, just the actual in keyword which returns the key of the item, not the value, so i always had ugly code like this:
for (i in array) {
const element = array[i]
// other code
}

But thanks to this video i now know of the much more efficient and easier to read:
for (element of array) {
// other code
}

[marsomatic]

Wow that was the deepest ending of a video ever in the history of youtube

[reubensolomon]

Thanks from the future. I love your humour man