JavaScript Loops - Code This, Not That
VloĆŸit
- Äas pĆidĂĄn 15. 01. 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...
- VÄda a technologie
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.
Even in basic videos like this I'm able to pick up some tips and tricks here and there. Magnificent work Jeff
czcams.com/video/rXZT-u5T1qQ/video.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.
Your videos are by far the best resource on programming . Keep up the good work đđ»đđ»
Loving these videos, so clear and concise. This pleases me.
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.
what extension did you used to show these results interactively ?
Quokka
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
100% want more of this, please and thank you!a
It's great!
Great. Every time I watch your videos I feels like I am noob. But your videos are really awesome advancing my current knowledge.
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`.
0 dislike !! This is the power of great content. Thank you sir!! Love from India.
these types of videos are my favorite. please do more)
Awesome as always , background music is
đ
I like all of your videos; they're all presented very nicely compared to other programming videos on CZcams. 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...
Very good as always, Will be helpful to train
We need more contents like this. đ
Performance Demo is lit đ„
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.
Just thank you so much, more please from this
I love your work dude!
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 âșïž
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.
Great work dude!
Awesome stuff man, thanks a lot
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
You improved me a lot.
You explained it well bro! đđ»
What plugin do you use to show directly in the editor the console.log() output ?
thnx for all the videos You make
one of the best js array vids on the internet lol
Nice content, is there any place where I can see your vscode setup?
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
The higher order function part is really conscise!
what extension do you use to preview the console output and the variable value on hover?
Old but gold!
What editor are you using?
Its so *easy* to *understand!* thi deserves the most *likes in the world*
Jeff, what the music played? Tell me pls
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
What extension do you use which shows you the value of variables and errors at the end of the lines?
Good video. More please.
Great video! How do you make these emojis?
What are you using that displays the console log results right next to the console log?
what do you use? the compiler / plugin that has red and green thingy on the side, etc
The video doesn't load???
What is the vs theme that you use ? Also the configurations like plugins you have used. I like them.
Excellent video, how do you do it? what program do you use
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?
@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..
What plug-in are you using to display the in line debugger values?
Is there a certain extension you are using that shows the text out to the right of your code that evaluates the line?
which extension you use to show the output preview per 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.
What addon do you use to see what is in the array?
What is that plugin/package that allows the log to show up next to the code
Jeff! You are awesome :)
What are the extensions and settings of your vscode
What extension are you using to display a run preview alongside the code that's to be executed
emojis : đ€đ€
How did you get timer to show?
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...?
How do you get the emjoi's in your editor?
Did you find it?
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).
What is the extension called that shows the output of a line?
p.s. I subscribed and smashed that notification bell :)
whats you VS code extension for console.log( ) show automaticly plz ?
so awesome channel. thanks bro
Whatâs the name of this plugin that output console.log directly on vscode?
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!
Much cleaner than my pooCount algorithms.
Gotta keep the pooCount code clean
czcams.com/video/rXZT-u5T1qQ/video.html
do you also do the graphics and motion design for your videos? or do you have a team or collaborator?
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?
I'm really loving your "Code This, Not That" series!
You could have added generators because it's very similar to iterators ;)
outstanding quality
Which theme are you using for your vscode
Which theme do you use in vs code ?
How do you get emojis on the editor?? đ¶
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.
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 theme do you use for VSCode?
So much of this is similar to Haskell, I love itđ
What was that Symbol.iterator? What use cases have symbols the docs are wierd? đ„ș
What are extensions you're using in your video? :l
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).
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.
how to artichect on firebase with real use case, say todoist app?
Why did i laugh at the spinning JS logo? I felt it was screaming event loop in my face đ
Oh snap, finally an Array.reduce example that makes sense!
May I ask, what tools are you using to type so fast?
What theme is he using during this video?
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
Nice video
Something about the firebase admin sdk would be nice
What JS IDE you use in this video?
what editor is it? and what theme is installed?
which program and addons is he using while programming?
Which texteditor is this? And what plugin do you need to display the output? Would make alot easier if I could see what the output will be without running it over and over again, looking for that console log and what not
He is using vs code and a plugin called Quokka
What IDE are you using.
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!