JavaScript Pro Tips - Code This, NOT That

  Рет қаралды 2,550,152

Fireship

Fireship

Күн бұрын

New Series! Code this 💪, not that 💩. Learn how to write solid modern JavaScript and avoid bad code from the olden days. angularfirebas...
- Source github.com/cod...

Пікірлер: 2 400
@Fireship
@Fireship 6 жыл бұрын
The await is over! The async/await video I promised is here kzbin.info/www/bejne/rJ-WpaBmptqip6c
@panqmufin
@panqmufin 6 жыл бұрын
Hi! Awesome video!, Learned a lot. I just wanted to know, which code editor are you using?
@Gh0stl3y
@Gh0stl3y 6 жыл бұрын
Love this video, it helped me fix up some of my old code.
@ryokuhasu9699
@ryokuhasu9699 6 жыл бұрын
holy crap this is useful for modding the new RPG Maker Engine since it's in JS.
@optimusprime9456
@optimusprime9456 6 жыл бұрын
Also interested about code editor...
@Fireship
@Fireship 6 жыл бұрын
VS Code kzbin.info/www/bejne/q2OUiJKqm7WJqLs
@jeromesnail
@jeromesnail 5 жыл бұрын
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..."
@xenithmusic3029
@xenithmusic3029 4 жыл бұрын
Print()
@squidinc4376
@squidinc4376 4 жыл бұрын
big same
@DailtonR
@DailtonR 4 жыл бұрын
LITERALLY
@Jack_Vickers
@Jack_Vickers 4 жыл бұрын
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.
@phoexer
@phoexer 4 жыл бұрын
This comment is how we all reacted apparently.
@yandodov
@yandodov 5 жыл бұрын
console.table() --- mind blown
@addictzz
@addictzz 5 жыл бұрын
Super mindblown. Spent hours to convert JSON to csv table and turns out there is a way to instantly do that.
@whatamievendoing
@whatamievendoing 5 жыл бұрын
Read this and it will be much more difficult for the console to surprise you developers.google.com/web/tools/chrome-devtools/console/api
@seanadamson7640
@seanadamson7640 5 жыл бұрын
😲😲
@yuli1970
@yuli1970 5 жыл бұрын
===*
@Nomadvicky
@Nomadvicky 5 жыл бұрын
yeah really don't know whether this ever exists......
@perfectwebsolutions
@perfectwebsolutions 6 жыл бұрын
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
@Fireship
@Fireship 6 жыл бұрын
Thank you for this :)
@sal97
@sal97 6 жыл бұрын
@@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-tech
@lukor-tech 6 жыл бұрын
YT needs a bot for every instructions video to do this.
@RemcoPeggeman
@RemcoPeggeman 6 жыл бұрын
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.
@infectedburrito
@infectedburrito 6 жыл бұрын
Code not this that
@vitamin_ce
@vitamin_ce 4 жыл бұрын
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
@iminni3459
@iminni3459 4 жыл бұрын
fireship*
@mohammedameer7783
@mohammedameer7783 4 жыл бұрын
R/woooosh
@factsandmyths3301
@factsandmyths3301 4 жыл бұрын
@Phương Nguyễn r/wooosh
@heroslippy6666
@heroslippy6666 4 жыл бұрын
xD i remember that.
@35volts52
@35volts52 4 жыл бұрын
Phương Nguyễn kzbin.info/www/bejne/g3LPhJ2qrd5ol80
@andyyuan9338
@andyyuan9338 4 жыл бұрын
It's a whole new level of console.log!
@bcbrito
@bcbrito 3 жыл бұрын
Show kzbin.info/www/bejne/iIKYeImibdFmkMk
@AdlejandroP
@AdlejandroP 3 жыл бұрын
Undefines
@thecashewtrader3328
@thecashewtrader3328 3 жыл бұрын
Yes
@kevinzunigacuellar
@kevinzunigacuellar 3 жыл бұрын
Mind-blowing
@mihutz98
@mihutz98 5 жыл бұрын
Code not this that
@gigi12gigi12
@gigi12gigi12 5 жыл бұрын
I came here only to say this.
@joe-un1ky
@joe-un1ky 5 жыл бұрын
Don't dead open inside
@ganaraminukshuk0
@ganaraminukshuk0 5 жыл бұрын
I clicked on this video just to see if anyone made this comment.
@Snakeyb
@Snakeyb 5 жыл бұрын
Good man.
@Assassunn
@Assassunn 5 жыл бұрын
var _that = this;
@AlejandroVivas
@AlejandroVivas 6 жыл бұрын
Shit, I just realized I don't know nothing about JS.
@deathbydesire9832
@deathbydesire9832 6 жыл бұрын
Thanks I thought I was the only one
@mohammadoulabi4212
@mohammadoulabi4212 6 жыл бұрын
me too wew
@davidmardav
@davidmardav 6 жыл бұрын
Use ESLINT.
@peaceforhumanity6156
@peaceforhumanity6156 6 жыл бұрын
lol
@brandongonzales9687
@brandongonzales9687 6 жыл бұрын
That's a double negative, so that means you must know something about JS!
@yunusdurdygulyyew9270
@yunusdurdygulyyew9270 4 жыл бұрын
This is depressing and motivating at the same time
@bender7367
@bender7367 4 жыл бұрын
00:51 - Debugging with console.log 02:39 - Destructuring 03:59 - Template literals 06:07 - Spread syntax 08:19 - Loops 10:18 - async/await
@alexsamari5650
@alexsamari5650 4 жыл бұрын
Give this human a medal
@sebastiansimon7557
@sebastiansimon7557 4 жыл бұрын
If this were to be added to the video description, then KZbin would automatically display this structure in the video progress bar.
@quintencabo
@quintencabo 4 жыл бұрын
No you need to add 00 - Start aswell
@iangorham2247
@iangorham2247 3 жыл бұрын
Not the hero we deserve, but the hero we need right now
@dheepankarthiksworld6419
@dheepankarthiksworld6419 3 жыл бұрын
Add a 00:00 to the top of the list. Add the name as Intro
@BlueskyFR_
@BlueskyFR_ 4 жыл бұрын
This is more a guide on how to use the latest JS features than a good pratices tutorial.
@BlueskyFR_
@BlueskyFR_ 3 жыл бұрын
@@njpromethium xD
@bill0x2a
@bill0x2a 3 жыл бұрын
@@njpromethium you say that but I totally would lol
@botondhetyey159
@botondhetyey159 3 жыл бұрын
@@njpromethium It's not like that extra 5 seconds is not worth the big glowing red error message, so I actually notice it
@brianjones3643
@brianjones3643 2 жыл бұрын
@@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
@madhououinkyoma Жыл бұрын
@@bill0x2a I watched and actually spend a good 10 minutes making a little message for my team
@alexschlake9701
@alexschlake9701 6 жыл бұрын
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"
@9429963654
@9429963654 6 жыл бұрын
"I can do a whole video on console logging" Please do!!
@gradientO
@gradientO 4 жыл бұрын
He did
@Tiritto_
@Tiritto_ 4 жыл бұрын
@@gradientO He did a video about console logging. We want him to console log the video.
@RonanConnolly
@RonanConnolly 5 жыл бұрын
Wow, I had no idea about: - console.table - console.log({propertyName}) - CSS style in console.log Thanks for the tips!
@hariyapa
@hariyapa 3 жыл бұрын
for me, 1st and 3rd
@hariyapa
@hariyapa 3 жыл бұрын
@@byronchamorro8826 thanks byron
@deepakpandey9406
@deepakpandey9406 3 жыл бұрын
You got to learn a lot.. 😂
@samuelbaird4983
@samuelbaird4983 3 жыл бұрын
Console.table actually seems useful
@magne6049
@magne6049 4 жыл бұрын
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.
@fort1Z
@fort1Z 4 жыл бұрын
The advanced way should be a composition.
@magne6049
@magne6049 4 жыл бұрын
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.
@johndaveomandam9556
@johndaveomandam9556 4 жыл бұрын
How about .forEach?
@magne6049
@magne6049 4 жыл бұрын
John Dave Omandam forEach is same as regular for-loop, since forEach is basically just syntactic sugar for convenience.
@softwarelivre2389
@softwarelivre2389 3 жыл бұрын
@@magne6049 forEach creates overhead because of the new scope in the call stack, though.
@Philson
@Philson 5 жыл бұрын
So much new modern stuff. I used to write a whole bunch of archaic code, since I come from the C/Java world.
@chillmarko477
@chillmarko477 3 жыл бұрын
Same bro.
@tehdave192
@tehdave192 5 жыл бұрын
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.
@sleeplessdev7204
@sleeplessdev7204 5 жыл бұрын
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!
@CottidaeSEA
@CottidaeSEA 3 жыл бұрын
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.
@loobakaer2
@loobakaer2 3 жыл бұрын
I've been learning JS for roughly a year now and this video seriously blew my mind, wish that I'd seen this sooner.
@danj88888
@danj88888 3 жыл бұрын
same reaction 🙃🙃
@blackcitadel37
@blackcitadel37 2 жыл бұрын
Ugh
@faus585
@faus585 2 жыл бұрын
@@loobakaer2 saw this early on in learning and tbh I don't understand it fully LMAOO
@ycmjason
@ycmjason 6 жыл бұрын
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!
@Fireship
@Fireship 6 жыл бұрын
Well explained, thank you for this 👍
@VipulAnand751
@VipulAnand751 5 жыл бұрын
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?
@gunnerandersen4634
@gunnerandersen4634 3 жыл бұрын
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
@kumarvs66
@kumarvs66 5 жыл бұрын
You just delivered what's need to be delivered. Straight and Accurate. Bravo 🙏
@xAstericks
@xAstericks 6 жыл бұрын
First thing I want to say, the thumbnail for this video had some "DON'T DEAD OPEN INSIDE" vibes
@prasadlahane5486
@prasadlahane5486 4 жыл бұрын
kzbin.info/www/bejne/nWqcqpt9Z9KMm8U here you go
@avi12
@avi12 5 жыл бұрын
I love how that while explaining the code, for each sentence you hit Control+Z
@EpiDot52
@EpiDot52 4 жыл бұрын
Ohhhhhh! I was wondering about that! That's so clever.
@sarvagya-sharma
@sarvagya-sharma 4 жыл бұрын
Yeah this guy is like genius
@tstuart9636
@tstuart9636 5 жыл бұрын
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.
@sebasn6751
@sebasn6751 3 жыл бұрын
1:43 Instead of using [ ], use { }. And instead of "index 0, 1, 2" it will display the actual names of the objects.
@nachannachle2706
@nachannachle2706 4 жыл бұрын
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.
@maxosall6972
@maxosall6972 5 жыл бұрын
I just discovered that there is - actually - a lot to learn about Javascript! Many thanks
@nathanmackinnon5406
@nathanmackinnon5406 5 жыл бұрын
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()])
@Goofy8907
@Goofy8907 4 ай бұрын
6:15 I can respect someone who codes examples in Pokémon
@its-probably_fine
@its-probably_fine 2 жыл бұрын
I turn into an explody-head emoji whenever I check out any of your videos! Thanks for BLESSING US with this channel!
@brunobarretocarvalho2315
@brunobarretocarvalho2315 6 жыл бұрын
awaiting the async/await video. HAHA
@twistedsim
@twistedsim 6 жыл бұрын
at least you can live your life while waiting ;)
@manashejmadi
@manashejmadi 6 жыл бұрын
line 1: await referenced before async keyword
@brunobarretocarvalho2315
@brunobarretocarvalho2315 6 жыл бұрын
hahaha you got me!
@wojtek9395
@wojtek9395 6 жыл бұрын
I promise you will get it
@manashejmadi
@manashejmadi 6 жыл бұрын
+wo997 promise unresolved
@lodash_9
@lodash_9 6 жыл бұрын
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..).
@Fireship
@Fireship 6 жыл бұрын
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.
@lodash_9
@lodash_9 6 жыл бұрын
@@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..
@LukePighetti
@LukePighetti 6 жыл бұрын
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.
@TechWithMikey
@TechWithMikey 6 жыл бұрын
I would recommend debugging within your IDE if possible or using breakpoints, than using console.log's all over the place
@LukePighetti
@LukePighetti 6 жыл бұрын
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.
@aspected
@aspected 4 жыл бұрын
I swear I'm gonna end up adding all your videos to my helpful web development playlist. These are so handy.
@bean_frog4565
@bean_frog4565 9 ай бұрын
"Javascript is a programming language." Well said, couldn't have put it better myself
@tuqirehussain
@tuqirehussain 6 жыл бұрын
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!
@kazaakas
@kazaakas 5 жыл бұрын
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.
@thegabrielcho
@thegabrielcho 4 жыл бұрын
Underrated comment.
@martinflogaus8577
@martinflogaus8577 6 жыл бұрын
You, Sir... you deserve a medal! I'm a junior FE Dev and you just blew my mind JS :D
@swetabjahazra8050
@swetabjahazra8050 4 жыл бұрын
This channel posts some of the best javascript tips and tricks.
@aboxinspace
@aboxinspace 5 жыл бұрын
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
@TheLollercaster
@TheLollercaster 4 жыл бұрын
11:05 - oh my god, this is perfect! :D
@tareiknetro315
@tareiknetro315 4 жыл бұрын
Best video/production/script/everything ever. Really cool, easy to understand but fast and straight to the point. Checking out the rest.
@tyler4475
@tyler4475 2 жыл бұрын
These videos are changing my life! Things I never thought of starting to learn coding.
@BlueProgamer212
@BlueProgamer212 4 жыл бұрын
i like how const {} betrayed the "with" keyword
@SoCreaty
@SoCreaty 5 жыл бұрын
Amazing Video. How can guys dislike this if they are not interested in becoming a better programmer? LOL! I learned a lot. Thanks!!!!
@sanswee6396
@sanswee6396 4 жыл бұрын
Those stuffs are just marvelous and the way you wrap it up in minutes is just mind-blowing . .
@PayneDeathz
@PayneDeathz 3 жыл бұрын
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!
@MsSomeonenew
@MsSomeonenew 5 жыл бұрын
It seems to me "more readable" here means "far more obscure". Which the next guy reading your code will really love...
@dhkatz_
@dhkatz_ 5 жыл бұрын
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.
@pmd123777
@pmd123777 5 жыл бұрын
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.
@kyushirokun
@kyushirokun 5 жыл бұрын
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
@TastyTales792
@TastyTales792 4 жыл бұрын
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.
@fuckthedumbsh1t
@fuckthedumbsh1t 5 жыл бұрын
♪ never gonna turn around and.... desert you ♫ Damn it has been a while since the last time I was rick-roll'd.
@Fingolfin1984
@Fingolfin1984 4 жыл бұрын
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!
@ghostandgoblins
@ghostandgoblins 2 жыл бұрын
What I did was put on a 'rainfall on tin roof' video to play in the background at just the right soft volume. Also a video of a fireplace. Then watched this video as if you were telling us stories beside the fireplace in a cottage at the base of a steep valley on a rainy night.
@johnnyfreetanga5506
@johnnyfreetanga5506 5 жыл бұрын
5:44 My head explodes here.
@AgusSutarom
@AgusSutarom 4 жыл бұрын
i know your feel LOL
@nadakidd
@nadakidd 4 жыл бұрын
Same here. In a million years I never would have thought to try that.
@dummypg6129
@dummypg6129 4 жыл бұрын
I'm a year late, but
@NextBeack
@NextBeack 5 жыл бұрын
I can't keep up with what is going on in this video...Anxiety Intensifies!!!
@pmurpmur
@pmurpmur 5 жыл бұрын
"Code Not This That"
@keanubarnard5917
@keanubarnard5917 3 жыл бұрын
Thumbnail : code this not that , JavaScript. My brain : code not this that , JavaScript
10 ай бұрын
Man... I am learning JS on a academy. Every instance of a bad code in this video is the way they learn us to use. So I see the source of my frustration and confusion. Thanks! Now i need a lot of head rewiring to implement this.
@GeoffTheDeov
@GeoffTheDeov 5 жыл бұрын
I feel like I'm being shown forbidden knowledge
@brockobama257
@brockobama257 3 жыл бұрын
Each JS project I write makes me realize how poorly I wrote previous JS projects. This video made me realize they were all written poorly. Thank you!
@FozIrenics
@FozIrenics 2 жыл бұрын
i'm going to watch this video during my morning commute every morning for at least a week
@desongan9068
@desongan9068 5 жыл бұрын
what is you color theme, please?
@mingzhou2662
@mingzhou2662 5 жыл бұрын
vscode -> Store ->AtomTheme
@altaccount648
@altaccount648 4 жыл бұрын
Over five years. Yet, you sir have taught me way more in twelve minutes.
@TheHighborn
@TheHighborn 4 жыл бұрын
This is the kind of stuff that helps me not to fucking hate java script, but actually kinda start to like it
@atomicpx
@atomicpx 2 жыл бұрын
This is so amazing! I didn't know about how to send data to tables and even style it in the console. How cool!
@thelavishcoder2553
@thelavishcoder2553 4 жыл бұрын
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.
@him5726
@him5726 4 жыл бұрын
Everything i knew about console.log was crap
@Fireship
@Fireship 4 жыл бұрын
kzbin.info/www/bejne/gmmmdadnf5h3d9k
@joelrichardson624
@joelrichardson624 6 жыл бұрын
Its not 2019 tho
@pp52475
@pp52475 2 ай бұрын
At 10:09, by using reduce+map+filter you are increasing the complexity of the computation of x3: in the old (and ugly) flow of the for loop the data source is iterated once, in the other case 3. This is obviously in the world of theory... in practice I fully agree with your approach 😃
@zidrexandag06
@zidrexandag06 4 жыл бұрын
Watched this half a year ago without understanding the video, then I got into javascript frameworks and advanced js and finally understood what most what he says. Hahaha
@Nic-lp2id
@Nic-lp2id 6 жыл бұрын
Yeah you reduced a lot of Code lines, but i also think that it did not really make it easier to read. It is actually just less. Most of the time...
@kbreezy004
@kbreezy004 6 жыл бұрын
I find this is a very common thing when using JS. People like to get cute, then the readability plummets.
@marcadenexus
@marcadenexus 6 жыл бұрын
Not just JS; this goes for all programming languages.
@DanFletcher90
@DanFletcher90 6 жыл бұрын
Readability is subjective though. There was a point in your career when you were first learning and most programs seemed quite cryptic. Eventually, you get used to reading code and you feel familiar with what you're used to reading day-to-day. I think when languages introduce new syntax to make our lives easier there's always a bit of resistance at first because people have to get used to seeing it. I remember when arrow functions were hard for me to read, and spread, and destructuring etc. Now I prefer to read code that makes use of those syntactic niceties. It's also pretty hard to argue that async/await is causing readability to plummet.
@marcadenexus
@marcadenexus 6 жыл бұрын
So is the beauty of a woman; subjective. Different per culture as well. And yet ... I think we all can agree that in general Margot Robbie is a hell of a lot more attractive than Rosie O’Donnell. Yes you are right, you can get used to syntax that is 'more efficient'; but readability implies code you don't *have* to go through a period to get used to syntax, to be able to understand what it does. It implies even if you don't know much about the code, you can still sort of understand what the code does. And a for() loop is much more common across languages and easier to understand than a map() function. It's like replacing a common word like "You" in a Harry Potter book with "1" and "Me" in with "2" ... confuses the shit when you read it, until, yes, you get used to the syntax .. and hey you've saved some ink and space!
@DanFletcher90
@DanFletcher90 6 жыл бұрын
"readability implies code you don't have to go through a period to get used to syntax" I don't really agree. Team standards evolve over time. There's always going to be something new to get used to. Readability in my opinion (and it's just my opinion, there's no science to this), is when you get understand what code is doing without having to think much about it. "getting used to syntax" is just an awkward period we all go through any time we're learning something new. Like a new language for example. Having methods on arrays/collections/lists or whatever data type is used in your language of choice is not new either. What language doesn't have `map` or the equivalent as part of its standard library or at least as part of a commonly included library? PHP, C#, JavaScript, and Python are 4 big ones that I know for sure have this. Pretty sure Java has supported lambdas for years now too hasn't it? Obviously, all of the big FP languages use this. I doubt the for loop is much more common than you think especially if we're talking about the most common languages that people actually use. For loops are less complicated. When comparing a simple iteration, sure, it's less verbose to just use a for loop. After that loops are way more convoluted and harder to parse. There's far too much cognitive overhead and state to hold in your head versus a map or a reduce which has no state and reads left to right like English. You don't have to jump up and down, or in and out to understand a chain of multiple maps and reducer functions. I think where these collection methods really shine is in situations where you would traditionally write nested loops. Learning how to map, reduce, pluck, flatten, filter, etc well pretty much means when you're doing a lot of work on a collection you'll never have to nest more than one indentation ever again. The less indentation and temporary state inside of a function the easier it is to read in my opinion. Imagine working with streams using loops - yuck.
@nickschmitt8594
@nickschmitt8594 5 жыл бұрын
I did most of this within FreeCodeCamp without knowing what it was for. This video proves to me when things are explained for their purpose, the mind absorbs them much easier. Your simple examples on reduce/map/filter, for example, were much easier to understand that the exercises where I didn't actually understand what the processes were for.
@riverofcustard5027
@riverofcustard5027 3 жыл бұрын
You can see why modern JavaScript just keeps attracting developers. It's so elegant and pretty, sprinkled with synthactic suggar.
@АрсенийИванов-ш8г
@АрсенийИванов-ш8г 2 жыл бұрын
One more note about loops vs array methods. They are not equal at all. Array methods are FUNCTIONS while loops are syntax. And that puts a lot of restrictions. For example, you can't use async inside array methods. But you can use them inside for loops. I'm pretty sure there are a lot of other small but at the same time huge differences.
@dianakalstein3644
@dianakalstein3644 Жыл бұрын
Thanks to this video, I've finally grasped the entire concept of async await. Great explanation! :)
@QuesoCookies
@QuesoCookies 5 жыл бұрын
There's a lot of talk about performance issues with too much looping, which I can see are valid concerns, but I think readable code is severely underrated. There's the adage that you shouldn't need to leave comments in your code if you've written good code, but how many people have written bad code and then forgotten to comment about what it's supposed to be doing because they tried to nail the most optimal solution on the first try? If the code is "bad" insofar as it's using built-in looping methods such as map and filter that are causing performance issues, but it's easy to read because the coder used those methods, it's far easier to optimize on a case-by-case basis as it's discovered that those methods aren't the best solution. If you have twelve filter loops and only one of which is accessing too much data for that solution to be optimal. You can change one line of code to an indexed for loop and leave the others alone. But if you're experiencing issues with a giant for loop trying to do 12 things and the original coder left no notes, you'll spend a lot of time just trying to read it even before you discover which part is causing performance issues, let alone designing a solution to the problem. Rapid, readable, fixable code > perfectionistic, obfuscated code.
@aindaecedo
@aindaecedo Жыл бұрын
A coffe for the great content of the channel
@Sierra410
@Sierra410 5 жыл бұрын
"How to write even slower JS"
@dhkatz_
@dhkatz_ 5 жыл бұрын
In 99% of cases, readability and maintainability is greater than performance.
@Sierra410
@Sierra410 5 жыл бұрын
Performant code doesn't mean unreadable, and vise versa.
@SkywalkerWroc
@SkywalkerWroc 5 жыл бұрын
Whenever I see someone calling const a variable I get triggered (and it's all too common in JS world >_
@giannistek1
@giannistek1 5 жыл бұрын
But constants are basically variables which cannnot be reassigned tho. Sure they have a different name though so its better to call them a const or constant
@RayHorn5128088056
@RayHorn5128088056 5 жыл бұрын
Everything old is new again... Very nice old school (very old school) debugging techniques in this video. Console debugging is obviously what one has to do when one cannot use a real Debugger but it is also ancient which means very old and not at-all modern or new. Kudos.
@ArcaneVortex
@ArcaneVortex 4 жыл бұрын
This was somehow quite satisfying to watch while still making me look like a little child with a "wooooah" stunned look.
@wwt17
@wwt17 5 жыл бұрын
Could you please speak faster? I was getting bored waiting for you to finish ideas... ;)
@siddhus4u
@siddhus4u 5 жыл бұрын
Watch it at 2x
@royhonders
@royhonders 5 жыл бұрын
This is already fast
@wwt17
@wwt17 5 жыл бұрын
@@royhonders I was actually just poking fun at his speed cos he was way too fast.
@h3ckphy246
@h3ckphy246 3 жыл бұрын
9:29 Wow, you say I should loop my array 3 times instead of 1. You're genius
@adammorait7429
@adammorait7429 5 жыл бұрын
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 :-)
@liji2272
@liji2272 4 жыл бұрын
Your code: JavaScript! My code: Just Shit!
@zut25
@zut25 4 жыл бұрын
Hahaha that reference to dude where’s my car had me dying. 😂😂😂👏🏻👏🏻
@technologyondemand4538
@technologyondemand4538 2 жыл бұрын
I did not know you could use CSS styling in your console.log(s); that is super cool!
@Lukeormaybenath
@Lukeormaybenath 3 жыл бұрын
One thing to notice about async/await is that awaited functions return synchronously. That means: if you have to do three operations with await, they will happen one after the other. In real-world applications using microsservices, one might need to use various services, but an async/await approach would make the response to the client a bit inefficient. To deal with situations where you need to do parallel operations, you can also use Promise.all, like this: _Promise.all([random(), random(), random()]_
@albertchung7641
@albertchung7641 4 жыл бұрын
Those console methods were amazing!
@zabotheother423
@zabotheother423 2 жыл бұрын
With the async/await, it’s faster if you do: const aprom = random() const bprom = random() const cprom = random() const a = await aprom const b = await bprom const c = await cprom
2 жыл бұрын
for loops, old school way seems to better in a performance point of view because it calculates all operations in single loop.
@Narkafet
@Narkafet 5 жыл бұрын
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.
@barfeeli_baatcheet
@barfeeli_baatcheet 2 жыл бұрын
The Intro is LIT 🔥
@erasmobellumat3973
@erasmobellumat3973 3 жыл бұрын
Your channel is amazing! Your voice reminds me Joey Ramone, from Ramones. And this is not a bad thing, you rocks.
@stevensavoie856
@stevensavoie856 2 жыл бұрын
Actually learned a few things. Doesn't happen often. Thanks!!!!
@TB3hnz
@TB3hnz 3 жыл бұрын
Just learning Javascript for myself, so I'm glad youtube recommended this to me.
@bennylanez4586
@bennylanez4586 2 жыл бұрын
“So now that you’re debugging expert” My brain - wait what
@kale_bhai
@kale_bhai 3 жыл бұрын
It was my first interview today and he asked me about map,filter,reduce. Wished I saw this one little earlier.
@michaeljfordham
@michaeljfordham 4 жыл бұрын
This is honestly the best channel on KZbin for JavaScript explainers - thank you for the great content! Makes it really easy to understand 🙂
@susobhandas6143
@susobhandas6143 3 жыл бұрын
who make such noble videos - Our learning is incomplete without these noble crap videos
@ericvaneldik7331
@ericvaneldik7331 3 жыл бұрын
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.
@cedrics7374
@cedrics7374 4 жыл бұрын
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!
@Tj-hu1nn
@Tj-hu1nn 2 жыл бұрын
Would love to see a 2022 version of this!
The Weird History of JavaScript
12:09
Fireship
Рет қаралды 1,2 МЛН
Junior Vs Senior Code - How To Write Better Code
22:13
Web Dev Simplified
Рет қаралды 1,1 МЛН
OYUNCAK MİKROFON İLE TRAFİK LAMBASINI DEĞİŞTİRDİ 😱
00:17
Melih Taşçı
Рет қаралды 12 МЛН
Стойкость Фёдора поразила всех!
00:58
МИНУС БАЛЛ
Рет қаралды 2,5 МЛН
Understanding RNN , LSTM, GRU
28:12
Ahmed Yousry
Рет қаралды 3
10 regrets of experienced programmers
8:16
Fireship
Рет қаралды 1,4 МЛН
Top 10 Javascript One Liners YOU MUST KNOW!
14:16
developedbyed
Рет қаралды 194 М.
JavaScript Higher Order Functions & Arrays
34:56
Traversy Media
Рет қаралды 985 М.
10 CSS Pro Tips - Code this, NOT that!
9:39
Fireship
Рет қаралды 2,2 МЛН
JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue
12:35
The Async Await Episode I Promised
12:04
Fireship
Рет қаралды 1,1 МЛН
JavaScript: How It's Made
10:54
Fireship
Рет қаралды 881 М.
Every React Concept Explained in 12 Minutes
11:53
Code Bootcamp
Рет қаралды 661 М.
The JavaScript Survival Guide
14:47
Fireship
Рет қаралды 728 М.
Покупка бюджетного ПК на Wildberries? 🤬
0:59
Вэйми
Рет қаралды 3,5 МЛН
Evolution of the Samsung Galaxy
0:50
ios_aesthetics
Рет қаралды 5 МЛН
Распаковка iPhone 16 Pro Max
1:01
Wylsacom
Рет қаралды 3,1 МЛН
ИГРОВЫЕ НОУТБУКИ ОПАСНЫ? 😮
0:45
KEKTAR
Рет қаралды 1,6 МЛН
Как удалить компромат с компьютера?
0:20
Лена Тропоцел
Рет қаралды 1,2 МЛН