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

Thank you so much. Sometimes all I need from a tutorial is a good example and this was four great examples.

If you count forEach you should count the other iterative methods. Stuff like map, filter, find, every, some and all the rest. The word for in forEach doesn’t really matter. Right? Array.map() may as well be called forEachElementToArray. And you’ll want to be familiar with a while loop and recursive looping. “These are the loops with for in the name” isn’t a significant thing. What you mean is “these are the ways to loop” and there are lots more ways to loop than you find with the keyword for. 👍

Thank you for this info!!

wow that's actually very handy

Since you did get me curious and no one has already mentioned it. A quick search tells me that a for/in loop is used to iterate over several properties of a single object. For example an object (person) might have a few different kinds of properties: let person = { name: "John", age: 22, occupation: "Accountant" } You can iterate over those properties like this: let text; for (let prop in person) { text += person[prop] + " "; } console.log(text); The person object is treated like an array containing all those properties that you are iterating over. The result of that loop will print: "John 22 Accountant " Keep in mind that these properties may not be of the same type. In this case the age property is an integer while the others are strings.

Yeah it mostly gets used to iterate through objects

And also .foreach and .map array method (map has a return value while foreach has not - not to be confused with Map variable). So 6 *(SIX)* ways to iterate over arrays/objects/maps. Yeah, JavaScript is confusing.

@善有善报Wade B. to each his own. Or should I say "for each his own?" 😂

Lots of functionality gets introduced. This was a part of ES6 from 2015 if I remember right. Then there was ES7, 8, and 9. Keep an eye out for new releases.

I use that all the time

I agree this is odd behavior.

peavyibanez: *for...of* is not slower when you consider that it extracts the element of the array in addition to looping. I just tested the following on a 1,000,000 element array: *t = new Date().getTime(); for (x of a) {}; console.log (new Date().getTime() - t);* That ran in 124 ms. But *t = new Date().getTime(); for (i = 0; i < a.length; i++) {var x = a[i];}; console.log (new Date().getTime() - t);* took 616ms, or about 5 times *longer* !

Ken Haley Good point. However, usually there is even more. The runtime compiler is very smart nowadays and *should* (hopefully) optimize loops anyway. So it should not matter what you are actually using. But it's a thing to consider if you run into performance issues.

Ah yes thank you for this clarification!!

Ed Farage works slightly differently I think in that you can use a foreach to loop over key/value pairs this looks to be a little less detailed. Probably quicker as a result..

exactly what i thought, except for forEach giving you an index as second parameter

yes, except (in my opinion) it's a lot cleaner, and also allows you to properly use break/continue but you could argue methods like .filter() or .find() remove the need for break/continue entirely, so in the end, it's just preference whichever you use, since they all give the same end result ¯\_(ツ)_/¯

fun fact, .entries() is also a thing for (const [index, bubble] of bubbles.entries()) { // ... }

kingdaro yeah I try to use arr.entries() whenever I can. JavaScript is such a great language!!

The purpose of *let* isn't performance, it's to control scope. The difference in speed is usually negligible.

I think that's right!

lieberscott it's cleaner, you don't need an auxiliar variable to iterate through the elements of the array, don't have to specify the length... It just iterates through all the array, with a less verbose syntax

It's both easier to type and easier to read! I have always hated the former syntax, that originated in C.

Prior versions of js had "foreach", which iterates over the items of an Array object, and "for in", which iterates over the properties of an object. The new "for of" iterates over the items of any iterable object (i.e. any object that implements "Symbol.iterator"). Example using a generator: class myIterable { *[Symbol.iterator] () { yield 1; yield 2; yield 3; } } for (let item of new myIterable()) { document.write(item + ""); } Example using a custom iterator: class myIterator { constructor(data) { this.data = data; this.index = 0; } next() { if (this.index < this.data.length) { return { value: this.data[this.index++], done: false } } else { this.index = 0; return { done: true }; } } } class myIterable2 { [Symbol.iterator]() { return new myIterator([1, 2, 3]); } } for (let item of new myIterable2()) { document.write(item + ""); } A valid iterator is any object with a "next" function, with the following signature: () => { value: any, done: boolean } The "let" keyword is a separate thing. It solves a lot of scoping issues, so I'd recommend reading the docs on it.

OK.... This is sorta what I came up with... it works, but I dunno if anything bad is happening that I can't see!!! function mousePressed() { for (let ball of balls) { if (dist(mouseX, mouseY, ball.x, ball.y) < ball.r) { let index = balls.indexOf(ball); balls.splice(index, 1); } } }

Use "for in" to iterate over the properties of an object. Use "for of" to iterate over the items of a collection. Example: let json = { "name": "Grzegorz", "regex": "\w+", "hobbies": [ "Programming", "Bug hunting" ] }; document.write("Keys:") for (let key in json) { document.write(key + ""); } document.write("Hobbies:") for (let item of json.hobbies) { document.write(item + ""); }

Anders Kehlet thanks for the answer

Hayttman this way is slow than a common for loop

Wanderson Silva so is the of loop he showed in the video

Hayttman use for (var obj of objs) is slow than for (var i = 0; i < array.length; i++) To improve the last example, I can save the length from array in another variable and use it to compare, like this: for (var i = 0, len = array.length; i < len; i++) // it works faster

This is an excellent point, I should do another video to clarify.

'for in' is used to loop over object properties and also over arrays but it's not recommended if the order of the items of arrays is important given that 'for in' iterates in random order and 'for of' is used just for built-in types, for custom objects we have to implement ourselves the generator function for our custom object.

llaaoopp I dont think that this is Java...

this is JavaScript, which is different from Java. if this would be coded in Java it would be "for (Bubble n : bubbles){}"

JavaScript***

It's a good point! I hope to explore these array functions soon.

I did not know this! I might need to make this video over again!

DIYman In javascript you don't have to specify data types as these are assigned by the program (you need to use var,let or const but it works for everything) and thats why javascript is so good in my opinion :V It slows down everything for sure, like c++ is one of fastest languages and here you must specify data type.

Yeah, no its Older then c , c+ and c++. I dont use Waved brackets and semicolons in my code, then it´s called BASCOM BASIC. Maybe from the late 1970´s^^

Gordon Chin it's actually a lot simpler, but it's just a pain to get your head around at first. All you do is make a variable and assign it the first item in the array. Then as soon as you hit the end of the block, go to the next item in the array! I'm usually a Python guy, and it's much easier to read. Try reading this as English for every_bubble in my_bubbles: every_bubble.show() every_bubble.move() It's the same thing in JS, except there are all those (ugly) brackets and braces everywhere.

You probably didnt use Java(*not meant javascript*) before?