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.
Video on ES6 let: https://youtu.be/q8SHaDQdul0
Support this channel on Patreon: https://patreon.com/codingtrain
To buy Coding Train merchandise: https://www.designbyhumans.com/shop/codingtrain/
To Support the Processing Foundation: https://processingfoundation.org/support
Send me your questions and coding challenges!: https://github.com/CodingTrain/Rainbow-Topics
Contact:
Twitter: https://twitter.com/shiffman
The Coding Train website: http://thecodingtrain.com/
Links discussed in this video:
for…of reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for…of
Source Code for the all Video Lessons: https://github.com/CodingTrain/Rainbow-Code
p5.js: https://p5js.org/
Processing: https://processing.org
For an Intro to Programming using p5.js: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
For Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
Help us caption & translate this video!
https://amara.org/v/dXkh/
📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct
Original source
31 responses to “16.4: for…of loop – Topics of JavaScript/ES6”
Wow that was the deepest ending of a video ever in the history of youtube
marry me!
Yes I'm here , this.isthefuture
10 likes just for the ending! haha
this is very python like syntax and i like it.
This new form of the loop is like a foreach, I would like to know if it is possible to display the index or if I myself should create a variable outside and count?
For .. of .. is used to iterate on Iterators .. custom iterator or Async iterator ..
let r;
let bubbles=[];
function setup() {
createCanvas(600, 400);
}
function draw() {
background(0);
for(let i=0;i<bubbles.length;i++){
bubbles[i].move();
bubbles[i].show();
}
}
function mouseDragged(){
r=random(10,50);
let b= new Bubble(mouseX, mouseY, r);
bubbles.push(b);
}
class Bubble{
constructor(x,y,r){
this.x=x;
this.y=y;
this.r=r;
}
move(){
this.x=this.x+ random(-10,10);
this.y=this.y+ random(-10,10);
}
show(){
stroke(255);
strokeWeight(4);
fill(r,random(100),random(r));
ellipse(this.x,this.y, this.r*2);
}
}
bubbles.forEach((bolha)=>{
bolha.move();
bolha.show();
})
There is also a thing called for…in loop
Example:
<script>
let obj={
hello:"abcde",
one:"fghijk"
};
let abc="";
for(const key in obj){
abc+=obj[key];
}
console.log(abc); //abcdefghijk
</script>
I love you from the future! Unicorn! Rainbow!
Great 👍🏽 video ! Great enthusiasm! SUBSCRIBED !
I love how you gae me valuable lesson of coding, some nice joke and a quick existancial crisis just in under four minutes
JS every day they release new built-in function
"I don't feel like counting today"
made my day 😀
you are cool guy
!)
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():
}
sit I like ur teaching
Wow I love this
But you are in the future, I don't even know who you are, watching this video. But you are there, someday, watching this video. I'm probably not standing here anymore, I'm somewhere else. This video has ended.
I don't know how to feel about this sentence
intro of the video like doc brown from back to the future am here to tell u about the future!!!
You're the biggest nerd I've ever seen ;). I love your videos. You're amazing!
I always get something from you, I have never heard of For Of before and here you are amazing me again, oh man thank you so much.
what's the difference with a "for…in" loop?
You are funny
How to you remove items from array with for…of loop? Do you still use splice or some other method?
Is it okay for me to assume that we use for (of) for looping element in array in all or most cases and for(in) to loop keys inside an object?
It's funny that Homer (yes, the Illiad and Odyssey one), had very similar objections as you have at the and of the video. He was afraid of ruining the poem by putting it in written form, and not having control over the time/audiance issue.
I didn't think it was possible for you to make videos this short!
Why don’t you just use map() filter() and/or reduce(), in addition to forEach and for…of, when you need to manipulate an array instead of the traditional counting method?
finally don't have to use [ ]