JavaScript Pro Tips - Code This, NOT That

Поделиться
HTML-код
  • Опубликовано: 24 дек 2024
  • НаукаНаука

Комментарии • 2,4 тыс.

  • @Fireship
    @Fireship  6 лет назад +704

    The await is over! The async/await video I promised is here ruclips.net/video/vn3tm0quoqE/видео.html

    • @panqmufin
      @panqmufin 6 лет назад +7

      Hi! Awesome video!, Learned a lot. I just wanted to know, which code editor are you using?

    • @Gh0stl3y
      @Gh0stl3y 6 лет назад +2

      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 лет назад +1

      Also interested about code editor...

    • @Fireship
      @Fireship  6 лет назад +12

      VS Code ruclips.net/video/u21W_tfPVrY/видео.html

  • @jeromesnail
    @jeromesnail 5 лет назад +2551

    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 года назад +20

      Print()

    • @squidinc4376
      @squidinc4376 4 года назад +4

      big same

    • @DailtonR
      @DailtonR 4 года назад

      LITERALLY

    • @Jack_Vickers
      @Jack_Vickers 4 года назад +59

      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 года назад +8

      This comment is how we all reacted apparently.

  • @perfectwebsolutions
    @perfectwebsolutions 6 лет назад +1512

    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 лет назад +63

      Thank you for this :)

    • @sal97
      @sal97 6 лет назад +23

      @@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 лет назад +10

      YT needs a bot for every instructions video to do this.

    • @RemcoPeggeman
      @RemcoPeggeman 6 лет назад +12

      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 лет назад +2

      Code not this that

  • @yandodov
    @yandodov 6 лет назад +2745

    console.table() --- mind blown

    • @addictzz
      @addictzz 5 лет назад +94

      Super mindblown. Spent hours to convert JSON to csv table and turns out there is a way to instantly do that.

    • @whatamievendoing
      @whatamievendoing 5 лет назад +38

      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 лет назад +1

      😲😲

    • @yuli1970
      @yuli1970 5 лет назад +2

      ===*

    • @Nomadvicky
      @Nomadvicky 5 лет назад +2

      yeah really don't know whether this ever exists......

  • @bender7367
    @bender7367 4 года назад +661

    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 года назад +7

      Give this human a medal

    • @sebastiansimon7557
      @sebastiansimon7557 4 года назад +8

      If this were to be added to the video description, then RUclips would automatically display this structure in the video progress bar.

    • @quintencabo
      @quintencabo 4 года назад +3

      No you need to add
      00 - Start
      aswell

    • @iangorham2247
      @iangorham2247 4 года назад

      Not the hero we deserve, but the hero we need right now

    • @dheepankarthiksworld6419
      @dheepankarthiksworld6419 3 года назад +1

      Add a 00:00 to the top of the list. Add the name as Intro

  • @aindaecedo
    @aindaecedo 2 года назад +3

    A coffe for the great content of the channel

  • @mihutz98
    @mihutz98 6 лет назад +2129

    Code not this that

    • @gigi12gigi12
      @gigi12gigi12 5 лет назад +169

      I came here only to say this.

    • @joe-un1ky
      @joe-un1ky 5 лет назад +139

      Don't dead open inside

    • @ganaraminukshuk0
      @ganaraminukshuk0 5 лет назад +60

      I clicked on this video just to see if anyone made this comment.

    • @Snakeyb
      @Snakeyb 5 лет назад +4

      Good man.

    • @Assassunn
      @Assassunn 5 лет назад +14

      var _that = this;

  • @tehdave192
    @tehdave192 5 лет назад +90

    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.

  • @vitamin_ce
    @vitamin_ce 4 года назад +550

    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

  • @andyyuan9338
    @andyyuan9338 4 года назад +671

    It's a whole new level of console.log!

  • @magne6049
    @magne6049 4 года назад +248

    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 года назад +3

      The advanced way should be a composition.

    • @magne6049
      @magne6049 4 года назад +7

      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 года назад +2

      How about .forEach?

    • @magne6049
      @magne6049 4 года назад +6

      John Dave Omandam forEach is same as regular for-loop, since forEach is basically just syntactic sugar for convenience.

    • @softwarelivre2389
      @softwarelivre2389 4 года назад +13

      @@magne6049 forEach creates overhead because of the new scope in the call stack, though.

  • @alexschlake9701
    @alexschlake9701 6 лет назад +204

    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"

  • @AlejandroVivas
    @AlejandroVivas 6 лет назад +2060

    Shit, I just realized I don't know nothing about JS.

  • @RonanConnolly
    @RonanConnolly 5 лет назад +223

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

    • @hariyapa
      @hariyapa 4 года назад

      for me, 1st and 3rd

    • @hariyapa
      @hariyapa 4 года назад

      @@byronchamorro8826 thanks byron

    • @deepakpandey9406
      @deepakpandey9406 4 года назад

      You got to learn a lot.. 😂

    • @samuelbaird4983
      @samuelbaird4983 3 года назад

      Console.table actually seems useful

  • @yunusdurdygulyyew9270
    @yunusdurdygulyyew9270 4 года назад +189

    This is depressing and motivating at the same time

  • @BuddyPupper117
    @BuddyPupper117 4 года назад +8

    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.

  • @puargs
    @puargs 6 лет назад +1146

    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.

    • @amdphenom92
      @amdphenom92 6 лет назад +66

      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_jm
      @Keno_jm 6 лет назад +62

      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.

    • @Fireship
      @Fireship  6 лет назад +279

      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.

    • @technoparty123
      @technoparty123 6 лет назад +41

      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

    • @puargs
      @puargs 6 лет назад +139

      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

  • @anand_undavia
    @anand_undavia 6 лет назад +459

    "I can do a whole video on console logging"
    Please do!!

    • @gradientO
      @gradientO 4 года назад +2

      He did

    • @Tiritto_
      @Tiritto_ 4 года назад +8

      @@gradientO He did a video about console logging. We want him to console log the video.

  • @TwinFeats
    @TwinFeats 6 лет назад +54

    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. :)

  • @BlueskyFR_
    @BlueskyFR_ 4 года назад +189

    This is more a guide on how to use the latest JS features than a good pratices tutorial.

    • @BlueskyFR_
      @BlueskyFR_ 4 года назад +2

      @@njpromethium xD

    • @bill0x2a
      @bill0x2a 3 года назад +11

      @@njpromethium you say that but I totally would lol

    • @botondhetyey159
      @botondhetyey159 3 года назад +8

      @@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 3 года назад +1

      @@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 2 года назад +1

      @@bill0x2a I watched and actually spend a good 10 minutes making a little message for my team

  • @HawkwardAlaskan
    @HawkwardAlaskan 4 года назад +1

    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.

  • @sleeplessdev7204
    @sleeplessdev7204 5 лет назад +197

    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 4 года назад +1

      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 3 года назад

      Ugh

    • @faus585
      @faus585 2 года назад

      @@loobakaer2 saw this early on in learning and tbh I don't understand it fully LMAOO

  • @ycmjason
    @ycmjason 6 лет назад +139

    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 лет назад +23

      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?

  • @nothingnoone8752
    @nothingnoone8752 4 года назад

    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.

  • @ihavetwofaces
    @ihavetwofaces 4 года назад +2

    Unironically liked, commented, and subscribed. Amazing quality. Extremely informative while concise. Thank you!

  • @tstuart9636
    @tstuart9636 5 лет назад +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.

  • @nathanmackinnon5406
    @nathanmackinnon5406 5 лет назад +26

    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()])

  • @sufalt123
    @sufalt123 3 года назад +7

    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 года назад +1

    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.

  • @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.

  • @maxosall6972
    @maxosall6972 5 лет назад +11

    I just discovered that there is - actually - a lot to learn about Javascript!
    Many thanks

  • @avi12
    @avi12 6 лет назад +14

    I love how that while explaining the code, for each sentence you hit Control+Z

    • @EpiDot52
      @EpiDot52 4 года назад +5

      Ohhhhhh! I was wondering about that! That's so clever.

    • @sarvagya-sharma
      @sarvagya-sharma 4 года назад +1

      Yeah this guy is like genius

  • @gunnerandersen4634
    @gunnerandersen4634 3 года назад +5

    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 лет назад +1

    You just delivered what's need to be delivered. Straight and Accurate. Bravo 🙏

  • @karimnaufal9792
    @karimnaufal9792 3 года назад +1

    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!

  • @Philson
    @Philson 5 лет назад +34

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

  • @susannnico
    @susannnico Год назад +230

    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!

    • @lailaalfaddil7389
      @lailaalfaddil7389 Год назад

      That's great! may I ask who's your portfolio manager?

    • @susannnico
      @susannnico Год назад

      *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.

  • @xAstericks
    @xAstericks 6 лет назад +87

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

    • @prasadlahane5486
      @prasadlahane5486 5 лет назад

      ruclips.net/video/g99yhG2mYec/видео.html here you go

  • @tyler4475
    @tyler4475 2 года назад

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

  • @Wildenfree
    @Wildenfree 2 года назад

    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.

  • @kazaakas
    @kazaakas 5 лет назад +4

    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.

  • @lodash_9
    @lodash_9 6 лет назад +25

    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 лет назад +2

      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 лет назад +1

      I would recommend debugging within your IDE if possible or using breakpoints, than using console.log's all over the place

    • @LukePighetti
      @LukePighetti 6 лет назад +1

      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.

  • @tuqirehussain
    @tuqirehussain 6 лет назад +4

    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!

  • @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.

  • @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!

  • @TheXBoy5
    @TheXBoy5 4 года назад +28

    Thumbnail: "Code This, NOT That"
    My brain: "Code NOT This That"

  • @brunobarretocarvalho2315
    @brunobarretocarvalho2315 6 лет назад +212

    awaiting the async/await video. HAHA

  • @martinflogaus8577
    @martinflogaus8577 6 лет назад +6

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

  • @sanswee6396
    @sanswee6396 4 года назад

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

  • @Goofy8907
    @Goofy8907 7 месяцев назад +1

    6:15 I can respect someone who codes examples in Pokémon

  • @carlmeyer96
    @carlmeyer96 3 года назад +5

    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!

  • @TheLollercaster
    @TheLollercaster 4 года назад +6

    11:05 - oh my god, this is perfect! :D

  •  6 лет назад +6

    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.

    • @marcelmokos
      @marcelmokos 6 лет назад

      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.

  • @Rudxain
    @Rudxain 2 года назад

    10:00 for anyone saying that this is bad for performance, modern engines are likely to merge the 3 loops into 1. *However,* in most cases this optimization isn't done, because if any of the arrow functions has the capability of throwing an error, the engine must keep track of where and when the exception was thrown. For that and other reasons I forgot, browsers are unlikely (but can) to optimize that O(3n) loop.
    However, (again) there's 2 other performance penalties, both have to do with property access:
    1. All those array methods belong to `Array.prototype`, this means that the engine will do *3 sequential traversals* of the prototype chain. But engines already have a cache for built-in properties, and the Array prototype chain is small enough that can be considered O(3) (all method calls combined).
    2. *Built-in objects can be modified at runtime!* Even if no code modifies the methods, the dev console can be used for that purpose, so the engine has to play safe and call the global methods instead of inlining them.
    In comparison to an indexed `for loop`. There's no property access, no accessing properties of global objects that can be modified, no prototype chain traversal, easy inlining and unrolling, no cache misses, and no dependency on the Array iterator (which can also be modified at runtime).
    All of these benefits happen because `for` loops are "raw syntax". However, funnily enough, `for of` loops rely on iterators of iterable objects, which means their behavior can also be modified at runtime without `eval`! even though these loops _seem to be_ pure syntax (the same happens with spread syntax "...").
    I learned all of this while coding a library that tries to protect against EVERY external modification, for performance and security reasons. *JS is a hell for library developers LMAO*

  • @aspected
    @aspected 4 года назад +2

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

  • @sudarshankj
    @sudarshankj 3 года назад +4

    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.

  • @sivuyilemagutywa5286
    @sivuyilemagutywa5286 6 лет назад +11

    thank you, you are the best instructor on youtube

  • @ihavetwofaces
    @ihavetwofaces 4 года назад +12

    When you playing checkers and someone breaks out the 3D chess board.

  • @swetabjahazra8050
    @swetabjahazra8050 4 года назад

    This channel posts some of the best javascript tips and tricks.

  • @aboxinspace
    @aboxinspace 5 лет назад +1

    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

  • @neosahft
    @neosahft 6 лет назад +14

    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.

    • @DanishAnton
      @DanishAnton 6 лет назад +1

      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.

    • @neosahft
      @neosahft 6 лет назад

      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
      @amit-5463 2 года назад

      @@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
      @DanishAnton 2 года назад

      @@amit-5463 Ahh, thanks

  • @agustinlavalla8892
    @agustinlavalla8892 4 года назад +3

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

  • @SoCreaty
    @SoCreaty 6 лет назад +7

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

  • @matthewstaton6810
    @matthewstaton6810 5 лет назад

    Only bit of consumer Feedback I can give is slowing it down a bit. Especially when running through code. Just a bit. Content is amazing! Thanks!

  • @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!

  • @BlueProgamer212
    @BlueProgamer212 4 года назад +3

    i like how const {} betrayed the "with" keyword

  • @acloudonthebluestsky9687
    @acloudonthebluestsky9687 5 лет назад +58

    2nd times watch this and still forgot almost everything, damn

    • @Killerbee-xh2bg
      @Killerbee-xh2bg 4 года назад +1

      lol me too

    • @cinilaknedalm
      @cinilaknedalm 4 года назад +8

      probably coz most of it unecessary stuff developers add to make themselves look hot, whilst making unreadable code.

    • @acloudonthebluestsky9687
      @acloudonthebluestsky9687 4 года назад +4

      @@cinilaknedalm maybe because he talk too fast lol

    • @abidkhairy..3863
      @abidkhairy..3863 4 года назад +2

      @@cinilaknedalm most of it is really usefull tho. I've been using it many times on my projects

    • @LuZ-vg6fy
      @LuZ-vg6fy 3 года назад

      @@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.

  • @Greeem
    @Greeem 6 лет назад +146

    uh it's not 2019?

    • @Fireship
      @Fireship  6 лет назад +58

      I'm living in the future :)

    • @carlofaessler
      @carlofaessler 6 лет назад

      yeah its 2018

    • @carlofaessler
      @carlofaessler 6 лет назад +1

      time travel is real?

    • @juanyang838
      @juanyang838 6 лет назад +1

      This is futuristic video, so it doesn't matter

    • @oscarh9678
      @oscarh9678 6 лет назад

      It might have to be 2028 for safari IE and edge to catch up, or for people to stop using them (preferably) so it's probably just javascript developer optimism to say its already 2019 xD

  • @Fingolfin1984
    @Fingolfin1984 4 года назад +1

    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!

  • @ouvie
    @ouvie 2 года назад +2

    00:19 being rickrolled in a JavaScript tutorial is one of the last things I would imagine happening

  • @jesucristoesteban908
    @jesucristoesteban908 6 лет назад +14

    Please make the await async video, please. Thanks!

  • @murugans1623
    @murugans1623 6 лет назад +7

    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.

    • @Fireship
      @Fireship  6 лет назад

      Haha, thank you for the suggestions. I'll big plans to create better content and more of it :)

    • @WagnerShimatai
      @WagnerShimatai 6 лет назад

      Go to Facebook and open the console. You'll see a CSS-styled warning message.

  • @k1ngjulien_
    @k1ngjulien_ 6 лет назад +6

    Last time I was this early JavaScript was still called LiveScript.

  • @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.

  • @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!

  • @RobertLeeuwerink
    @RobertLeeuwerink 6 лет назад +7

    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

    • @Fireship
      @Fireship  6 лет назад +1

      Glad to hear I'm not the only one, haha

  • @fuckthedumbsh1t
    @fuckthedumbsh1t 5 лет назад +4

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

  • @MsSomeonenew
    @MsSomeonenew 5 лет назад +18

    It seems to me "more readable" here means "far more obscure".
    Which the next guy reading your code will really love...

    • @dhkatz_
      @dhkatz_ 5 лет назад +2

      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 лет назад +1

      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 лет назад +2

      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.

  • @pp52475
    @pp52475 5 месяцев назад

    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 😃

  • @dianakalstein3644
    @dianakalstein3644 Год назад

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

  • @johnnyfreetanga5506
    @johnnyfreetanga5506 6 лет назад +13

    5:44 My head explodes here.

    • @AgusSutarom
      @AgusSutarom 5 лет назад

      i know your feel LOL

    • @nadakidd
      @nadakidd 5 лет назад

      Same here. In a million years I never would have thought to try that.

    • @dummypg6129
      @dummypg6129 4 года назад

      I'm a year late, but

  • @desongan9068
    @desongan9068 5 лет назад +11

    what is you color theme, please?

  • @Nic-lp2id
    @Nic-lp2id 6 лет назад +18

    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 лет назад +9

      I find this is a very common thing when using JS. People like to get cute, then the readability plummets.

    • @marcadenexus
      @marcadenexus 6 лет назад +1

      Not just JS; this goes for all programming languages.

    • @DanFletcher90
      @DanFletcher90 6 лет назад +3

      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 лет назад +1

      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 лет назад +2

      "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.

  • @its-probably_fine
    @its-probably_fine 3 года назад

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

  • @somedooby
    @somedooby 2 года назад

    I love the short comedic clips that you insert into these

  • @GeoffTheDeov
    @GeoffTheDeov 5 лет назад +6

    I feel like I'm being shown forbidden knowledge

  • @pmurpmur
    @pmurpmur 5 лет назад +35

    "Code Not This That"

  • @xvnexus8814
    @xvnexus8814 4 года назад +4

    Apparently I've been console logging completely wrong this whole time!

  • @unnamed49
    @unnamed49 4 года назад

    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.

  • @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()]_

  • @NextBeack
    @NextBeack 5 лет назад +4

    I can't keep up with what is going on in this video...Anxiety Intensifies!!!

  • @joelrichardson624
    @joelrichardson624 6 лет назад +6

    Its not 2019 tho

  • @him5726
    @him5726 4 года назад +6

    Everything i knew about console.log was crap

    • @Fireship
      @Fireship  4 года назад

      ruclips.net/video/L8CDt1J3DAw/видео.html

  •  Год назад

    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.

  • @gersonarp
    @gersonarp 2 года назад

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

  • @azertycraftgaming
    @azertycraftgaming 5 лет назад +4

    When you have to support IE11 :(

    • @Soremwar
      @Soremwar 4 года назад +2

      Babel and Deno got you covered

    • @azertycraftgaming
      @azertycraftgaming 3 года назад

      @@Soremwar Oh boy, I have come a long way since this comment. At the time I was some kind of anti-library javascript programmer. Pretty cringe now that I think about it.

    • @Soremwar
      @Soremwar 3 года назад +1

      @@azertycraftgaming Lol One of the best things in life is seeing personal growth in RUclips comments

    • @azertycraftgaming
      @azertycraftgaming 3 года назад

      @@Soremwar haha

  • @vreminik
    @vreminik 5 лет назад +4

    Code This Not that: 😔
    Code Not That This: 😎

  • @SkywalkerWroc
    @SkywalkerWroc 5 лет назад +4

    Whenever I see someone calling const a variable I get triggered (and it's all too common in JS world >_

    • @giannistek1
      @giannistek1 5 лет назад +1

      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

  • @jamjam3448
    @jamjam3448 4 года назад

    Wow i never thought i could learn something new from this video. Thanks a lot.

  • @ricardocnn
    @ricardocnn 2 года назад +1

    Valeu!