JavaScript Loops - Code This, Not That

Learn all about JavaScript loops 🤹 and how to write code that maximizes performance and readability, while avoiding the bad stuff 💩. fireship.io/snippets/javascri...

[@hishammubarak3421]

This guy can pack a whole semester into 8 minutes. Watching this video was worth every second, I wish you uploaded one of these every week.

[@LOOTS243]

🤑🤑

[@hcmlopes]

This is true. These videos are difficult to follow if you are new in the subject but if you are somewhat familiar with the topic they are great

[@curiosdevcookie]

I agree wholeheartedly ❤️ I love learning, but the teacher is as important to the learning process as the knowledge itself, actually 🤔… teachers are more important because they are our tool (no offence intended!) to digest any kind of knowledge by best breaking that down from his or her perspective. Sometimes their style jives with their students’, sometimes not, sometimes even that is a learning/adapting process which can offer a lot in itself 😏😎 I deeply admire his expertise in so many areas and his teaching style, and yes, emoticons are included for sure 😁🤗

[@gbenga9811]

I couldn't agree more. He's so good at it.

[@maguilecutty]

@@hcmlopes if you are new you should check out funfunfunction 's videos. Definitely a step before this and also really great teacher!

[@IAmLesleh]

Iterating over an object can be done with: for(const [key, value] of Object.entries(obj))

[@Fireship]

Good call 👍

[@ricardorien]

Do you know wich extension he used for emojis and show the console in one line?

[@ghjerrr]

Ricardo quokkajs quokkajs.com

[@RocketTrolley]

I often use destructuring as well like this in loops. It just simplified things

[@RocketTrolley]

Ricardo the tool you’re looking for is this quokkajs.com/ It’s called quokkajs

[@CaamSerenity]

One thing you need to keep in mind when using sort() on array though: So is destructive, unlike map(), filter() or reduce(). It changes the original array and returns a reference to that original array, NOT creating a new one!

[@CST1992]

That should be expected, shouldn't it?

[@natew4724]

@@CST1992 Not necessarily, because sort also returns a reference to the array like map, filter, etc.

[@theclockworkcadaver7025]

@@natew4724 Yeah. Ideally, methods which mutate the original data should return void - especially helpful in TS.

[@amirhosseinrafiee2926]

Your videos are by far the best resource on programming . Keep up the good work 👍🏻🙏🏻

[@carniattos]

Even in basic videos like this I'm able to pick up some tips and tricks here and there. Magnificent work Jeff

[@codeonmars579]

kzbin.info/www/bejne/qIm9hWCrarlkp7M

[@porgeet]

Loving these videos, so clear and concise. This pleases me.

[@khai96x]

Callbacks of sort() are supposed to return a number (-1, 0, +1), not a boolean. So you should've used `a < b ? -1 : +1` instead of just `a < b`.

[@Fireship]

RE 4:26 I was envisioning a long-running cpu intensive process as better suited for a compiled multi-threaded language. JS/Node is fast at basically every benchmark that matters, so didn't mean for that to come off the wrong way.

[@olaorefouad2518]

Hi, Jeff. I was going through fireship.io, and I found out that you used web components via angular, Hugo for static content and firebase My question is; can you recommend any set of materials for to learn web components and Hugo. Please reply.

[@Fireship]

@@olaorefouad2518 There is not much out there yet for WC. I made a video about "Advanced Angular Elements" recently that should be helpful if using Angular.

[@TheYuvelir]

what extension did you used to show these results interactively ?

[@naveedalirehmani4135]

Quokka

[@loveparmar1284]

0 dislike !! This is the power of great content. Thank you sir!! Love from India.

[@christay9626]

I like all of your videos; they're all presented very nicely compared to other programming videos on KZbin. My only criticism is that the code is run through so quickly, so if you're a beginner its hard to keep up with what is going on...

[@hdorodev]

I always wonder how can you do so much, with so much quality, with your time 🤔 A video on your creative process, recording and editor set-up and your overall philosophical take on life, work and code would be very much appreaciated! You're quite the interesting human being :D

[@Fireship]

Thanks for the unique suggestion. I will put all my tricks into a video one day. This sums up my philosophy on code fireship.io/mission/

[@ChaoticNeutralMatt]

@@Fireship that was actually interesting

[@Poohbify]

100% want more of this, please and thank you!a It's great!

[@javascript_developer]

Great. Every time I watch your videos I feels like I am noob. But your videos are really awesome advancing my current knowledge.

[@bgenp4f600]

Hey great content, i've watched around 5 videos now and i was subscribed after the first one. The pace is a bit too fast though, at least for me that is. But pausing and going back to fully understand is really worth it.

[@rushabhsheth5441]

I guess you must upload a complete big videos to master JavaScript for a mid user. This video was amazing keep the good work going !!

[@muradeliyev6291]

these types of videos are my favorite. please do more)

[@sebbes333]

You will ALWAYS get the best performance when you write "normal" code that the compiler will recognize, it is faster because the compiles does a LOT of optimizations that you probably never even have heard about, no mater how great coder you are.

[@SprHero]

For the early birds where the video doesn't load: set the quality to 360p and then click somewhere on the timeline to skip a few seconds (you can go back to the beginning afterwards).

[@filipcoja]

Actually works, thanks!

[@Fireship]

Thank you Martijn! It won't even play for me.

[@SprHero]

@@Fireship No problem. I hope my quick solution worked for you as well. I enjoyed the video!

[@valiok9880]

Is it because of youtube compression ?

[@SprHero]

@@valiok9880 I'm not an expert, but I think you're right. I think youtube only had the 360p version ready, but for some reason gave us the HD option (which was not available). After setting the quality to that lower setting, skipping a few seconds forced youtube to load in the 360p quality (which was actually available). This way, the video could play.

[@saideepkonduri6429]

Awesome as always , background music is 👌

[@vishalphilip6705]

We need more contents like this. 😍 Performance Demo is lit 🔥

[@vidalroland]

Very good as always, Will be helpful to train

[@markgemmell3769]

Excellent videos amigo. Well done. It is funny how the good old for loop is the fastest and IMHO the most explicit and easy to understand. 😄

[@everyhandletaken]

It must depend on background, because all I see when I look at them is 1;-+++=>?#||.£ii j-x= 1 I honestly have no comprehension how that is easier to read (and notice that someone made a typo), than ‘x of y’. I’m happy to take the performance hit, for readability for myself. Not saying you are wrong by any means, just that I see it much differently ☺️

[@rezguibahaeddinne1605]

Just thank you so much, more please from this

[@HaiVu]

On NodeJS (latest at time of writing, on Ubuntu 19), for(let i = 0; i < ...) and for(x of y) and forEach() all gave roughly the same execution time, for a large array (1 million objs).

[@kingbeencent]

I love your work dude!

[@amanimavu810]

Awesome stuff man, thanks a lot

[@kimdecastro6951]

You explained it well bro! 🙏🏻

[@TimleyDegreeIII]

You improved me a lot.

[@enfieldli9296]

The higher order function part is really conscise!

[@perc-ai]

one of the best js array vids on the internet lol

[@pinkshortcomedy]

Its so *easy* to *understand!* thi deserves the most *likes in the world*

[@hnasr]

Great work dude!

[@SlingShotKid007]

The quality of the production of these videos is fantastic, what kind of tools do you use for video editing, making the first emoji appear, etc?

[@ricardorien]

You already know wich extension is? form emojis.

[@avatars24]

thnx for all the videos You make

[@vlad981]

Btw, property order in object are also guaranteed to be chronological by ES6 specs.

[@Fireship]

Good call. It's only guaranteed in certain cases, right? I don't think the for-in loop would be ordered in ES6

[@vlad981]

If I understand it correctly - it must be guaranteed - 2ality.com/2015/10/property-traversal-order-es6.html

[@gerritweiermann79]

I'm really loving your "Code This, Not That" series! You could have added generators because it's very similar to iterators ;)

[@loekaars]

What extension / theme are you using for the green squares on edited lines? Edit: also how are you getting live console.log() output at the end of lines?

[@Fireship]

Quokka

[@jashanbansal2613]

Jeff! You are awesome :)

[@williaamlarsson]

So much of this is similar to Haskell, I love it😍

[@theatypicaldeveloper]

Old but gold!

[@bencavenagh1036]

What is that plugin for displaying the console logs in the IDE? I would love that

[@LuDaley]

It's probably the Quokka plugin(quokkajs.com/docs/). Made by the wallaby.js folks. I found it recently. I think it changed my life. Enjoy

[@loobakaer2]

@@LuDaley And on this day sir, you've changed mine.

[@victorlongon]

It is Quokka, wallaby uses it under the hood

[@_rathankumar]

Nice content, is there any place where I can see your vscode setup?

[@albert21994]

outstanding quality

[@himynameisoleg]

Oh snap, finally an Array.reduce example that makes sense!

[@shellwhale8994]

What plugin do you use to show directly in the editor the console.log() output ?

[@The_Ghost_In_Heaven]

What editor are you using?

[@RyanSmith-rb1ch]

Good video. More please.

[@justinjoker8060]

so awesome channel. thanks bro

[@nickysalazar1418]

Excellent video, how do you do it? what program do you use

[@AronFiechter]

Interesting video! I am happy you suggest to use forEach, map, filter and reduce even though their performance is slightly lower because not only is the code much nicer to read, but it is also less error prone. However, I have one question: why does the sort function mutate the original array? It is very counterintuitive. It should either not return anything and sort in place, or sort a copy and return it.

[@victorlongon]

It does not matter if you are not working with very huge data sets. Always use reducer functions because they are more readable and immutable. Perf is not an issue until you actually see that there is a problem.

[@AronFiechter]

@@victorlongon if I were working with huge datasets I'd use Spark, and there it's even more important to write code for humans.

[@victorlongon]

@@AronFiechter sure, i just meant that usually the "perf" argument is just not relevant. I have been writing js (and lately ts) for almost 10 years and i can count the few times iterating over stuff with a map was actually a problem

[@victorlongon]

@@AronFiechter btw, i totally agreed to what you wrote, specially the part about the style of code being less prone to error.

[@djpunisha29]

p.s. I subscribed and smashed that notification bell :)

[@CST1992]

Also, slice and splice could be used to create a new Array from an existing one, if you're wanting to avoid mutating the existing one.

[@domuuuuu]

.splice() mutates, .slice() doesn't (returns a new array).

[@RobertWildling]

Since you use emojis so often, would there be any chance to do a video about those? E.g. the unicode space, how to insert them in VScode, your most favoured usecases...?

[@hazemgharib]

What kind of extension you are using for VS Code to display instant JS interpretation like that?

[@ndcouch]

Quokka.js extension

[@hazemgharib]

@ndcouch Bless you man!

[@ndcouch]

@@hazemgharib np buddy!

What extension do you use which shows you the value of variables and errors at the end of the lines?

[@vambach]

What is the vs theme that you use ? Also the configurations like plugins you have used. I like them.

[@anticom1337]

Hey Jeff, no offense but although this sort of content is important to understand and learn about i subbed to this channel for some more advanced topics. Don't get me wrong it's a great videos for newbies to js. Can you mark such videos as "basic" or "essentials" next time so it's easier to identify? Maybe possibly even adding intermediate and advanced tags to your videos might help out others to quickly grasp what skill level the video is suited for :) That being said keep up the good work sir!

[@Fireship]

I hear you and advanced content is mostly what you will see on this channel. When you see "code this, not that" it will probably be pretty basic. I hope to do these quick basic videos every couple weeks.

[@ihababdelbassetannaki6871]

@@Fireship keep it for those who wanna embrace the JS Path, poeple do not born JS developers.I've been following your videos and I released that I have an advanced knowledge about JS , TS and different TSJS librairies,yet I was writing bullshit and I'm ashamed to call my code a code ... coz I was always like meh basics

[@microwavekonijn]

The for of loop and the default for loop have similar performance. Your comparison is wrong as the default for loop never access the elements in the array. Add something like "arr[i];" in the body and you will get similar performance. The for loop you are showing should be compared to the for in loop, which has worse performance. But that doesn't mean you shouldn't use it as it is really useful when iterating over keys in an object. Other than that great video.

[@maiconm]

Great video! How do you make these emojis?

[@umka7873]

Jeff, what the music played? Tell me pls

what extension do you use to preview the console output and the variable value on hover?

[@shreerangvaidya9264]

Subbed instantly.

[@JamieMcI]

Much cleaner than my pooCount algorithms.

[@Fireship]

Gotta keep the pooCount code clean

[@codeonmars579]

kzbin.info/www/bejne/qIm9hWCrarlkp7M

[@sam.0021]

which extension do you use for those sick green boxes? also, how did you type that blue (i assume commented) text just on the screen? was it video editing or another extension?

[@Fireship]

It's all via Quokka, they also make a nice test runner called Wallaby.

[@sam.0021]

Fireship - AngularFirebase awesome thanks!

[@botdamian5688]

Keep in mind that only the normal for loop allows you to break or continue the loop.

[@CorrectMyGrammarPls]

You can use return as a continue inside the function "loops", you cant break at all tho

[@rainmansyc7869]

Awesome video! I am wondering which plugin did you use for showing console log output inline right next to the log function?

[@GhostlyDilemma]

Ever found it?

[@rainmansyc7869]

@@GhostlyDilemma nope, still looking for it

[@GhostlyDilemma]

Googled a few minutes and found Quokka.js which looks pretty much like the one used in the video, hope I could help :3

[@rainmansyc7869]

@@GhostlyDilemma I believe that's exactly what he was using in the video. Thanks a lot for letting know!

[@niclasj2871]

Nice video Something about the firebase admin sdk would be nice

[@AbadiyTalaba]

*Holy shit was this useful😱😱😱, and definitely worth watching about a million times till I get every single word into my mind🤖😍😍😍!*

[@Punky_Brewmeister]

Is there a certain extension you are using that shows the text out to the right of your code that evaluates the line?

[@acqzuel]

do you also do the graphics and motion design for your videos? or do you have a team or collaborator?

[@Atmos41]

After extensive performance tests, I can assert that forEach is now performing extremely good (even better than a standard 'for' loop)

[@Rudxain]

That's expected. Many new methods and syntax are slow at first, but when months pass by, the engine devs have already optimized most part of it

[@pguti778]

Yes, more videos!!!

[@zhangkai7706]

the callback for the sort method should be like (a, b)=>a-b, not ab. Am I correct?

[@DavidsKanal]

Yes!

[@AB-ub9nd]

What’s “Hi” -“Hello”

[@pepkin88]

Only for numbers, you can't subtract strings. But you can compare them and return 1 or -1 like this: `a < b ? 1 : -1`.

[@kubikaugustyn]

Don't forget that JavaScript provides a generator function, in which you can use the "yield" keyword. You can use that in a for...of loop

[@AndreMarascaEngenheiro]

You must fill the array before the speed tests, the array methods only iterate over the elements of the array, an empty array (Array(1000)) has no elements.

[@jbraat]

I really enjoy your videos. I think they are very well put together and do have a lot of substance. However in my perspective the mindset of "it's really only concerned when every nanosecond counts and that point you might want to consider something other than javascript" (4:21) is not very good to have at all. If you do this a million times in your application it will still make it slower. Just because it does not matter in this one isolated instance and because "it's just javascript" does not mean, you should do it, if there is a better option (given you have the time and knowledge to optimize your code). We should always strive for the best possible solution to a problem (time, money, etc. are obviously factors to consider). That is at least my take on it.

[@Fireship]

Yeah I actually regret that line now. It came off as JS is "slow" when that's not really fair. Bad code makes things slow, not the language.

[@pepkin88]

> "does not mean, you should do it, if there is a better option (given you have the time and knowledge to optimize your code)" Most of the time, readability is the better option, not chasing minimal performance gains. Also, beware of premature optimization.

[@bharatparsiya]

I had a question, which VS Code plugin do you use for showing console logs there and there. Or is it added in post? By the way awesome post

[@tolotraraharison1067]

This is Quokka

[@NumbBanana]

quokka

[@bharatparsiya]

thanks @@tolotraraharison1067

[@bharatparsiya]

thanks @@NumbBanana

[@BrianClincy]

How do you get the emjoi's in your editor?

[@ricardorien]

Did you find it?

[@TheRajeev7]

@fireship can you tell me which IDE you are using.. how to get this info like suggestions pop ups when we code.. I'm using vs code.. and react tools .. I tried most of extensions .. nothing is good as Android IDE being from Android background.. plz help me out..

[@perfect.stealth]

Why did i laugh at the spinning JS logo? I felt it was screaming event loop in my face 😂

[@Polacosendrea]

awesome video! what is that extension that shows you the result next to the code? i need that!

[@ThotsAndPrayers]

Quokka.js extension

[@Polacosendrea]

@@ThotsAndPrayers Thank you so muuuuuuch!!

[@Daw588]

What theme you using in Visual Studio VS Code?

[@LazyGod840]

I'd guess it's the same theme that I use and it's called One Dark Pro.

[@itsnobledean9450]

Videos like this is the reason I may be looking to fork up the $400 for his pro member plan. The way he explains has helped me understand many topics in web development. I'm thinking hard on spending the money.

[@kld0093]

ever since i learned js, I used for( in ) and i thought its equivalent to forEach (i probably didn't pay attention on tutorials). Every time i'd use for ( in ) for an array, i'd get indexes and like wtf why is javascript doing this? now I know! Thank YOU

[@Fireship]

It is confusing and I still mix them up after doing it a million times.

[@Fireship]

@@darkopz good points, I actually mentioned the foreach issue in my async/await video. There are some gotchas in js when you use it's syntatic sugar, that's why linters are so important

[@kld0093]

@@darkopz thanks for the advice!

[@mvvbuch]

Nice vid!

[@remotetechie6910]

Video quality is unreal. Would be awesome to see data structs / algo.

[@filipcoja]

The video doesn't load???

[@Muaddibkhan]

Great video, you should do these kind of videos more often .

[@aidarwm2393]

Why I need to use 'for of' or 'forEach' if standard 'for (let i=0; i < arr.length; i++)' is more faster?

[@Fireship]

You don't have to, it's just syntatic sugar to make your code easier to maintain and understand.

[@jasonwismer2670]

Because coders get bored and want new toys. Too much syntactic suger isn't very good for you.

[@Nebrass_]

I respect you man

[@MercyFromOverwatch2]

Jeff is still my favourite tech youtuber

[@agent-33]

Is this still good? Isn't the standard loop still the best to use when it comes to performance? Or may depend on a browser?

[@TheCompleteGuitarist]

As I am writing some javascript loops I came out of curiosity, the saliva is now drooling over my chin and forming a pool at my feet and my motor neuron skills are pre stone age, I typed this with single fist strikes left then right then left etc. I am off to cry myself to sleep. Fortunately I wrote my scripts before watching this video.

[@MakoNext]

which extension you use to show the output preview per line?

[@qazyhn94]

Nice video thank you for

[@dinuka_bandara]

also we have fill, Array(5).fill("Fireship"); //["Fireship","Fireship","Fireship","Fireship","Fireship"]

[@alexnicaise8655]

Love your videos, gotta put it on slow mode tho; you talk so fast!

[@blackpurple9163]

What's that extension where the result/emojis print out right next to the statement inside the code, like next to the console.log( ) statement?

[@guillermocava3568]

Straight fire