Duration 12:37

JavaScript Pro Tips - Code This, NOT That

by Fireship

2 442 791 watched

106.4 K

Published 27 Sep 2018

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

Tags

Webdev

App development

Typescript

Javascript

Tutorial

Lesson

Javascript tutorial

Try javascript

Js tutorial

Vanilla js

Code this not that

Comments - 2414

@

@Fireship6 years ago The await is over! The async/await video I promised is here 701
@

@jeromesnail5 years ago 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..." 2479
@

@vitamin_ce4 years ago 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 529
@

@andyyuan93384 years ago It's a whole new level of console.log! 663
@

@perfectwebsolutions6 years ago how to use console.log
Object Destructuring
Template Literals
Spread Syntax
Loops
Async/Await ... 1503
@

@bender73674 years ago - Debugging with console.log
- Destructuring
- Template literals
- Spread syntax
- Loops
- async/await ... 662
@

@yunusdurdygulyyew92704 years ago This is depressing and motivating at the same time 184
@

@AlejandroVivas6 years ago Shit, I just realized I don't know nothing about JS. 2052
@

@94299636546 years ago "I can do a whole video on console logging"
Please do!! 454
@

@BlueskyFR_4 years ago This is more a guide on how to use the latest JS features than a good pratices tutorial. 188
@

@magne60494 years ago 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, , and orders.filter. If orders is a huge array this could significantly impact performance, and then the for-loop would actually be an optimisation. ... 246
@

@tehdave1925 years ago Another thing to keep in mind at ~ 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. ... 88
@

@alexschlake97016 years ago 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" 206
@

@ihavetwofaces4 years ago Unironically liked, commented, and subscribed. Amazing quality. Extremely informative while concise. Thank you! 2
@

@HawkwardAlaskan4 years ago 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. ... 1
@

@RonanConnolly5 years ago Wow, I had no idea about:
- console.table
- console.log({propertyName})
- CSS style in console.log
Thanks for the tips! ... 222
@

@puargs6 years ago 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. ... 1144
@

@carlmeyer963 years ago 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! 5
@

@sanswee63964 years ago Those stuffs are just marvelous and the way you wrap it up in minutes is just mind-blowing . .
@

@sleeplessdev72045 years ago 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! ... 199
@

@TwinFeats6 years ago 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. :) ... 55
@

@samirdoncic63955 years ago 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.
@

@tareiknetro3154 years ago Best video/production/script/everything ever. Really cool, easy to understand but fast and straight to the point. Checking out the rest.
@

@ycmjason6 years ago 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! ... 140
@

@BuddyPupper1174 years ago 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. ... 8
@

@aspected4 years ago I swear I'm gonna end up adding all your videos to my helpful web development playlist. These are so handy. 2
@

@susannnico11 months ago 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! ... 234
@

@tstuart96365 years ago 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. 5
@

@maxosall69725 years ago I just discovered that there is - actually - a lot to learn about Javascript!
Many thanks 11
@

@PayneDeathz3 years ago 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!
@

@karimnaufal97923 years ago 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! 1
@

@xAstericks6 years ago First thing I want to say, the thumbnail for this video had some "DON'T DEAD OPEN INSIDE" vibes 89
@

@gunnerandersen46343 years ago 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 <3 ... 5
@

@kumarvs665 years ago You just delivered what's need to be delivered. Straight and Accurate. Bravo 🙏 1
@

@tyler44752 years ago These videos are changing my life! Things I never thought of starting to learn coding.
@

@avi125 years ago I love how that while explaining the code, for each sentence you hit Control+Z 13
@

@tuqirehussain6 years ago 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! ... 4
@

@aboxinspace5 years ago 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 1
@

@atomicpx2 years ago This is so amazing! I didn't know about how to send data to tables and even style it in the console. How cool!
@

@Philson5 years ago So much new modern stuff. I used to write a whole bunch of archaic code, since I come from the C/Java world. 34
@

@nathanmackinnon54065 years ago 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()]) ... 25
@

@nachannachle27064 years ago 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. <3 1
@

@ericvaneldik73313 years ago 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. ... 2
@

@sebasn67513 years ago Instead of using [ ], use { }. And instead of "index 0, 1, 2" it will display the actual names of the objects. 6
@

@TheXBoy54 years ago Thumbnail: "Code This, NOT That"
My brain: "Code NOT This That" 28
@

@adammorait74295 years ago 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 :-) ...
@

@Fingolfin19844 years ago 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! 1
@

@agustinlavalla88924 years ago Amazing lesson! Thanks! I'm shocked about console posibilities. I've realized I've always debugged in a wrong way 3
@

@abimaeelmouraa2 years ago Wooow!!!
Those tips about console was really useful!!
Thank you! I'll never forgot this!😃
@

@somedooby2 years ago I love the short comedic clips that you insert into these
@

@martinflogaus85776 years ago You, Sir...
you deserve a medal! I'm a junior FE Dev and you just blew my mind JS :D 6
@

@dianakalstein364411 months ago Thanks to this video, I've finally grasped the entire concept of async await. Great explanation! :)
@

@cedrics73744 years ago 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! ...
@

@avi125 years ago 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) ... 3
@

@jesucristoesteban9086 years ago Please make the await async video, please. Thanks! 14
@

@masroorahmad95204 years ago Thanks alot !!!
Explanation is so expressable and very worthful information in short span of time.
@

@FromRootsToRadicals2 years ago Oh hell great vid! I did not know about formatting the debugger like this.
@

@sivuyilemagutywa52866 years ago thank you, you are the best instructor on youtube 11
@

@christophbuhler67316 years ago 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..). ... 25
@

@nothingnoone87524 years ago 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.
@

@unnamed494 years ago I have never seen a video tutorial like this!!! Big thumbs up to fireship. Not what you are teaching but the way you are teaching is a 5 star.. very efficient code display for samples. unlike other tutorials, they tend to waste time typing the codes. ...
@

@TheLollercaster4 years ago - oh my god, this is perfect! :D 6
@

@kazaakas5 years ago
This type of stuff is nice on front-ends and/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. ... 4
@

@Narkafet5 years ago 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.
@

@lucasmelo62582 years ago brooo, this video is gold. Thanks man, you are literally helping me feed my kids.
@

@BlueProgamer2124 years ago i like how const {} betrayed the "with" keyword 3
@

@ihavetwofaces4 years ago When you playing checkers and someone breaks out the 3D chess board. 12
@

@jamjam34484 years ago Wow i never thought i could learn something new from this video. Thanks a lot.
@

@DirectusVideos2 years ago Great video! This is a good reminder for all devs, and looks like many of us learned something new. 💜
@

@RobertLeeuwerink6 years ago 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 7
@

@SoCreaty6 years ago Amazing Video. How can guys dislike this if they are not interested in becoming a better programmer? LOL!
I learned a lot. Thanks!!!! 7
@

@thelavishcoder25534 years ago 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. 2
@

@altaccount6485 years ago Over five years. Yet, you sir have taught me way more in twelve minutes.
@

@shaunb6 years ago You made me feel better about being a JavaScript developer lol. Thanks for the tips! 27
@

@murugans16236 years ago 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. ... 7
@

@pebojote5 years ago My mind just got blown! Thanks for the pro tips
@

@ouvie2 years ago being rickrolled in a JavaScript tutorial is one of the last things I would imagine happening 2
@

@acloudonthebluestsky96875 years ago 2nd times watch this and still forgot almost everything, damn 58
@

@neosahft6 years ago 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. ... 14
@

@GrandpappyLuke5 years ago 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. 1
@

@erasmobellumat39734 years ago Your channel is amazing! Your voice reminds me Joey Ramone, from Ramones. And this is not a bad thing, you rocks.
6 years ago 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. ... 6
@

@hassanbaiga6 years ago Its 2019 ? hmmm, seems legit, i won the shirt ! 3
@

@nickschmitt85945 years ago 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. ...
@

@koppresh4 years ago Absolutely loved it!!
Learnt alot of things
@

@sudarshankj3 years ago 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. ... 4
@

@k1ngjulien_6 years ago Last time I was this early JavaScript was still called LiveScript. 6
@

@TB3hnz3 years ago Just learning Javascript for myself, so I'm glad youtube recommended this to me.
@

@its-probably_fine3 years ago I turn into an explody-head emoji whenever I check out any of your videos! Thanks for BLESSING US with this channel!
@

@johnnyfreetanga55065 years ago My head explodes here. 13
@

@abrilmarina4 years ago This is great! I’d love to see a similar one for React 2
@

@RachidChh4 years ago Greatttt Job guys ! all tutorials are awesome.
@

@fuckthedumbsh1t5 years ago ♪ never gonna turn around and.... desert you ♫
Damn it has been a while since the last time I was rick-roll'd. 4
@

@swetabjahazra80504 years ago This channel posts some of the best javascript tips and tricks.