JavaScript Loops - Code This, Not That
Вставка
- Опубліковано 15 січ 2019
- Learn all about JavaScript loops 🤹 and how to write code that maximizes performance and readability, while avoiding the bad stuff 💩. fireship.io/snippets/javascri...
- Наука та технологія
Iterating over an object can be done with:
for(const [key, value] of Object.entries(obj))
Good call 👍
Do you know wich extension he used for emojis and show the console in one line?
Ricardo quokkajs quokkajs.com
I often use destructuring as well like this in loops. It just simplified things
Ricardo the tool you’re looking for is this quokkajs.com/ It’s called quokkajs
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.
🤑🤑
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
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 😁🤗
I couldn't agree more. He's so good at it.
@@hcmlopes if you are new you should check out funfunfunction 's videos. Definitely a step before this and also really great teacher!
Your videos are by far the best resource on programming . Keep up the good work 👍🏻🙏🏻
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.
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.
@@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.
Even in basic videos like this I'm able to pick up some tips and tricks here and there. Magnificent work Jeff
ua-cam.com/video/rXZT-u5T1qQ/v-deo.html
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!
That should be expected, shouldn't it?
@@CST1992 Not necessarily, because sort also returns a reference to the array like map, filter, etc.
@@natew4724 Yeah. Ideally, methods which mutate the original data should return void - especially helpful in TS.
Loving these videos, so clear and concise. This pleases me.
0 dislike !! This is the power of great content. Thank you sir!! Love from India.
100% want more of this, please and thank you!a
It's great!
what extension did you used to show these results interactively ?
Quokka
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. 😄
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 ☺️
Great. Every time I watch your videos I feels like I am noob. But your videos are really awesome advancing my current knowledge.
I like all of your videos; they're all presented very nicely compared to other programming videos on UA-cam. 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...
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).
Actually works, thanks!
Thank you Martijn! It won't even play for me.
@@Fireship No problem. I hope my quick solution worked for you as well. I enjoyed the video!
Is it because of youtube compression ?
@@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.
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
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/
@@Fireship that was actually interesting
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`.
Awesome as always , background music is
👌
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 !!
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.
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.
these types of videos are my favorite. please do more)
We need more contents like this. 😍
Performance Demo is lit 🔥
Just thank you so much, more please from this
Very good as always, Will be helpful to train
I love your work dude!
Great work dude!
You explained it well bro! 🙏🏻
You improved me a lot.
thnx for all the videos You make
The higher order function part is really conscise!
Awesome stuff man, thanks a lot
Its so *easy* to *understand!* thi deserves the most *likes in the world*
Jeff! You are awesome :)
one of the best js array vids on the internet lol
Old but gold!
I'm really loving your "Code This, Not That" series!
You could have added generators because it's very similar to iterators ;)
outstanding quality
Much cleaner than my pooCount algorithms.
Gotta keep the pooCount code clean
ua-cam.com/video/rXZT-u5T1qQ/v-deo.html
Good video. More please.
so awesome channel. thanks bro
p.s. I subscribed and smashed that notification bell :)
So much of this is similar to Haskell, I love it😍
Btw, property order in object are also guaranteed to be chronological by ES6 specs.
Good call. It's only guaranteed in certain cases, right? I don't think the for-in loop would be ordered in ES6
If I understand it correctly - it must be guaranteed - 2ality.com/2015/10/property-traversal-order-es6.html
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).
Yes, more videos!!!
Oh snap, finally an Array.reduce example that makes sense!
Subbed instantly.
I respect you man
Nice vid!
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?
You already know wich extension is? form emojis.
Nice video
Something about the firebase admin sdk would be nice
What is that plugin for displaying the console logs in the IDE? I would love that
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
@@LuDaley And on this day sir, you've changed mine.
It is Quokka, wallaby uses it under the hood
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?
Quokka
Why did i laugh at the spinning JS logo? I felt it was screaming event loop in my face 😂
What editor are you using?
*Holy shit was this useful😱😱😱, and definitely worth watching about a million times till I get every single word into my mind🤖😍😍😍!*
Straight fire
Nice content, is there any place where I can see your vscode setup?
What plugin do you use to show directly in the editor the console.log() output ?
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!
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.
@@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
Nice video thank you for
awesome video
After extensive performance tests, I can assert that forEach is now performing extremely good (even better than a standard 'for' loop)
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
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.
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.
> "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.
Thank you.
Great video! How do you make these emojis?
Love your videos, gotta put it on slow mode tho; you talk so fast!
Excellent video, how do you do it? what program do you use
What is the vs theme that you use ? Also the configurations like plugins you have used. I like them.
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
It is confusing and I still mix them up after doing it a million times.
@@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
@@darkopz thanks for the advice!
Great video, you should do these kind of videos more often .
Video quality is unreal. Would be awesome to see data structs / algo.
3:33 I wouldn't use Array() to test performance, because you create array that has 1 mil items of "empty". Uder the hood it works with array, that can have empty items in it (called holey array) and it has to check more things when using map, forEach etc. (not sure if it affects for loop too). It is better to just create array with [] and push items into the array. Then you may get more realistic times.
I don't know how much different would it be, but if you need performance, this is the way to go (at least for V8 engine). I would say it is also more realistic usage in general than creating array using Array() with specified number of items. :)
do you also do the graphics and motion design for your videos? or do you have a team or collaborator?
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.
.splice() mutates, .slice() doesn't (returns a new array).
First tutoring where i am watching it in 1x.
Keep in mind that only the normal for loop allows you to break or continue the loop.
You can use return as a continue inside the function "loops", you cant break at all tho
Thanks bro
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...?
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.
Jeff is still my favourite tech youtuber
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
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.
thanks bro
6:52 isPoopy? These are the important questions a doge needs to know.
What extension do you use which shows you the value of variables and errors at the end of the lines?
Jeff, what the music played? Tell me pls
what extension do you use to preview the console output and the variable value on hover?
Is there a certain extension you are using that shows the text out to the right of your code that evaluates the line?
What theme you using in Visual Studio VS Code?
I'd guess it's the same theme that I use and it's called One Dark Pro.
Piola 😎👍
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.
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?
It's all via Quokka, they also make a nice test runner called Wallaby.
Fireship - AngularFirebase awesome thanks!
great work anyway
learning so much new way to iterate that im asking myself: is it worth to learn of all those stuff cause they are not more efficient than the older lol waisting time to learn stuff only usable in JS where usual loopin way work same or better
what do you use? the compiler / plugin that has red and green thingy on the side, etc
What plug-in are you using to display the in line debugger values?
What kind of extension you are using for VS Code to display instant JS interpretation like that?
Quokka.js extension
@ndcouch Bless you man!
@@hazemgharib np buddy!
Awesome video! I am wondering which plugin did you use for showing console log output inline right next to the log function?
Ever found it?
@@GhostlyDilemma nope, still looking for it
Googled a few minutes and found Quokka.js which looks pretty much like the one used in the video, hope I could help :3
@@GhostlyDilemma I believe that's exactly what he was using in the video. Thanks a lot for letting know!
0:22 Hey Vsauce my name Jeff