JavaScript Loops
ฝัง
- เผยแพร่เมื่อ 4 มิ.ย. 2024
- JavaScript provides many ways to iterate through loops. This tutorial explains the various loop possibilities in modern JavaScript!
Table of Contents:
00:00 - Introduction
00:50 - for
07:23 - while
14:31 - do...while
18:09 - forEach
24:01 - for...of
28:18 - for...in
32:40 - Speed Comparison
Thanks for watching! For any questions, suggestions or just to say hi, please use the comment section below!
Support the Channel 💙☕🙏
PayPal: paypal.me/CodingJourney
Suggested Videos:
Mean, Median and Mode with JavaScript: • Mean, Median and Mode ...
Coding Memes: • Coding Memes
CSS box-shadow Editor: • CSS box-shadow Editor
Data Visualization with Chart.js: • Data Visualization wit...
Voice Search with JavaScript (Web Speech API): • Voice Search with Java...
Simple Auto-Playing Image Slideshow (HTML, CSS and JavaScript): • Simple Auto-Playing Im...
Codepen: codepen.io/Coding_Journey/
Twitter: / codingjrney
Email: codingjourney123@gmail.com
Subscribe 💖
/ @codingjourney
You are a very good teacher. Slow and clear. Can't stand these showoff TH-camr's racing through explanations like they are talking to a bunch of seasoned programmers. Well done and keep it up!!
Heh thanks for the lovely comment 🙂 I don't think they are showing off! Problem with detailed explanation is that it results in longer videos... But anyway, very glad you liked this video! All the best, keep coding 😉
you have so much talent teaching! thank you!
🙏❤❤
The most complete and informative tutorial on Loops. Thank you!
Oh thank you for the lovely comment 🙂 Glad you liked it!! 💙
Very nice precise and informative instruction.
This is brilliant! THANKS
Thank you very much, it was a big help
Wow man what a video bro, jam packed with knowledge.
This video was epic, very informative. This is the first time I thoroughly understood about all the loops in JavaScript. This definitely helped in my understanding of the JavaScript loops.
Thanks so much.
Very much appreciated. I will definitely be coming back for more javascript and other related content. Respect!
Amazing! So glad you found this video helpful. Thank you for the lovely comment! All the best 💙
Beautiful! Thanks mate!!!
Very good teaching, slowly and well explained. Thank you so much!
Amazing! Very glad to hear this was helpful 🙂 Thank you for the lovely comment!! 🙂
It seems to have studied this material, but still learned new cases for myself after watching this video. Thank you for your efforts.
Thanks man! Very happy to hear that you found this useful!!
Thank you for this amazing professional presentation. It is the best and exactly what I need.
Oh thank you for the nice words 🙂 Very glad you liked it!!
Well Explained ! Thank you for your hardwork!
My pleasure 🙂 Glad you liked it! 💙
very comprehensive , keep the amazing work :D
Thanks man! I'll do my best 😊😉
Very Helpful!!
Excellent Tutorial!!!
Thanks mate! Glad you liked it 💙💙
I’ve often been told that for...of loops are slower than for loops but, when processing an array of all elements starting with the first element and ending with the last, I have always preferred the clean syntax of for...of. I never bothered to actually speed test each loop type. In fact, by casual observation, I never saw any discernible difference. I even contemplated the possibility that the assertion that for...of loops were slower might be a made up notion or that the difference is so negligible that the distinction was purely academic. Your speed tests here are truly eye opening for me. So much so that I am compelled to revisit some existing code already in production for a long time now in order to improve performance. This also affirms my theory that less code is not necessarily optimal code. A great developer considers runtime execution as a key factor to inform their design decisions. Thank you. I’m an instant fan of your excellent work. Subscribed!
Oh thank you for the nice words! Yeap speed difference between for and for...of loops is not a myth 🙂 but at the same time in many cases (most cases I would argue, unless there is a huge number of iterations) it is insignificant. Agree, less is not necessarily more when it comes to optimal code 🙂 not just when it comes to execution time optimization but also due to maintainability issues...gone are the days when I tried to come up with "clever" one-liner solutions 🙂 Thanks again, keep coding and welcome aboard 😉🙂
@@CodingJourney Thanks for the thoughtful reply. It's the last speed test that shook me up. The delay on the for...of was notably slow. I have a block of code that inspects all tags on an HTML page and can be used by other developers. There is technically no upper limit to how many elements there might be in a single page to iterate through. In production, I've never seen it take much time at all. In fact, it seems instantaneous. But I think I will have greater peace of mind knowing I optimized for performance having seen real evidence for the first time of the speed differences. By the way, it might interest you to know, I console-timed my actual code to observe the difference since watching your video and there is definitely a performance leap with a standard for loop. I must say... while I now gladly accept that for...of loops actually are slower, I still don't quite understand WHY. I always thought, if anything, for...of loops should be faster. They don't take any input on the starting number or the increment interval and they don't need to update a variable to report where the pointer is within the loop. The only heavy lifting it does is sizing up the array but that is exposed by .length which 99% of people set their old school for loops to as the ending number. So my next mystery on this subject is why this is. But in any case, you taught me something new and unexpected and, for that, I salute you.
That's a good question 🙂 Just observing the results here and not getting into the cause 🙂 My guess would be that since "for...of" loop is syntactic sugar for the "for" loop, there is some extra overhead for the "for...of" loop (what you are describing is happening under the hood). But I'm just guessing here, more research would be required for a definite answer 🙂 Thank you for your comments and input!!
@@CodingJourney “Syntactic Sugar” 😎 Well said, my friend. Clearly there is added overhead as the speed tests prove. This runs counter to my prior intuition on this but the data doesn’t lie. I hope there is someone out there who could explain to both of us why this is... or someone crazy enough to actually go under the hood to pick it apart and unravel the answer. Thanks back to you for the thoughtful responses. Thanks also for reminding me that no matter how many decades one has been coding, there is always much more still to learn. A good developer has a healthy comfort level with the unknown. The moment they believe they know everything there is to know, is the moment they stop growing in their craft. Cheers.
Nice, nice! Thanks :)
🙂 My pleasure!!
Just brilliant!
Thanks man! Glad you liked it 🙂
for(const [index, elem] of myArray.entries()) {
If I were to omit the method, being .entries(), from this line, would the for...of loop still run properly?
Hey mate! If, besides the array elements' values, you also want to access the indexes, then that's how you should do it (if you omit the .entries() method you won't be able to access the indexes). If you only want to access the values, then you don't need the .entries() method. In that case you only need: for(const elem of myArray) {...}
Why my "OUTPUT" terminal doesn't log?
Cool but not really clear
Thanks! I've put many hours into this video, trying to make it as clear as possible...there is always room for improvement of course 🙂 what part did you find confusing?