New Series! Code this 💪, not that 💩. Learn how to write solid modern JavaScript and avoid bad code from the olden days. angularfirebase.com - Source github.com/codediodeio/code-t...
Пікірлер: 2 400
@Fireship5 жыл бұрын
The await is over! The async/await video I promised is here kzbin.info/www/bejne/rJ-WpaBmptqip6c
@panqmufin5 жыл бұрын
Hi! Awesome video!, Learned a lot. I just wanted to know, which code editor are you using?
@Gh0stl3y5 жыл бұрын
Love this video, it helped me fix up some of my old code.
@ryokuhasu96995 жыл бұрын
holy crap this is useful for modding the new RPG Maker Engine since it's in JS.
@optimusprime94565 жыл бұрын
Also interested about code editor...
@Fireship5 жыл бұрын
VS Code kzbin.info/www/bejne/q2OUiJKqm7WJqLs
@jeromesnail4 жыл бұрын
At first I was like "I can't think of anything this video could teach me". After two minutes "I don't even know how console logging works..."
@xenithmusic30294 жыл бұрын
Print()
@squidinc43764 жыл бұрын
big same
@DailtonR3 жыл бұрын
LITERALLY
@Jack_Vickers3 жыл бұрын
It's videos like this that remind me to never get comfortable with how I code, and to look at the specs for even the most simplest of code.
@phoexer3 жыл бұрын
This comment is how we all reacted apparently.
@yandodov5 жыл бұрын
console.table() --- mind blown
@addictzz5 жыл бұрын
Super mindblown. Spent hours to convert JSON to csv table and turns out there is a way to instantly do that.
@whatamievendoing5 жыл бұрын
Read this and it will be much more difficult for the console to surprise you developers.google.com/web/tools/chrome-devtools/console/api
@seanadamson76405 жыл бұрын
😲😲
@yuli19705 жыл бұрын
===*
@Nomadvicky5 жыл бұрын
yeah really don't know whether this ever exists......
@vitamin_ce4 жыл бұрын
Fireship : So we're going to parse the arguments in it.... Me : Looses focus for a bit Fireship : So yeah that's how you make Minecraft with JS
@iminni34594 жыл бұрын
fireship*
@mohammedameer77833 жыл бұрын
R/woooosh
@factsandmyths33013 жыл бұрын
@Phương Nguyễn r/wooosh
@heroslippy66663 жыл бұрын
xD i remember that.
@35volts523 жыл бұрын
Phương Nguyễn kzbin.info/www/bejne/g3LPhJ2qrd5ol80
@andyyuan93383 жыл бұрын
It's a whole new level of console.log!
@bcbrito3 жыл бұрын
Show kzbin.info/www/bejne/iIKYeImibdFmkMk
@AdlejandroP3 жыл бұрын
Undefines
@thecashewtrader33282 жыл бұрын
Yes
@kevinzunigacuellar2 жыл бұрын
Mind-blowing
@mihutz985 жыл бұрын
Code not this that
@gigi12gigi125 жыл бұрын
I came here only to say this.
@joe-un1ky5 жыл бұрын
Don't dead open inside
@ganaraminukshuk05 жыл бұрын
I clicked on this video just to see if anyone made this comment.
@jakeyb93864 жыл бұрын
Good man.
@Assassunn4 жыл бұрын
var _that = this;
@perfectwebsolutions5 жыл бұрын
00:48 how to use console.log 02:39 Object Destructuring 04:00 Template Literals 06:09 Spread Syntax 08:20 Loops 10:21 Async/Await
@Fireship5 жыл бұрын
Thank you for this :)
@sal975 жыл бұрын
@@Fireship I have a question: using reduce(), map() and filter() isn't 3 time slower than using a for loop? Especially with larger array/objects
@lukor-tech5 жыл бұрын
YT needs a bot for every instructions video to do this.
@RemcoPeggeman5 жыл бұрын
Probably not exactly three times slower because of engine optimizations, but you are correct, it is slower. That is one of the trade-offs that you as a developer should make, most of the times the improved readability is worth the performance decrease. If the reduce/map/filter structure is fast enough, great! If not, then it is time to optimize, otherwise it would be premature optimization.
@infectedburrito5 жыл бұрын
Code not this that
@yunusdurdygulyyew92704 жыл бұрын
This is depressing and motivating at the same time
If this were to be added to the video description, then KZbin would automatically display this structure in the video progress bar.
@quintencabo3 жыл бұрын
No you need to add 00 - Start aswell
@iangorham22473 жыл бұрын
Not the hero we deserve, but the hero we need right now
@dheepankarthiksworld64193 жыл бұрын
Add a 00:00 to the top of the list. Add the name as Intro
@AlejandroVivas5 жыл бұрын
Shit, I just realized I don't know nothing about JS.
@deathbydesire98325 жыл бұрын
Thanks I thought I was the only one
@mohammadoulabi42125 жыл бұрын
me too wew
@davidmardav5 жыл бұрын
Use ESLINT.
@peaceforhumanity61565 жыл бұрын
lol
@brandongonzales96875 жыл бұрын
That's a double negative, so that means you must know something about JS!
@94299636545 жыл бұрын
"I can do a whole video on console logging" Please do!!
@gradientO4 жыл бұрын
He did
@Tiritto_4 жыл бұрын
@@gradientO He did a video about console logging. We want him to console log the video.
@BlueskyFR_4 жыл бұрын
This is more a guide on how to use the latest JS features than a good pratices tutorial.
@BlueskyFR_3 жыл бұрын
@@njpromethium xD
@bill0x2a3 жыл бұрын
@@njpromethium you say that but I totally would lol
@botondhetyey1593 жыл бұрын
@@njpromethium It's not like that extra 5 seconds is not worth the big glowing red error message, so I actually notice it
@brianjones36432 жыл бұрын
@@botondhetyey159 You can also use console.error or console.warn. They add a little bit of color and make the console messages a lot clearer and you don't have to spend time on styling the console log
@madhououinkyoma Жыл бұрын
@@bill0x2a I watched and actually spend a good 10 minutes making a little message for my team
@magne60493 жыл бұрын
9:23 It should be a disclaimer that running the for-loop on orders once (in the code he advises against) is faster than iterating orders 3 times using orders.reduce, orders.map, and orders.filter. If orders is a huge array this could significantly impact performance, and then the for-loop would actually be an optimisation.
@fort1Z3 жыл бұрын
The advanced way should be a composition.
@magne60493 жыл бұрын
Timo M Yes, it should show chaining too, but even then it will be potentially a lot less performant than the simple single for-loop. Unless you are using Lazy.js or similar, of course.
@johndaveomandam95563 жыл бұрын
How about .forEach?
@magne60493 жыл бұрын
John Dave Omandam forEach is same as regular for-loop, since forEach is basically just syntactic sugar for convenience.
@softwarelivre23893 жыл бұрын
@@magne6049 forEach creates overhead because of the new scope in the call stack, though.
@tehdave1924 жыл бұрын
Another thing to keep in mind at ~10:15 is that you're now doing 3 loops compared to one loop. At some point you have to wonder whether you want to give up runtime for readability, because the for loop is definitely going to be faster. It doesn't matter when you have one record, but if you have an array of multiple hundreds of thousands of records if you're running a batch or an import of something, it is going to make a difference if you reduce, filter, and map, or just do one for loop. Technically you could also just do it in one reduce function.
@alexschlake97015 жыл бұрын
A lot of valuable information in here, thanks so much. Not too basic, but also not confusingly high-level. The console table, "Oh that's sexy"
@ihavetwofaces4 жыл бұрын
Unironically liked, commented, and subscribed. Amazing quality. Extremely informative while concise. Thank you!
@HawkwardAlaskan3 жыл бұрын
I watched your video on Async Await (in the future from this video's perspective) and I whole heartedly agree, even as one just starting to learn Javascript. For a month I was getting tired of all of the thens, THEN I found your Async Await video and boy oh boy, the game changed. I'm happy to have learned it from you early on rather than building lots of habits against it. Thank you for helping me get started on a good foot, and I love your teaching methods. Straightforward and zero filler.
@puargs5 жыл бұрын
Please be very careful when condensing traditional loops to functions like map and filter... You can wind up running your loop several extra times, or in many cases dozens of extra times - per function call. It's often the case that a map or filter operation will be used by someone and re-run per element thousands of times on a single page load or interaction, and they'll even let it run on the UI thread... Concise code is good, and I like a lot of your recommendations but please exercise caution with convenience/style in the loop category. I see probably 3-4 times a month places in our prod code base that can be improved in execution time by orders of magnitude. We're talking seconds of wait time in production code used by tens of thousands of people daily. It's probably my number one pet peeve, wasting millions of cycles on fancy one liners. That's just my one crticism; it's not "💩" code to use manually indexed loops. It's usually the best solution.
@amdphenom925 жыл бұрын
I was wondering the same thing, it adds a lot of unnecessary looping especially if it's a big array just for syntactic sugar. If using a single function it makes a lot of sense but not if we are using map, filter and reduce all at the same time.
@Keno_jm5 жыл бұрын
Yup my thoughts exactly. Traditional manual loops have been tested to be the most performant method in JS even if they're not one-liners.
@Fireship5 жыл бұрын
You're right, they are convenience methods because you often only need to solve one problem when looping, should have made the performance part a little more clear.
@technoparty1235 жыл бұрын
I exactly had the same reaction and concern when I saw that part and checked the comments if anyone else mentioned it so I can thumbs up their comment
@puargs5 жыл бұрын
Let me be clear though: your videos are great, and I (along with others) appreciate the tremendous work put into them. So thank you! But we wouldn't be programmers without a little peer review ;D
@sleeplessdev72045 жыл бұрын
Most "pro" tip videos are pretty obvious syntax sugar in ES6; But I actually learned some cool stuff from this one! I can use console.table to print formatted arrays?? "Woah!" I can add inline styling to console.logs?? "Whaaattt!" I can use template literals to automagically destructure function parameters??? "Mind BLOWN!!" Great video!
@CottidaeSEA3 жыл бұрын
I think it's nice even if it's just syntax sugar, because I notice that there are many changes in languages that people simply don't know of.
@loobakaer23 жыл бұрын
I've been learning JS for roughly a year now and this video seriously blew my mind, wish that I'd seen this sooner.
@danj888882 жыл бұрын
same reaction 🙃🙃
@blackcitadel372 жыл бұрын
Ugh
@faus585 Жыл бұрын
@@loobakaer2 saw this early on in learning and tbh I don't understand it fully LMAOO
@carlmeyer963 жыл бұрын
Hey! Just want to say this is an awesome video! I know most of the things in this video but its great for a refresher or to send to other devs. Love your presentation and you make it really quick and informative. Kudos!
@TheXBoy54 жыл бұрын
Thumbnail: "Code This, NOT That" My brain: "Code NOT This That"
@TheXBoy53 жыл бұрын
@@HazemElsawy thumbnail
@horseoperamarker3 жыл бұрын
@@HazemElsawy thumbnail
@mariocamspam723 жыл бұрын
@@HazemElsawy thumbnail
@therealslimastolfo3 жыл бұрын
thumbnail
@user-hk3ej4hk7m3 жыл бұрын
Don't dead open inside
@TwinFeats5 жыл бұрын
Excellent video! I've been a JS developer for 20 years, and so I learned a ton from this. :) As an old-timer, I do have one comment on some of the efficiencies here: I prefer code clarity over code brevity. Shorter code is not necessarily easier to understand, especially for someone who is not yet a JS expert. So some of the tricks you showed I will absolutely be using, but others I won't just because - to me - they aren't as clear as what they are replacing. :)
@Victor_Yeah5 ай бұрын
code clarity over code brevity!! marvelous💯💯
@RonanConnolly4 жыл бұрын
Wow, I had no idea about: - console.table - console.log({propertyName}) - CSS style in console.log Thanks for the tips!
@hariyapa3 жыл бұрын
for me, 1st and 3rd
@hariyapa3 жыл бұрын
@@byronchamorro8826 thanks byron
@deepakpandey94063 жыл бұрын
You got to learn a lot.. 😂
@samuelbaird49832 жыл бұрын
Console.table actually seems useful
@BuddyPupper1174 жыл бұрын
For spread syntax keep in mind that it only shallowly creates a new object. If you have deeply nested variables those are copied by reference, so to keep immutability with a deep object you can do, var x = JSON.parse(JSON.stringify(some_obj)); Not sure of the time cost, but it’s an easy way to maintain immutability.
@aspected4 жыл бұрын
I swear I'm gonna end up adding all your videos to my helpful web development playlist. These are so handy.
@ycmjason5 жыл бұрын
Very nice video! But I find the Object.assign bit misleading. So I decided to comment here to clarify. In the video, he said instead of mutating an object, we might want to create a whole new object. Then he talked about Object.asign and said that object spread is just a syntactic sugar. This might mislead you to think that Object.assign will create a new object. But in fact, it doesn't. It mutates the first object in the arguments. And the object spread is only a syntactic sugar for Object.assign({}, ...), not for the whole Object.assign function. I hope this will clear things up. At last, thanks again to the creator for this informative, concise and easy-to-follow video!
@Fireship5 жыл бұрын
Well explained, thank you for this 👍
@VipulAnand7514 жыл бұрын
Creating a copy of an object, which then can have alternative values. Is JSON parse the stringify-ed original object stored as new variable, achieves it?
@xAstericks5 жыл бұрын
First thing I want to say, the thumbnail for this video had some "DON'T DEAD OPEN INSIDE" vibes
@prasadlahane54864 жыл бұрын
kzbin.info/www/bejne/nWqcqpt9Z9KMm8U here you go
@samirdoncic63954 жыл бұрын
I'm amazed, I just started to learn JS, I cannot wait to come home from work tomorrow to start watching all your videos and test your examples. Thank you very much.
@aboxinspace4 жыл бұрын
Dude you're an awesome instructor! Def subscribing. This video is probably gonna save my life, working an intership as the only other programmer besides my boss and not knowing much about JS Promises. lol
@maxosall69725 жыл бұрын
I just discovered that there is - actually - a lot to learn about Javascript! Many thanks
@tstuart96365 жыл бұрын
I feel like i finally understand how to write JS for almost any type of project, but this video helped me realize I got a lot of work to do in terms of writing more efficient and clean code.
@kumarvs664 жыл бұрын
You just delivered what's need to be delivered. Straight and Accurate. Bravo 🙏
@PayneDeathz2 жыл бұрын
That spread syntax and template literal is something that I have used for months now after watching this video! Glad I subscribed a long time ago!
@susannnico10 ай бұрын
Investment in stocks is a great way to invest your money. The team is constantly checking the market for changes and make sure that you are always informed about the best time to invest. As a result, I have made more money than ever before, and I don't have to manage my portfolio on my own! Invest in stocks, it's worth it!
@lailaalfaddil738910 ай бұрын
That's great! may I ask who's your portfolio manager?
@susannnico10 ай бұрын
*ROCHELLE DUNGCA-SCHREIBER* is my portfolio-coach, I found her on Bloomberg where she was featured, I looked up her name on the internet. Fortunately I came across her site and reached out to her, you can verify her yourself.
@gunnerandersen46343 жыл бұрын
the console tips are awesome, I just want to say the more you know the better, but dont always use everything you know. Sometimes you might want to keep things more verbose but more understandable, but this is always something to mind about each case! Love the video btw
@karimnaufal97923 жыл бұрын
Priceless man! The kind of things that you would never know by reading the doc, does js even have a doc, never seen it lol. thank you, thank you!
@sanswee63964 жыл бұрын
Those stuffs are just marvelous and the way you wrap it up in minutes is just mind-blowing . .
@tuqirehussain5 жыл бұрын
Really good video, thanks for making it! A bit of my own commentary. Personally I'd highlight `push` on arrays morphs the original array whilst the spread syntax creates a new array, therefore the spread syntax can be significantly slower. I think use cases exist for both. Object assign will morph the first argument, which I don't think is made super clear. Although array methods like filter, reduce and map are syntaxally really clean, I have found them to be significantly slower than for loops when working with large arrays. Again I think use cases exist for both. Besides that really awesome vid. Thanks for sharing!
@avi125 жыл бұрын
I love how that while explaining the code, for each sentence you hit Control+Z
@EpiDot524 жыл бұрын
Ohhhhhh! I was wondering about that! That's so clever.
@sarvagya-sharma4 жыл бұрын
Yeah this guy is like genius
@tareiknetro3154 жыл бұрын
Best video/production/script/everything ever. Really cool, easy to understand but fast and straight to the point. Checking out the rest.
@ouvie2 жыл бұрын
00:19 being rickrolled in a JavaScript tutorial is one of the last things I would imagine happening
@Philson4 жыл бұрын
So much new modern stuff. I used to write a whole bunch of archaic code, since I come from the C/Java world.
@chillmarko4772 жыл бұрын
Same bro.
@nathanmackinnon54064 жыл бұрын
Good video. It's worth noting, by awaiting each function call like that, you are running all three functions synchronously. You can run them all in parallel by using Promise.all(), so the result would look like: const [first, second, third] = await Promise.all([random(), random(), random()])
@tyler44752 жыл бұрын
These videos are changing my life! Things I never thought of starting to learn coding.
@ericvaneldik73313 жыл бұрын
Really nice tips, the console logs styling was new to me. As for the good practice, I really love it, however the bad practice is sometimes needed if you need to code to work in older browsers (like ie11) or webviews in windows applications.
@agustinlavalla88924 жыл бұрын
Amazing lesson! Thanks! I'm shocked about console posibilities. I've realized I've always debugged in a wrong way
@adammorait74294 жыл бұрын
This kind of video es exactly what I was looking for, sometimes you find interesting videos or videos explaining the same stuffs again and again but yours is more than interesting... it's useful if you want to make a step to a higher level in javascript. Thanks :-)
@atomicpx Жыл бұрын
This is so amazing! I didn't know about how to send data to tables and even style it in the console. How cool!
@ihavetwofaces4 жыл бұрын
When you playing checkers and someone breaks out the 3D chess board.
@jesucristoesteban9085 жыл бұрын
Please make the await async video, please. Thanks!
@somedooby Жыл бұрын
I love the short comedic clips that you insert into these
@nachannachle27064 жыл бұрын
Oh my Godness! If this isn't BEAUTIFULLY written and efficient code, I wonder what is. Best video I have seen in YEARS of learning programming.
@martinflogaus85775 жыл бұрын
You, Sir... you deserve a medal! I'm a junior FE Dev and you just blew my mind JS :D
@sebasn67513 жыл бұрын
1:43 Instead of using [ ], use { }. And instead of "index 0, 1, 2" it will display the actual names of the objects.
@abimaeelmouraa2 жыл бұрын
Wooow!!! Those tips about console was really useful!! Thank you! I'll never forgot this!😃
@Fingolfin19844 жыл бұрын
I didn't know that template literal function magic... I saw that been used in styled components, but didn't realized you can just use it that way. Great tips!
@sivuyilemagutywa52865 жыл бұрын
thank you, you are the best instructor on youtube
@brunobarretocarvalho23155 жыл бұрын
awaiting the async/await video. HAHA
@twistedsim5 жыл бұрын
at least you can live your life while waiting ;)
@manashejmadi5 жыл бұрын
line 1: await referenced before async keyword
@brunobarretocarvalho23155 жыл бұрын
hahaha you got me!
@wojtek93955 жыл бұрын
I promise you will get it
@manashejmadi5 жыл бұрын
+wo997 promise unresolved
@dianakalstein364411 ай бұрын
Thanks to this video, I've finally grasped the entire concept of async await. Great explanation! :)
@masroorahmad95204 жыл бұрын
Thanks alot !!! Explanation is so expressable and very worthful information in short span of time.
@TheLollercaster4 жыл бұрын
11:05 - oh my god, this is perfect! :D
@BlueProgamer2123 жыл бұрын
i like how const {} betrayed the "with" keyword
@FromRootsToRadicals Жыл бұрын
Oh hell great vid! I did not know about formatting the debugger like this.
@altaccount6484 жыл бұрын
Over five years. Yet, you sir have taught me way more in twelve minutes.
@avi125 жыл бұрын
9:32 The disadvantage of splitting for loop into 3 higher-order methods, is it that each of these methods has a complexity of O(n), a total of O(3n), while the previous, traditional for loop, or even a higher-order forEach(), has a complexity of O(n)
@codesymphony Жыл бұрын
3n is still O(n), but yes c style is always more efficient
@kazaakas5 жыл бұрын
10:16 This type of stuff is nice on front-ends and/or for non-hot parts of code, but it should be known that on the backend it's not recommended if it regards the main workload of your code. In practically every multi-paradigm language loops result in much better performance than functional programming styles (even though FP is awesome). A function call and new variable initialization is a very small performance overhead, but it adds up much quicker than you would think with code like this.
@thegabrielcho3 жыл бұрын
Underrated comment.
@swetabjahazra80503 жыл бұрын
This channel posts some of the best javascript tips and tricks.
@lucasmelo6258 Жыл бұрын
brooo, this video is gold. Thanks man, you are literally helping me feed my kids.
@christophbuhler67315 жыл бұрын
For large JS apps: - The structure of your code is way more important when it comes to writing 'good' JavaScript. - The mentioned features are not necessarily 'best practices'. You don't need async/await if you are working with observables.. - Styling the console output with css sounds like a terrible idea to me because debugging code should be temporary, my little picasso ;). I recommend debugging with the console like this: console.log('2 save item', item); This way, you can locate your debugging code easily and provide some meaning instead of just throwing out variables. Also you can add a number to check if your code runs in the right order (async code..).
@Fireship5 жыл бұрын
Good points, thanks! I agree 100% with your first one. I think you meant Promises (not Observables) on the second point, which I encounter in every project and async/await truly boosts productivity and readability.
@christophbuhler67315 жыл бұрын
@@Fireship Thanks for the reply, I like your channel a lot! I did mean observables. In all our reactive applications we are using 0 promises and 0 async/awaits. It's just one paradigm of handling async code of many (imo inferior to observables). I agree with you that async/await is way better than promises which in return are way better than callbacks..
@LukePighetti5 жыл бұрын
Point 2 isn't really a point, If you're working with observables you aren't working with promises and therefore async/await is not an option. If you're working with promises async/await is definitely best practice in 2018.
@TechWithMikey5 жыл бұрын
I would recommend debugging within your IDE if possible or using breakpoints, than using console.log's all over the place
@LukePighetti5 жыл бұрын
when I'm writing tests I always use console.log() because they don't stop the tests and show data when you run the test.
@shaunb5 жыл бұрын
You made me feel better about being a JavaScript developer lol. Thanks for the tips!
@Fireship5 жыл бұрын
Best place to be IMO
@dustbinsavesyou82835 жыл бұрын
What made you feel bad? The complexity of javascript? Or the existence of javascript itself? Because errors scare me, like really
@Gustavo-ye1ko5 жыл бұрын
Maybe the JS haters... they can be annoying sometimes.
@nixtoshi5 жыл бұрын
What's not to love
@erasmobellumat39733 жыл бұрын
Your channel is amazing! Your voice reminds me Joey Ramone, from Ramones. And this is not a bad thing, you rocks.
@its-probably_fine2 жыл бұрын
I turn into an explody-head emoji whenever I check out any of your videos! Thanks for BLESSING US with this channel!
@acloudonthebluestsky96874 жыл бұрын
2nd times watch this and still forgot almost everything, damn
@Killerbee-xh2bg4 жыл бұрын
lol me too
@cinilaknedalm4 жыл бұрын
probably coz most of it unecessary stuff developers add to make themselves look hot, whilst making unreadable code.
@acloudonthebluestsky96874 жыл бұрын
@@cinilaknedalm maybe because he talk too fast lol
@abidkhairy..38633 жыл бұрын
@@cinilaknedalm most of it is really usefull tho. I've been using it many times on my projects
@LuZ-vg6fy3 жыл бұрын
@@cinilaknedalm this. Making stylish Console log ain't really this useful, you use your ECP for debugging. And the async/await is "must-do" thing nowadays, unless you're not trying to make some legacy stuff while working with API.
@SoCreaty5 жыл бұрын
Amazing Video. How can guys dislike this if they are not interested in becoming a better programmer? LOL! I learned a lot. Thanks!!!!
@thelavishcoder25534 жыл бұрын
When talking about array concatenation you mentioned that `[].push` was the old way of doing it, but there is also [].concat() which is what babel does under the hood when using Array Destructuring.
@cedrics73744 жыл бұрын
The console logging part was awesome, when I wanted to find something easier I use to add lot's of ===> or ALL CAPS!!! But now I can use color codes which is amazing. There are definitely some gems in this video, thank you!
@RobertLeeuwerink5 жыл бұрын
Haha, .then() always reminded me of Dude where is my car. Cool tip about the console table, didn't even know you could do something like that
@Fireship5 жыл бұрын
Glad to hear I'm not the only one, haha
@murugans16235 жыл бұрын
Seriously ! One hell of a way of coding😎😎. Before this video i never knew that you can use css in console log(). Seriously thank you for that. Could you please do a video on cron jobs using firebase real-time or firestore database. async and await are the awesome things in the new JavaScript world. Seriously i wanna become pro member in your site. In any near future I ll become one. You're the most stylish and sexiest code developer I have ever seen. keeping doing this forever. There is a lot to learn from you.
@Fireship5 жыл бұрын
Haha, thank you for the suggestions. I'll big plans to create better content and more of it :)
@WagnerShimatai5 жыл бұрын
Go to Facebook and open the console. You'll see a CSS-styled warning message.
@GrandpappyLuke4 жыл бұрын
One other benefit to traditional for loops is the ability to return early. With a forEach you are required to execute the callback on each item.
@nothingnoone87523 жыл бұрын
Bruh you're kidding me with this console stuff. I showed this to my front end dev friends and _none of them had heard of it_ - you're a legend. Seriously this channel is next level stuff.
@neosahft5 жыл бұрын
Awesome video with nice flow and presentation. But two small reminders 1) loops sometimes are faster if you can do stuff in one loop rather than two one liners. 2) If you use await improperly you pause the async function. So you might lose parallel execution chances. You should've put these a side note or warnings for new students :P. otherwise awesome video.
@DanishAnton5 жыл бұрын
Could you give an example of 2? I never knew you could pause the async function improperly. In fact, I thought if you don't use await on an async function and you used the result, it would be undefined.
@neosahft5 жыл бұрын
Danish Anton check out this techbrij.com/javascript-async-await-parallel-sequence you can see what I mean, accidentally doing this is probable
@amit-5463 Жыл бұрын
@@DanishAnton Better late than never, for future reference: In the example he showed (11:43) the three executions are independent of one another, meaning the 3rd async call, for example, does not rely on the results on the 1st or 2nd asyns calls. Using 'await' as he showed there is essentially a sequential execution, we first await the first call, then we initiate the second call and await it, then the 3rd cal... etc. But if the calls are independent they can (and should) be executed in parallel for better performances, this can be achieved by first initiating all calls and then awaiting all 3 promises, or better yet, by using Promise.all()
@DanishAnton Жыл бұрын
@@amit-5463 Ahh, thanks
@KresimirYT5 жыл бұрын
Array methods like reduce, map and filter perform much slower than classic for loops. So keep that in mind when you have to process large arrays. For small arrays it doesn't make much difference and the code is prettier, but a classic for loop can be over 10 times quicker.
@marcelmokos5 жыл бұрын
I prefer readable code over discussable performance gain with preemptive optimizations. This was a case a few years ago but javascript engines of recent browsers are performing well with these methods. Future improvements are on the horizon as well. I believe one time for loop will be slower than the map, reduce or filter.
@koppresh4 жыл бұрын
Absolutely loved it!! Learnt alot of things
@abrilmarina4 жыл бұрын
This is great! I’d love to see a similar one for React
@k1ngjulien_5 жыл бұрын
Last time I was this early JavaScript was still called LiveScript.
@Fireship5 жыл бұрын
Haha
@hassanbaiga5 жыл бұрын
Its 2019 ? hmmm, seems legit, i won the shirt !
@Narkafet4 жыл бұрын
This is what Thor felt like in Ragnorok. Or space marines when they get a stim pak in Starcraft. I love it. Thank you for the Quality content/learning instruction.
@DirectusVideos Жыл бұрын
Great video! This is a good reminder for all devs, and looks like many of us learned something new. 💜
@fuckthedumbsh1t4 жыл бұрын
♪ never gonna turn around and.... desert you ♫ Damn it has been a while since the last time I was rick-roll'd.
@sudarshankj3 жыл бұрын
Using a single for loop is better in terms of performance, since using separate ‘reduce’ ‘map’ and ‘filter’ will internally cause the object to be iterated thrice. The old for loop still exists for a reason and should not be discarded without considering the use case.
@pebojote4 жыл бұрын
My mind just got blown! Thanks for the pro tips
@MaryamMaqdisi2 жыл бұрын
This is pure gold, thanks!!!
@NextBeack4 жыл бұрын
I can't keep up with what is going on in this video...Anxiety Intensifies!!!
@johnnyfreetanga55065 жыл бұрын
5:44 My head explodes here.
@AgusSutarom4 жыл бұрын
i know your feel LOL
@nadakidd4 жыл бұрын
Same here. In a million years I never would have thought to try that.
@dummypg61294 жыл бұрын
I'm a year late, but
@Wildenfree2 жыл бұрын
Trying to watch this at night in bed in the complete darkness before I go to sleep, and the switching between dark & light screens made me for sure turn this into a tomorrow endeavor.
@jamjam34483 жыл бұрын
Wow i never thought i could learn something new from this video. Thanks a lot.
@MsSomeonenew5 жыл бұрын
It seems to me "more readable" here means "far more obscure". Which the next guy reading your code will really love...
@dhkatz_4 жыл бұрын
What are you talking about? Everything is this video IS far more readable (although in some cases sacrificing a bit of performance). These are modern JavaScript features, use them.
@pmd1237774 жыл бұрын
I agree. Some of these tips are really great, but it seems like some people believe better code == shorter, denser code, forgetting that humans have to read code too.
@kyushirokun4 жыл бұрын
If your reaction to modern JavaScript features aiming to reduce errors like array index overflows and to simplify promises is "far more obscure", I wish you good luck lasting in this industry. Fun fact: people inheriting code I've written have actually commented that they now prefer using array methods over traditional for loops, go figure heh
@TastyTales7924 жыл бұрын
Man I'd love to see one of your code examples... :D Simplifying things by absracting away unnecessary details, and telling the engine WHAT you want to do rather than HOW you want to do things makes your code way more readable, and sometimes more performant as well, because V8 can do crazy optimizations when you let it.
@pmurpmur4 жыл бұрын
"Code Not This That"
@zael78484 жыл бұрын
This video is literally Fire!! Thank you!
@zumatorney26804 жыл бұрын
Watched your video yesterday and used this knowledge today thx a lot