5 Tips for Writing BETTER For Loops in JavaScript

Let's write better for loops in JavaScript!
00:00 - Intro
01:25 - Use Code Snippets
04:20 - Use the Accumulator Pattern
06:55 - Short-Circuit Your JavaScript For Loops
09:20 - Use Array Functions
11:30 - Be Careful with Async Await in For Loops
STAY IN TOUCH 👋
Check out the Podcast - compressed.fm/
Newsletter 🗞 - www.jamesqquick.com/newsletter
Live streams on Twitch 🖥️ - / jamesqquick
Follow me on Twitter 🐦 - / jamesqquick
QUESTIONS...?
Join the Discord Server 💬 - / discord
Want to know what hardware and software I use? www.jamesqquick.com/uses
Learn Web Development 📖 - www.jamesqquick.com/courses

[@barryglibb1448]

If you do have to use a For loop, you get a marginal performance boost by setting the array.length as a variable in the first condition i.e. for(let i=0, len=array.length; i

[@paulclarke4099]

Please cover standard for loop vs For-Of loop vs For-In loop vs array.forEach() function as well as performance difference(speed wise) of each of these 😀👍

[@JamesQQuick]

That’s a great suggestion! Thanks for sharing that

[@FelixSargent]

Yes! Just discovered the answer for this and it surprised the heck out of me.

[@soliuabdulrahmon7068]

@@FelixSargent pls kindly share with me

[@drakeno5015]

The main tip on loops - since 2020 there are handy constructs like "for...of" and "for...in", and no need to write rudimental i=0; i

[@mattxnyce]

Speedwise there is a reason. Using a for loop has a lower runtime.

[@johndaffue2333]

@@mattxnyce Yep, the built in array methods are substantially slower on larger arrays, quite interesting it wasn't mentioned in this video; sure it is easier to read but the performance impact can be quite severe as a lot of time people seem to be chaining these methods instead of doing a single forloop which means you can potential go into n^k territory very quickly if you aren't careful >_>

[@nowisdumb9773]

Making a video about Promises Awaits Async would be highly appreciated 🙏

[@MMH94MMH]

i have built an web application to generate VSCode snippets and i use it everytime when i write a function which can be reused, this saved me a lot of time

[@jaygarricktheflash]

Damn you are on it!!! I swear like an hour or so before this post I was searching for this info. Very timely video. Thanks

[@JamesQQuick]

Hahahaha yassssss! Love it

[@andhanautama1452]

Thanks, James! your video is so insightful!

[@andreh.9300]

Thanks for the tips! I'm a big fan of using the array functions, but I have needed to use a for...loop (vice forEach) occasionally for that short-circuit pattern.

[@destinlee]

Good stuff. I like these non-project tips and tricks!!!

[@JamesQQuick]

Thanks destin!!

[@JohnDoeX1966]

The promises all way of doing it is really clever! Learned something new today, thanks!

[@JamesQQuick]

Glad to hear it ;)

[@danser_theplayer01]

To avoid rate limiting for example in a bot, inside a loop await a promise with a timer in it. Basically a generator function (which I really don't see a use for) but in a form of a regular function.

[@DanMarquette]

I write Angular code using TypeScript and use my own snippets to generate templates for various Jasmine testing methods. In addition to the included Describe and It snippets in VS Code, I have my own that output a much more full featured set for Describe for instance, with a beforeEach() block, a couple of it tests, etc.

[@cobyboy383]

Do you have those snippets/examples of what you're describing in a github to share?

[@angel-pu7su]

Great tips. Thank you.

[@IHunter0273]

Would you mind sharing the font and theme you use in your editor? Really like them.

[@isahbala2540]

😲 so so efficient and sweet thank you so much!!!

[@burgermancan]

Love snippets, designed my snippets around react components / etc with typescript / prrops / etc, got a bit repetitive so this helps it :)

[@hkhald01]

Can you please share the theme name and especially how plugin you use to preview print the array elements and thanks

[@fearless4him595]

Morning everyone! Thanks for the vid James!

[@JamesQQuick]

Thanks for watching!!

[@VectorAMannanAnsari]

Which theme you r using and which extention you are using for js suggestions

[@christopheanfry2425]

Hi James good to see you back! Hope you had a great time in Europe, can see that the jet lag kind of affects you 😉🤣. Really nice tips the accumulator pattern didn’t know about it so thanks.

[@JamesQQuick]

Glad you enjoyed it!!

[@Knards]

Thanks James!

[@JoseLopez-oz5tn]

that last tip on when to use aysnc await or promises real was useful

[@marcbustamante3142]

Hi I like your theme. Can you share what them you are using and some customizations maybe?

[@gerompauel]

Cool video! Thank you

[@robertdong5591]

Amazing tips as usual :) For the accumulator pattern, I find the nullish assignment to be quite neat. const word = 'pneumonoultramicroscopicsilicovolcanoconiosis' const lettersCount = {} for(const letter of word) { lettersCount[letter] ??= 0 lettersCount[letter]++ } console.log(lettersCount)

[@JamesQQuick]

Oh very nice! I don’t think I’ve used that before!

[@jorgeluismongeblanco6933]

The way you wrote it, it doesn't work. It will always store REAL LETTER COUNT + 1, as the line 'lettersCount[letter]++ will also run within the same loop iteration where it was initially assigned the value of 1.

[@robertdong5591]

@@jorgeluismongeblanco6933 Thanks for catching that. Indeed the initialisation should be 0 and not 1. Amending the example.

[@8koi245]

there's a good song whit that name

[@aliimranalfred]

a bit more short version const word = 'pneumonoultramicroscopicsilicovolcanoconiosis' const lettersCount = {} for(const letter of word) { lettersCount[letter] = (lettersCount[letter] ?? 0) +1 }

[@sanctuary_of_soul]

i find Promise.all recommendation very practical. Thanks.

[@RAJESHWORLDMAIL]

To find an item in array we can use simply indexOf or includes method of array instead of iterating through each item in for loop

[@JamesQQuick]

If you're taking performance into account here, the indexOf function would have the same performance as iterating through a loop that includes a break to short-circuit after it's found

[@stevenstraker5105]

For #3, aside from "break;", there's a smaller short-circuit where you can stop that iteration and continue looping, using "continue;". This is good if you reached a desired point in a specific iteration and don't need to continue processing that iteration any more (but still need to process for others). Ie. you have a list of words, and need to find the index of the letter "s" in each word. Not the best example, but works.

[@heavygruff]

awesome! very informative

[@JamesQQuick]

Glad you enjoyed it!

[@thekwoka4707]

4 is the one that matters. For loops are rarely needed compared to the actual array methods.

[@jesf570]

Loving your videosan, I've seen trillions on JS. Loving yours.

[@JamesQQuick]

So glad to hear that!

[@anasal-sammarraie5788]

Can you please share the extension that makes console.log directly next to the code

[@tranlan4265]

what is extension, guys?

[@anasal-sammarraie5788]

@@tranlan4265 When you use VScode you can install extensions which help you out with your or sometimes it’s needed for some languages

[@user-nv9xb8rg9r]

Which vscode extension do you use?

[@jorgeluismongeblanco6933]

Hey James, excellent tips! Just one note: I think that, on Tip #5 (minute 15:04), line 34, you are missing an 'await' before 'Promise.all(...)'. But then... how is it that it runs fine on your example? 🤔

[@JamesQQuick]

Ah great question. So, since the loadPokemon() function is defined as being async, it inherently will return a promise. This means that wherever this function is called, it will have to use await to wait for the results. So the returned promise is the promise that is created from calling Promise.all() without the await. That make sense?

[@registerbnar7884]

@@JamesQQuick The only problem I see with this line is, that you time it before the promise is resolved due to the missing await and thus the timing does not include the parsing of the results. One additional optimization you could do, would be to move the .json() calls into the previous Promise.all in chained .then() calls, as each .json() call can be performed once the corresponding fetch resolves and there is no need to wait until all fetches are resolved.

[@JamesQQuick]

@@registerbnar7884 Oh shoot you're right! Dang I botched that part. Great callout!!

[@Wovi10]

If you don't need the entire for loop, it means it's a special case. Therefore I'd extract to a seperate function/method and use return instead of break

[@gorkemtr]

Really good explain it all promise

[@user-wv6tp2qv3v]

thx sir

[@MephistoDemon]

I searched for such an extention fot a long time

[@eliaspaulinho8435]

what theme is that?

[@fajarsetiawansiagian]

thanks for the video. it just tell about for loop how about while, foreach. ?

[@JamesQQuick]

Maybe I’ll do future videos on more loops!

[@carstennanninga7844]

In the BMW loop, if you return "found it" instead of console log, the break is obsolete, isn't it? Since return stops the loop.

[@mattxnyce]

It's not inside of a function in that case, but yes.

[@geoffreycollins6627]

Isn't array.find() method the same as #3? Do we get any performance benefit writing for loop instead of more concise .find()

[@jiraibozo]

probably but you shouldnt care about it until it is a problem

[@mattxnyce]

To be honest, quite a noticeable performance hit. If you are worried about performance, use a for loop.

[@chilisten]

What theme is this?

[@goodboys217]

I just know if I run a loop, it repeat me a single thing again and again. I just want to know what are the usage of it. What can a loop do in my project?

[@dq9342]

I like your cursor animation. is that an extension? thanks for reply

[@AbdulSamad-kn3ot]

You can change that is settings

[@JamesQQuick]

Yep it’s just a setting in vs code!

[@k16e]

It looks like magic so I have a few questions at 6:42. 1. How does the wordCount object automagically get the "key: value" pair formatting, or is that Quokka doing the magic in the console? 2. How is the variable "letter" getting assigned/value all the time in the loop, it being a const? I mean even it it were a var/let, it looks on the surface that it is getting overridden by a new value every cycle of the loop, no? Thanks for your clarification.

[@k16e]

Still reasoning about it. Does each loop represent a distinct "stack" so that "const letter = word[i]" is an nth amount of declaration for the length/size of the cycle? Does it make sense what I'm asking? 😃

[@inakiarias7465]

@@k16e For 2., that's it, each iteration of the loop has it's own set of variables (it's own scope), that's why you can declare letter as const. For 1., it's typical when you are learning to see that kind of syntax and think it's magic, happened to me as well. But the fact is that it's just taking advantage of JS features. You can use strings to declare properties(keys) on an object, instead of using the dot. For example: let person = {}; person["name"] = "John" // Person is now {name: "John"} As you can derive from this, inside the brackets you just pass a string, so that string can come from anywhere. let person = {}; let prop = "name" person[prop] = "John" // Person is now {name: "John"} The next step is to see, you are iterating over an array of strings, and using their values directly to create and access keys of an object, it's plain Javascript, no magic involved :)

[@k16e]

@@inakiarias7465 Much gratitude for taking the time to clarify. Thanks

[@hiepo1928]

what is font you use in vscode?

[@JamesQQuick]

You can find info about my setup in my uses page. www.jamesqquick.com/uses/

[@magichost]

What's your editor font? l like it 😀

[@kshtof]

Are using fira font or is it sth else?

[@piffe]

What’s the extension you’re using for inline console log displays?

[@Z8MB1ET0WN]

Quokka. It's the one he mentions in the beginning. It has free and paid plans, but the free version should do most of the heavy lifting.

[@SanderIwase]

Does anyone know what’s the name of this theme?

[@user-gf1vq6sy8q]

Most likely, it's Shades of Purple. The only useful thing here.

[@lildarker4044]

why no 'in' or 'of' in your array iteration?

[@justsample9185]

Talking about for loops and not mentioning for-of and forEach?!

[@JamesQQuick]

Great point!! Maybe I’ll do a part 2

[@arthasmenethil5748]

No reason to use for each when for of is more efficient,more clear and concise

[@lucasrmendonca]

@@arthasmenethil5748 actually, forEach is pretty useful because it chains with other array methods such as .map and .filter

[@nowisdumb9773]

True. I just want to point out that in some cases for-of and forEach tend to perform slower than traditional for loop

[@prime198x]

Anyone know the VS code theme he's using?

[@prime198x]

shades of purple

[@mercygotnerfed315]

looks the same as doing for(let Car in Cars) no ?

[@ddavid8888888]

I think you cannot use async/await in any “function” loop or map. If you want to use it the you should use for of loop or a regular loop ….

[@helleye311]

Aw yes, my favourite tip about for loops. Don't write them. Couldn't agree more :D

[@phredlane9081]

For loops are more the exceptions. Array methods handle most of this. The first section should have used Array#forEach. The second section should have used Array#reduce. The third section should have used Array#find.

[@ebrelus7687]

why not snippet for console.log itself... map is great but slower short compostable stuff lets you reason well but doesn't make the fastest thing, if you do codewars you learn it fast.

[@brunofunnie]

6:24 If you're "accumulating" one good thing to do is to "reduce"

[@JamesQQuick]

Yes, reduce is a very handy tool!

[@markluka7356]

with todays JS ECMASCRIPT's api, you rarely need to use for loops.

[@mattxnyce]

Too bad for loops are generally more efficient for runtime than array functions

[@a89529294]

🤴🤴

[@ThanHtutZaw3]

is Quokka free ?

[@ChristianKolbow]

Nobody uses words as long as we Germans. 😂 Grundstücksverkehrsgenehmigungszuständigkeitsübertragungsverordnung Donaudampfschifffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft 🤣🤣

[@JamesQQuick]

Hahaha das ist richtig :)

[@montebont]

@@JamesQQuick Hauptreichseisenbahnknotenpunkthinundhirschieber

[@attilagyen1446]

The title says "BETTER For loops", but you just used some built in functions. There are not for loops but array functions. And the first example was about just how to generate a code snippet. I expected something about for-in for-or forEach and the basic for loop pro-cont things how they work in the background when to use which and why etc.

[@zdfvbadfbadb]

Good tips. The tip count is actually more than 5 if you count seeing examples of how useful quokka and console.time can be. I agree that a Promise.all() post would be helpful. Really confusing to me what is going on inside the array of the fetches before it gets passed as a argument to Promise.all(), like why don't the fetches immediately fire off as they are instantiated rather than when sent to Promise.all()?

[@JamesQQuick]

Yeah that stuff is tricky to follow. I’m thinking about doing a specific follow up on Promise.all

[@H4KnSL4K]

Ouches: - I don't like something like quokka constantly evaluating (compiling?) my code as I'm typing it. It's a distraction, a waste of CPU cycles for all the intermediate results that I ignore, and what if there are unintended and undesirable side-effects? (like calls to a database or an API, repeating things I don't want??) - Learn to type slowly and carefully .. okay, I know being in-front of an audience makes this harder, but maybe do another take? - Similarly, please pay attention to proper spacing, like '//1. ' -> '// 1.' and 'for(' -> 'for (' while coding, and don't neglect semicolons!

[@abenoodyuo9408]

B

[@lanix17]

Promises are meant to be broken. 😂

[@onejdc]

6) Cache your Array Length

[@JamesQQuick]

Not sure what you mean there?

[@mattxnyce]

@@JamesQQuick he means it's best practice to declare and assign your array.length. There's a noticeable performance boost gained by doing so.

[@JamesQQuick]

@@mattxnyce Is that true though? The length property can be accessed in constant time, so in terms of BigO, you're adding negligible overhead? Maybe I'm wrong?

[@mattxnyce]

@@JamesQQuick I wish I understood why so I could explain it to you. There's a weird way of writing it. let i = 0 let len = array.len for(; i < len; i++){ // stuff }

[@JamesQQuick]

@@mattxnyce Yeah I get what the code would be if you did that. I just don't quite understand why the performance implication if accessing .length takes constant time.

[@selvamkarthik9605]

Brother please speak little bit slow, i am from non native English speaker places 🙏

[@curiousLeafy]

If you don't know dsa no matter how efficient you write your code you can never be as efficient as someone who knows dsa.

[@Pareshbpatel]

Great JS Loop Tips. Thanks, James {2022-10-21}

[@ahsannaseem3822]

great video!. make a video on Promise.all()

[@JamesQQuick]

Adding it to the backlog!