8 NEW JavaScript 2024 Features

Поділитися
Вставка
  • Опубліковано 24 січ 2025

КОМЕНТАРІ • 154

  • @trappedcat3615
    @trappedcat3615 11 місяців тому +372

    Looking forward to using these in 10 years.

    • @Azurryu
      @Azurryu 11 місяців тому +12

      *goes to can I use* yeah this looks fine, this feature is 5 years old!
      And then a bug ticket appears, because seemingly people still frequently use outdated Safari as they can't update it any further on their old but still viable devices... Damn.

    • @illegalsmirf
      @illegalsmirf 11 місяців тому +5

      More like using 5% of them in 10 years.

    • @Dylan_thebrand_slayer_Mulveiny
      @Dylan_thebrand_slayer_Mulveiny 11 місяців тому +6

      Or you could use a transpiler and use them right now.

    • @rebelsdeveloper367
      @rebelsdeveloper367 11 місяців тому +6

      @@Azurryuthe reason jquery still rock

    • @TheBswan
      @TheBswan 11 місяців тому

      ​@@Dylan_thebrand_slayer_Mulveiny this is the way. You should be writing Typescript anyway, which means you are using some kind of transpilation

  • @laxmandeadpool8260
    @laxmandeadpool8260 11 місяців тому +14

    A good use for a promise resolver can be writing clean-ups in use-effect return for unresolved promises. Otherwise a pending promise can cause some memory leaks.
    However the fetch request already has support for an abort signal. But this is more economics and covers more cases.

  • @MaksymCzech
    @MaksymCzech 11 місяців тому +19

    It really baffles me that Set operations were not implemented on the Set class from the start.

  • @floppa9415
    @floppa9415 11 місяців тому +36

    Safari, as per usual, being the Internet Explorer of the 2020s.
    Also I don't like decorators or annotation being a standard js features. They produce really unpredictable and hard to debug code.

    • @bgill7475
      @bgill7475 11 місяців тому

      I really don’t like their support for extensions too.

    • @人天-i5s
      @人天-i5s 11 місяців тому

      +++ No need decorators at all

    • @Pictor13
      @Pictor13 4 місяці тому

      Javascript isn’t typed enough for having decorators.
      Also, if they provide decorators then also Interfaces should be supported natively.
      Otherwise code will become an unspeakable mess of implicit features.
      It risks to kill the language..

    • @imascrew6218
      @imascrew6218 3 місяці тому

      it always smooth sailing untiil the QA test your code in safari.... T_T

  • @br3nto
    @br3nto 11 місяців тому +1

    9:56 woah! How were set functions not introduced when Set was added??

  • @lilrex2015
    @lilrex2015 11 місяців тому +7

    This was a good video. Decorators looks interesting and I am pumped for Temporal

  • @larscwallin
    @larscwallin 11 місяців тому +14

    The Sets methods are hot! 🔥

  • @Fanaro
    @Fanaro 11 місяців тому

    9:00 Why not decorators on functions?

  • @carltone
    @carltone 11 місяців тому

    I’m a retired test engineer, hobbyist embedded programmer. I started to learn JavaScript in early 2020. I have created a browser based User Interface for my projects using inexpensive tablets , cellphones etc. with just enough HTML to get a load connection and web-socket established. Personally I find JavaScript is a language that keeps stepping on itself with feature bloat, work arounds , maturing subtleties etc.etc. Unfortunately Not a language I am going to master. I do enjoy your short and to the point tutorials. Thanks for sharing!

  • @Dylan_thebrand_slayer_Mulveiny
    @Dylan_thebrand_slayer_Mulveiny 11 місяців тому +2

    I think decorators don't belong in core JS. It makes more sense for them to remain as a transpiler function as if you're using them, you're probably using other features that need transpilation/polyfills anyways.
    I love the idea of being able to use promises without having to pass in callbacks for resolve/reject. That'll make using promises a lot nicer.

    • @essamal-mansouri2689
      @essamal-mansouri2689 11 місяців тому

      A lot of things in "core JS" get transpiled for the web anyways. Something like this would just standardize how the decorators work for better cross-library integrations.

  • @Signcutter
    @Signcutter 25 днів тому

    I see lots of people create videos about JS, but I rarely see anything about how to implement it. For example, a detailed video on how to make it work with HTML and CSS and how it all ties together. Please forgive me, but im fairly new to this and would love to see vids like that. By the way your videos are great, keep up the good work!

  • @colindante5164
    @colindante5164 11 місяців тому

    We take comfort knowing we have you to keep us up to date with all the new features for which we're all so grateful. Thankyou much.

  • @br3nto
    @br3nto 11 місяців тому

    6:56 why stop (or start) with import JSON? Should support all sorts of import formats like xml, YAML, protobuf, csv, etc. Actually, it would be cool if we could write custom importers, then use the importer to import from files.

  • @muthukumar8009
    @muthukumar8009 11 місяців тому

    Suggesting to use quokka extension, it will show output on the fly as you type

  • @Kevroa1
    @Kevroa1 11 місяців тому

    I'm glad that Set methods are being added.. A while ago I tried using a set for a problem I had and found it very bizarre that the object didnt have those methods implemented lol

  • @mdalmamunit427
    @mdalmamunit427 11 місяців тому

    Always great and detailed video ❤

  • @whosgrshh2596
    @whosgrshh2596 11 місяців тому +2

    The set methods will be very useful for my use case - Archetypes in an ECS

  • @zerdnelemo
    @zerdnelemo 11 місяців тому

    Can you talk about the new Pipeline Operator in JS?

  • @DeltaXML_Ltd
    @DeltaXML_Ltd 11 місяців тому

    These features are brilliant, you did an excellent job highlighting them all!

  • @w01dnick
    @w01dnick 11 місяців тому

    It's nice to mention Map.groupBy along with Object.groupBy. Works similarly but returns Map.

  • @darienfawkes9475
    @darienfawkes9475 11 місяців тому

    Please in future add links to doc manuals you shown in description)

  • @piaIy
    @piaIy 11 місяців тому +1

    IMO, groupBy lacks a second transform function parameter, which limits its use. As in your example, it would make more sense like this:
    Object.groupBy(people, p => p.age, p => p.name) // returns { 28: ["Kyle", "Sally"] }
    Also, you should've talked about tc39/proposal-iterator-helpers, it's at stage 3 and it's my most anticipated feature. Lazy iterator methods are part of almost every other relevant language, I can't believe it's taking this long for JS. Pipe operator will also be huge, but it's only stage 2.

    • @fluffydoggo
      @fluffydoggo 11 місяців тому

      In C# we have an extension method for all iterable types called GroupBy that does exactly what js does, although slightly weirder.
      Pretty much it returns a Grouping type that can be iterated, but also has a key as well.
      Example of getting all unique ages:
      record Person(string Name, int Age);
      var people = new Person[] {
      new("Will", 24),
      new("Bob", 28),
      new("Kyle", 24)
      };
      // [ { Name: "Will", Age: 24 }, { Name: "Bob", Age: 28 } ]
      var uniqueAges = people.GroupBy(x => x.Age).Select(x => x.Key).ToArray();
      If you know typescript, its basically these semantics:
      interface Grouping extends Iterable {
      readonly key: TGrouping;
      }
      // add groupBy to interface
      interface Iterable {
      groupBy(keySelector: (x: T) => TGrouping): Grouping;
      }

    • @piaIy
      @piaIy 11 місяців тому +1

      ​@@fluffydoggo This is the advantage of the functional/declarative mindset and proper iterator methods, they can be chained to get the desired result without doing any extra work other than creating a new iterator each time, then you can collect them at the last step. In case of JS, you immediately get back the entire collection that you have to transform into many intermediate arrays, or you can come up with a complex function signature to satisfy every use case. The iterator helpers proposal will improve this but the problem is that the ecosystem is not built around it, most APIs still expect and return arrays and objects where an iterator would be more efficient.

  • @filipesommer8253
    @filipesommer8253 11 місяців тому

    isn't toSpliced the same as slice()?

  • @ExtraTurtle
    @ExtraTurtle 11 місяців тому

    does browser support also matter when talking about frameworks like react? or does react polyfills when you build it?

  • @sathyamv
    @sathyamv 11 місяців тому

    Hi Kyle, By watching your videos I learned CSS and Javascript. Thanks for your contents. Everything is easily understandable.
    I'm having a question for you.
    Is there any possibilities for you creating Angular tutorial...?

  • @shneiball123
    @shneiball123 11 місяців тому

    Hey mate, absolutely love your channel. Could you do a video about tackling a frontend system design interview question?

  • @coherentpanda7115
    @coherentpanda7115 11 місяців тому

    Temporal potentially could save millions of developer headaches if we can drop our reliance on moment, dayjs and others.Trying to handle dates properly between the api, client, server and post requests is painful, and results vary depending on which browser you use.

  • @langgs
    @langgs 11 місяців тому

    hey, how to create an account on your website. i just wanted to check the price of your javascript course

  • @daniyarkarbayev7176
    @daniyarkarbayev7176 11 місяців тому

    Temporal API has been in work since forever, have there been any news on it that made you include it in this video?

  • @jeanmonnin1184
    @jeanmonnin1184 11 місяців тому

    Cool video! Keep it up 🙏🏻🥰

  • @sakshigoyal9018
    @sakshigoyal9018 7 місяців тому

    I just love the way u explain everything. My fav developer

  • @princesiachin279
    @princesiachin279 11 місяців тому

    wow another great video from Kyle🤩

    • @taunado
      @taunado 11 місяців тому

      Video has only been up for 4 minutes haha

    • @princesiachin279
      @princesiachin279 11 місяців тому

      @@taunado yup u r right...I gradeated from university majoring computer science in 2022, but most of my skills (40%) are by watching Web Dev Simplified and the rest are from another source like traversy media, zerotomastery, etc...
      And even just by watching the first 2 minutes, I can tell that this video is great and worth my time to watch till the end coz the explanations are great and understandable. Also, I've following him for almost 4 years if I'm not mistake, and implemented the concept of his videos in most of my projects.

  • @SUBHASHISDAS-h5q
    @SUBHASHISDAS-h5q 11 місяців тому

    Thanks, this is very useful content👍

  • @asagiai4965
    @asagiai4965 11 місяців тому

    I have a question. Does the resolve() on Promise.withResolvers actually return the value?
    Because it can be a big news if it does.
    The import and json is good too.

  • @Siderite
    @Siderite 11 місяців тому +1

    As a .NET developer I don't understand why they keep adding immutable array functions that create copies of the array, when you already have generators and functions. This allows creating LINQ like functions that only use what they need. Stuff like arr.map(a=>func(a)).slice(0,4) creates a new copy of arr only to take 4 elements. I feel like, by focusing on fashionable frameworks like React, JavaScript is pushing away the high performance features of the language.

  • @Aliakbaresmaeiliiii
    @Aliakbaresmaeiliiii 10 місяців тому

    Thank you so much man this is so usefull

  • @TesterAnimal1
    @TesterAnimal1 11 місяців тому

    I’m so looking forward to Temporal.
    We do scheduling stuff and JS Date is almost useless. Lots of…. temporal utilities needed around it.

  • @vasilymedvedev3077
    @vasilymedvedev3077 11 місяців тому

    Perfect video! 👍

  • @milanfanas
    @milanfanas 11 місяців тому

    Could they add type support to get rid of typescript?

  • @darienfawkes9475
    @darienfawkes9475 11 місяців тому

    FYI: Temporal API as experimental proposal already for 4 years (from 2020) and unknown if it is going to become available in 2024.

  • @Blackthorne98
    @Blackthorne98 11 місяців тому

    Hey Kyle could you make a video on template engines for backend? Such as express-handlebars🤙🏽 nice video!

  • @DamonMedekMusic
    @DamonMedekMusic 11 місяців тому

    Its the most helpful for frameworks that require reactivity. push() and forEach() I rarely use now in sveltekit. Instead using the ...spread operator or map(). Doing the same thing in a different way shows that javascript is evolving with the web.

  • @shahfaisal3923
    @shahfaisal3923 11 місяців тому

    Thanks Kyle for such a great video.

  • @seroltech118
    @seroltech118 11 місяців тому

    Is there any library that use decorator for express routing ? Like we would use route decorator with spring boot or symfony

    • @piaIy
      @piaIy 11 місяців тому

      I only have experience with NestJS, which uses Express internally by default with decorators for routing. It's based on Spring Boot and Angular for architecture.

    • @lamhung4899
      @lamhung4899 11 місяців тому

      You can use routing-controller, used by nest under the hood, but still work fine with any Express app
      (I used it before Nest released 🎉)

  • @asherdotjs
    @asherdotjs 11 місяців тому +1

    You are my documentation :)

  • @Renovatio2142
    @Renovatio2142 11 місяців тому

    Did you consider to turn off the hair blower?

  • @robyroby162
    @robyroby162 11 місяців тому

    I believe the new array methods do not do a deep copy, so e.g. objects in the arrays will still maintain their references

  • @Suraj.5260
    @Suraj.5260 11 місяців тому

    Thanks for the video

  • @supremoluminary
    @supremoluminary 11 місяців тому

    I performance tested toReversed and it was actually slightly less performance than regular Array.prototype.reverse. Kind of disappointing. Hopefully performance will improve.

  • @xenossolitarius5478
    @xenossolitarius5478 11 місяців тому +1

    Oh great one more language filled with decorators. As JS doesn't support enough sideffect patterns

  • @0xtz_
    @0xtz_ 11 місяців тому +5

    decorators 👀

    • @FunctionGermany
      @FunctionGermany 11 місяців тому +3

      decorators 💀

    • @0xtz_
      @0xtz_ 11 місяців тому

      @@ChichaGad Yees 😂

  • @Pretagonist
    @Pretagonist 11 місяців тому

    I love when languages gets more functional methods.

  • @atmospheric_b
    @atmospheric_b 10 місяців тому

    we really need these magic set methods like in python

  • @SoreBrain
    @SoreBrain 11 місяців тому

    I love this yearly format

  • @djscratchnsniff
    @djscratchnsniff 11 місяців тому

    thanks for the video

  • @gosnooky
    @gosnooky 11 місяців тому +3

    Decorators are great for building modular systems. With reflect-metadata, you can add metadata to class definitions, as well as properties, methods, and method parameters. This makes it great for dependency injection, as an application during bootstrap can build a graph between all components of an application. This is how NestJS works (influenced by Angular). It does force usage of classes (singleton pattern), so it's not for everyone, and I still think functional works best for front-end.

  • @plasmodiun1
    @plasmodiun1 11 місяців тому

    Tus videos son los mejor, your videos are the best

  • @XxguaxinimxX.
    @XxguaxinimxX. 11 місяців тому

    Great video!

  • @GelzintVidaurre
    @GelzintVidaurre 11 місяців тому

    Thanks Kyle ❤❤

  • @sarfrazshah5158
    @sarfrazshah5158 11 місяців тому

    Thank you!

  • @shgysk8zer0
    @shgysk8zer0 11 місяців тому

    It probably won't make it in this year, but I'm really looking forward to Records and Tuples. Which will be quite useful for things like Map.groupBy() (also in array grouping, but people tend to focus on the Object version).
    Importantly, they will be new primitives that have equality by value, so #{ foo: 'bar' } === #{ foo: 'bar' } will be true... and that makes them much more useful for keys in Maps and WeakMaps.
    Map.get(#{ name: 'John', age: 45 }) will work.

  • @xade8381
    @xade8381 11 місяців тому

    'static typing' still knocking the door at stage 1

    • @piaIy
      @piaIy 11 місяців тому +1

      You mean type annotations. The runtime will completely ignore them, the only benefit will be that you won't have to convert TS to JS.

  • @timucintarakc2281
    @timucintarakc2281 11 місяців тому +2

    if i invested my time in c instead of learning js i would be a programmer by now

  • @chriscentproductions
    @chriscentproductions 11 місяців тому

    I like the Set 😭👍👍

  • @ТестТестович-г2о
    @ТестТестович-г2о 11 місяців тому

    The more I watch your videos, the more I love C++ 😅

  • @ALex-ts1gu
    @ALex-ts1gu 11 місяців тому

    An Regeln halten, ist ganz wichtig, wer definiert denn die Regeln ;-) und man muss sich anpassen. Ist das Freiheit, nein das ist Angepasstheit. Dennoch danke für das interessante Video.

  • @AndrewTSq
    @AndrewTSq 11 місяців тому +2

    the json import and decorators are the things I did not see any use of, but others are nice. groupby will be nice.

  • @Go_with-Christ
    @Go_with-Christ 11 місяців тому

    Frontend devs primarly looking at their keyboard to type is the funniest shit

  • @raph151515
    @raph151515 11 місяців тому

    keeping up is not difficult, there were some activities around 2016, most of the time it's stagnant and kind of slow

  • @plasmodiun1
    @plasmodiun1 11 місяців тому

    Aunque ya se esté estos métodos actualizados por x o y motivos siempre me gusta refrescar más con alguien que los explica rápido y sensillo

  • @hatrer2244
    @hatrer2244 11 місяців тому

    You can start using these right away in server side code ;)

  • @flaminggasolineinthedarkne4
    @flaminggasolineinthedarkne4 11 місяців тому

    so cool ❤

  • @deatho0ne587
    @deatho0ne587 11 місяців тому

    Anyone dealing with editable data needs to have none mutable arrays, due to generally need the original and the edited version incase the user backs out. Same with objects.
    Several linters do not like hard coded JSON's, not like it is hard to convert a JSON to a JS object. I get most do not want to copy/past to const jsonData = ... as const (in TS) but not hard to do.

  • @NeoCoding
    @NeoCoding 11 місяців тому

    very nice

  • @radvilardian740
    @radvilardian740 11 місяців тому

    Hi, idk ur name, but why is ur head always move like that ? or is it just me ?

  • @amalmurikkoli7629
    @amalmurikkoli7629 11 місяців тому

    You are a god for me.

  • @mimosveta
    @mimosveta 6 місяців тому

    4 months later and that import json went from 0% to 78% >

  • @jonmichaelgalindo
    @jonmichaelgalindo 11 місяців тому

    I fought SO hard on discourse to convince people that promises needed external resolution / rejection. I feel so vindicated. (Well, you could already do it, and I did it all the time. But still.)

  • @lakhveerchahal
    @lakhveerchahal 11 місяців тому

    I'm very happy to see Decorators in the list. I recently got to know about reflect-metadata but found that it is currently experimental.

  • @wayneswildworld
    @wayneswildworld 11 місяців тому

    How do you define what the promise actually does when using withResolvers

  • @The-Great-Brindian
    @The-Great-Brindian 11 місяців тому

    Man I really wanna master Javascript and go from zero to hero in like, my next life time 😂
    Man I can't keep up with jabasquipt n e more. I'm on my knees crying literally while holding my little crucifix out. I can't take it any more 😢😭

  • @illegalsmirf
    @illegalsmirf 11 місяців тому

    Keeping up-to-date on JavaScript is an exercise in futility.

  • @Onenrico
    @Onenrico 11 місяців тому

    0:05

  • @civrev
    @civrev 11 місяців тому

    Yay, more features that I'll never use.

  • @raph151515
    @raph151515 11 місяців тому

    with resolver super useful, the existing workaround was ugly, too bad the naming sucks

  • @supremoluminary
    @supremoluminary 11 місяців тому

    Kyle’s been sitting in his room for years, stackin bitcoin, ready to emerge a millionaire…

  • @faiyazrasul2050
    @faiyazrasul2050 11 місяців тому

    A video on the 10 projects each for a beginner dev of JS, intermediate dev of JS, senior dev of JS

  • @vibonacci
    @vibonacci 9 місяців тому

    Copying things is not performant for obvious reasons. Wish the author of the concept of forcing Immutability knew this.
    In real programming languages, copying things if frowned upon heavily, yet JS brings more native mass copy functions.
    JS frameworks, they even force you to do the immutability!

  • @etilworg
    @etilworg 11 місяців тому +1

    this are "proposed" not new , clickbait

  • @robertholtz
    @robertholtz 7 місяців тому +1

    Temporal is pronounced with the emphasis on the first syllable NOT the second. TEMPoral NOT TemPORal.

  • @cagdasucar3932
    @cagdasucar3932 11 місяців тому

    I am so looking forward to decorators. I think they will make web components so much easier.

  • @cherubin7th
    @cherubin7th 11 місяців тому +2

    JavaScript is getting more complex than human languages if this continues.

    • @gabbeeto
      @gabbeeto 11 місяців тому

      I know this is a joke but have you learned another human language?

  • @nik08101986
    @nik08101986 11 місяців тому

    M the second one to start it now

  • @adityapanchal534
    @adityapanchal534 11 місяців тому

    Would you ever stop shaking your head? 😂

  • @hakuna_matata_hakuna
    @hakuna_matata_hakuna 11 місяців тому +1

    deno added decorators and temporal , btw your last deno vid is 5 years old

  • @janbodnar7815
    @janbodnar7815 11 місяців тому

    "This handles literally everything you would want to do with dates". You sure that it will handle Egyptian, Nepali, Arabic, Hebrew, Hindu and many other calendars as well? There is not a single datetime library (and never will be) that would handle everything. Because it is so complex.

    • @WebDevSimplified
      @WebDevSimplified  11 місяців тому

      There is detailed documentation on how you can use various different calendars (such as Hebrew) with this library. tc39.es/proposal-temporal/docs/calendar.html

  • @leokiller123able
    @leokiller123able 11 місяців тому

    I hope decorators will be like python decorators

  • @glowing_flare
    @glowing_flare 11 місяців тому

    Decorators in normal JavaScript!! 😱
    I don't know why people are not so excited about this very feature! It would be absolutely useful, especially with validation. Can't wait to see it!
    🔥

    • @piaIy
      @piaIy 11 місяців тому +1

      It's class only and most of JS community have moved away from OOP, but maybe with time this and web components will change things, like how we went back to SSR.

  • @trappedcat3615
    @trappedcat3615 11 місяців тому

    decorators remind me of Rust traits

  • @zeeshan9991
    @zeeshan9991 11 місяців тому

    hello world