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

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

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 >_>

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

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

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.

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

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.

Thanks, James! your video is so insightful!

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

@JamesQQuick

Жыл бұрын

Glad to hear it ;)

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?

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

@JamesQQuick

Жыл бұрын

Thanks destin!!

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

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

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!!

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 }

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

Great tips. Thank you.

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

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.

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

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

Morning everyone! Thanks for the vid James!

@JamesQQuick

Жыл бұрын

Thanks for watching!!

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

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

Cool video! Thank you

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

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

@JamesQQuick

Жыл бұрын

So glad to hear that!

Thanks James!

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

i find Promise.all recommendation very practical. Thanks.

awesome! very informative

@JamesQQuick

Жыл бұрын

Glad you enjoyed it!

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!!

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

I searched for such an extention fot a long time

Which vscode extension do you use?

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.

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

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.

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?

Really good explain it all promise

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

@JamesQQuick

Жыл бұрын

Maybe I’ll do future videos on more loops!

thx sir

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!

what theme is that?

What's your editor font? l like it 😀

what is font you use in vscode?

@JamesQQuick

Жыл бұрын

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

What theme is this?

Are using fira font or is it sth else?

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

@user-gf1vq6sy8q

Жыл бұрын

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

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

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

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 ….

Anyone know the VS code theme he's using?

@prime198x

Жыл бұрын

shades of purple

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

@JamesQQuick

Жыл бұрын

Yes, reduce is a very handy tool!

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

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.

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.

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

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.

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

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

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

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!

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.

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

@JamesQQuick

Жыл бұрын

Hahaha das ist richtig :)

@montebont

Жыл бұрын

@@JamesQQuick Hauptreichseisenbahnknotenpunkthinundhirschieber

🤴🤴

is Quokka free ?

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 // 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.

Promises are meant to be broken. 😂

B

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

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.

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

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

@JamesQQuick

Жыл бұрын

Adding it to the backlog!