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...
- วิทยาศาสตร์และเทคโนโลยี
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!
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
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
th-cam.com/video/rXZT-u5T1qQ/w-d-xo.html
Your videos are by far the best resource on programming . Keep up the good work 👍🏻🙏🏻
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.
I like all of your videos; they're all presented very nicely compared to other programming videos on TH-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...
Great. Every time I watch your videos I feels like I am noob. But your videos are really awesome advancing my current knowledge.
0 dislike !! This is the power of great content. Thank you sir!! Love from India.
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`.
100% want more of this, please and thank you!a
It's great!
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.
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
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 !!
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 ☺️
these types of videos are my favorite. please do more)
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.
Great work dude!
Awesome as always , background music is
👌
what extension did you used to show these results interactively ?
Quokka
We need more contents like this. 😍
Performance Demo is lit 🔥
Just thank you so much, more please from this
I love your work dude!
Very good as always, Will be helpful to train
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.
Awesome stuff man, thanks a lot
You improved me a lot.
You explained it well bro! 🙏🏻
The higher order function part is really conscise!
Old but gold!
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.
I'm really loving your "Code This, Not That" series!
You could have added generators because it's very similar to iterators ;)
thnx for all the videos You make
one of the best js array vids on the internet lol
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).
outstanding quality
Jeff! You are awesome :)
Good video. More please.
Its so *easy* to *understand!* thi deserves the most *likes in the world*
so awesome channel. thanks bro
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
Nice video
Something about the firebase admin sdk would be nice
p.s. I subscribed and smashed that notification bell :)
What editor are you using?
So much of this is similar to Haskell, I love it😍
Subbed instantly.
Yes, more videos!!!
Nice vid!
Nice content, is there any place where I can see your vscode setup?
Video quality is unreal. Would be awesome to see data structs / algo.
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
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).
Oh snap, finally an Array.reduce example that makes sense!
*Holy shit was this useful😱😱😱, and definitely worth watching about a million times till I get every single word into my mind🤖😍😍😍!*
Why did i laugh at the spinning JS logo? I felt it was screaming event loop in my face 😂
I respect you man
What plugin do you use to show directly in the editor the console.log() output ?
Great video, you should do these kind of videos more often .
awesome video
Much cleaner than my pooCount algorithms.
Gotta keep the pooCount code clean
th-cam.com/video/rXZT-u5T1qQ/w-d-xo.html
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
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
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. :)
Excellent video, how do you do it? what program do you use
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
What is the vs theme that you use ? Also the configurations like plugins you have used. I like them.
Great video! How do you make these emojis?
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.
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.
@@victorlongon if I were working with huge datasets I'd use Spark, and there it's even more important to write code for humans.
@@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
@@AronFiechter btw, i totally agreed to what you wrote, specially the part about the style of code being less prone to error.
Straight fire
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
do you also do the graphics and motion design for your videos? or do you have a team or collaborator?
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
Love your videos, gotta put it on slow mode tho; you talk so fast!
Is there a certain extension you are using that shows the text out to the right of your code that evaluates the line?
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.
Jeff, what the music played? Tell me pls
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.
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.
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...?
First tutoring where i am watching it in 1x.
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!
What extension do you use which shows you the value of variables and errors at the end of the lines?
what extension do you use to preview the console output and the variable value on hover?
Jeff is still my favourite tech youtuber
Thanks bro
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.
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.
what do you use? the compiler / plugin that has red and green thingy on the side, etc
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.
What plug-in are you using to display the in line debugger values?
Quick comment: recently, Objects also begun to maintain the order of the keys they are passed, except if the key starts with a number. The number will go on top of letters.
thanks bro
May I ask, what tools are you using to type so fast?
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
great work anyway
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!
What are you using that displays the console log results right next to the console log?