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 😁🤗
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.
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
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!
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).
@@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 like all of your videos; they're all presented very nicely compared to other programming videos on RUclips. 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...
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.
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.
he mentioned that if your priority is speed only, then you should probably not use js. in most of the projects these minor 8 millisecond not worth fighting for. readability and maintainability is also important. these milliseconds does not translate to end user experience. instead invest in good cdn and server bandwidth. think about it, async await is a syntactic sugar, you can do same with pure callbacks. which save some milliseconds. which one you choose, majority of the time.
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
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.
> "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.
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. :)
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?
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).
overall the videos are fine, you just seem to like js to such an extent that you would probably sleep with it over your gf/bf... just because you say you're not bothered by people disliking stuff doesn't mean it doesnt show
lord, if you're going to be asinine and just make dumbed down no-analysis for performance then it's preferable not to comment on the matter, no one said "functions are slower than loops" , they said it's harder to grasp the cost of the function than those of the loops...
write as little code as possible seems like we falling for the same pitfalls of waterfall design in reverse, the main goal of a developer should be to write clear code for humans , not hide stuff under the smallest fraction of code possible....
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
@@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
This might be an unpopular opinion, but 99% of the time if I’m finding myself writing loops or iterative solutions, I’m not doing it in JS but giving it to the server and picking up the result with AJAX. I try to give the least amount of processing to the client as I can. I use JS purely for manipulating the DOM, not for data processing. My personal mindset and way of designing web apps is that data should be compartmentalized and given in chunks to the server so that the client has less chance of doing any trickery with it.
For anyone who wonders, his editor (Visual Studio Code) is able to instantly display results (e.g. next to console.log(...)) thanks to Quokka ( quokkajs.com )
1:37 "a lot less mental overhead" as long you don't code in Python as well, and you have to keep reminding yourself to write "e of arr" instead of "e in arr", as the "in" operator in JS has a different (and arguably less used/useful) meaning...
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.
Why are the nice code things often so slow? it's like the switch function instead of multiple else ifs or a function with multiple if and returns. Would like to know how performance was in the last filter object things. Maybe the complicated code is again the fastest with creating a new array, and push all wanted items in it with a for loop.
I wonder how many people of those who complain about performance of functional collection iteration in JS have actually come across a situation where the performance bottleneck has been the iterating. I suspect zero.
i did a leetcode problem with for of version and a for loop version for of solution was beating about 30% solutions on time, traditional for loop solution was beating about 70%+ solutions on time
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
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.
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!
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.
what extension did you used to show these results interactively ?
Quokka
Your videos are by far the best resource on programming . Keep up the good work 👍🏻🙏🏻
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
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.
Much cleaner than my pooCount algorithms.
Gotta keep the pooCount code clean
ruclips.net/video/rXZT-u5T1qQ/видео.html
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
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 like all of your videos; they're all presented very nicely compared to other programming videos on RUclips. 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...
Even in basic videos like this I'm able to pick up some tips and tricks here and there. Magnificent work Jeff
ruclips.net/video/rXZT-u5T1qQ/видео.html
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.
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.
p.s. I subscribed and smashed that notification bell :)
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`.
How can you make a video on looping without "while" loops?
I'm sure it's faster than forEach(), and probably more than for(-of-)
he mentioned that if your priority is speed only, then you should probably not use js.
in most of the projects these minor 8 millisecond not worth fighting for.
readability and maintainability is also important.
these milliseconds does not translate to end user experience.
instead invest in good cdn and server bandwidth.
think about it, async await is a syntactic sugar, you can do same with pure callbacks. which save some milliseconds. which one you choose, majority of the time.
I should be wrong but shouldn't babel bundles write a script more machine friendly
The video doesn't want to load for some reason :/
Same for me
I was having the same issue, RUclips's fault I think.
Me either :(
You're too early, try watching it at 360p for now :)
1+
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
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
What plugin do you use to show directly in the editor the console.log() output ?
What editor are you using?
what is your extension that run console.log immediately?
@Andrin Weiler if its atom then personally I write 'log' and then press tab
Do you know wich extension he used for emojis? the extension you mention is called Quokka
the callback for the sort method should be like (a, b)=>a-b, not ab. Am I correct?
Yes!
What’s “Hi” -“Hello”
Only for numbers, you can't subtract strings. But you can compare them and return 1 or -1 like this: `a < b ? 1 : -1`.
only legends know that the thumbnail is changed
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.
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
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. :)
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 !!
FYI: sort change the array that it is call on, so calling on a clone of the array is a good idea, for you coming FP folks :)
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!
Make a btech in 100 seconds video
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
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).
overall the videos are fine, you just seem to like js to such an extent that you would probably sleep with it over your gf/bf... just because you say you're not bothered by people disliking stuff doesn't mean it doesnt show
lord, if you're going to be asinine and just make dumbed down no-analysis for performance then it's preferable not to comment on the matter, no one said "functions are slower than loops" , they said it's harder to grasp the cost of the function than those of the loops...
you said code this, not that
but then you write your code with emoji
okkk.....
write as little code as possible seems like we falling for the same pitfalls of waterfall design in reverse, the main goal of a developer should be to write clear code for humans , not hide stuff under the smallest fraction of code possible....
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.
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!
Just thank you so much, more please from this
How do you get the emjoi's in your editor?
Did you find it?
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
6:52 isPoopy? These are the important questions a doge needs to know.
Use .slice(), not .splice()!
.splice() mutates, undermining your use of const and introduces mutations, which are generally undesirable.
This might be an unpopular opinion, but 99% of the time if I’m finding myself writing loops or iterative solutions, I’m not doing it in JS but giving it to the server and picking up the result with AJAX. I try to give the least amount of processing to the client as I can. I use JS purely for manipulating the DOM, not for data processing. My personal mindset and way of designing web apps is that data should be compartmentalized and given in chunks to the server so that the client has less chance of doing any trickery with it.
As an intermediate programmer, I must say .....
I have no fucking clue what you're talking about.
For anyone who wonders, his editor (Visual Studio Code) is able to instantly display results (e.g. next to console.log(...)) thanks to Quokka ( quokkajs.com )
1:37 "a lot less mental overhead" as long you don't code in Python as well, and you have to keep reminding yourself to write "e of arr" instead of "e in arr", as the "in" operator in JS has a different (and arguably less used/useful) meaning...
Nice video
Something about the firebase admin sdk would be nice
For some reason I read that as JavaScript poops
I almost called this video "JS Loops, not Poops"
*Holy shit was this useful😱😱😱, and definitely worth watching about a million times till I get every single word into my mind🤖😍😍😍!*
const arr = ["badger", "badger", "badger", "badger", "badger", "badger", "badger", "badger", "badger", "badger", "badger", "badger", "mushroom", "mushroom"]
Thank you.
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.
Why are the nice code things often so slow? it's like the switch function instead of multiple else ifs or a function with multiple if and returns. Would like to know how performance was in the last filter object things. Maybe the complicated code is again the fastest with creating a new array, and push all wanted items in it with a for loop.
0 dislike !! This is the power of great content. Thank you sir!! Love from India.
The video doesn't load???
I wonder how many people of those who complain about performance of functional collection iteration in JS have actually come across a situation where the performance bottleneck has been the iterating. I suspect zero.
I'm fairly sure that if you start overwriting for-of-loop behaviour, "easier to understand for the average person" is not what you achieve.
don't use forEach with asynchronous functions, you'll have unexpected surprises.
For-Loop is trash. Just uses map, filter and reduce.
also we have fill, Array(5).fill("Fireship"); //["Fireship","Fireship","Fireship","Fireship","Fireship"]
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 extension are you using to display a run preview alongside the code that's to be executed
emojis : 🤔🤔
i did a leetcode problem with for of version and a for loop version
for of solution was beating about 30% solutions on time, traditional for loop solution was beating about 70%+ solutions on time
How did you learn JavaScript?
Fori is too hard and complex. Let’s instead overwrite the system default iterator and provide our own implementation.
But what about the index value. Only simple for loop give you access to it. Right?
Sorry but sort changes the original array, it doesn't return a new array sorted. I'm a huge fan of your channel so I didn't expect to find that 😕
Very good as always, Will be helpful to train
Nice content, is there any place where I can see your vscode setup?
whats you VS code extension for console.log( ) show automaticly plz ?
What is the name of the editor you are using ?
Visual Studio Code
after learning array functions in modern javascript, I don't think external helper libraries are needed anymore
Why I need to use 'for of' or 'forEach' if standard 'for (let i=0; i < arr.length; i++)' is more faster?
You don't have to, it's just syntatic sugar to make your code easier to maintain and understand.
Because coders get bored and want new toys. Too much syntactic suger isn't very good for you.
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?
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
You probably won’t read this but how come no one does tutorials on using svg images they honestly suck using but you have to use them
Most of those milliseconds must be node overhead, there's no way a for loop like that takes the entire frame budget
Great work dude!
How in the world does he output the console right in his editor??
What was that Symbol.iterator? What use cases have symbols the docs are wierd? 🥺
while decremental is the fastest loop in JS, why not covered here is beyond me...
loops in javascript would be a LOT easier if there was a goto statement.
arr.map() is worse for performance since it creates another array with the values of the functions
well done video, but way to basic :/
thnx for all the videos You make
Why this guy doesn't speak slow. Not everyone is Shakespeare here 😂
Who is also only using emojis in his code examples after this video? :D
I'm a bit miffed that other methods *don't* use the object[symbol] thing
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.
Great video! How do you make these emojis?
what do you use? the compiler / plugin that has red and green thingy on the side, etc
Awesome as always , background music is
👌
What are you using that displays the console log results right next to the console log?
Love your videos, gotta put it on slow mode tho; you talk so fast!
What plug-in are you using to display the in line debugger values?
100% want more of this, please and thank you!a
It's great!
i had to pause at the faces/feces joke so i could laugh not and miss anything.
Jeff, what the music played? Tell me pls