8 NEW JavaScript 2024 Features

[@trappedcat3615]

Looking forward to using these in 10 years.

[@Azurryu]

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

More like using 5% of them in 10 years.

[@Dylan_thebrand_slayer_Mulveiny]

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

[@rebelsdeveloper367]

@@Azurryuthe reason jquery still rock

[@TheBswan]

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

[@laxmandeadpool8260]

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.

[@floppa9415]

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]

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

[@人天-i5s]

+++ No need decorators at all

[@Pictor13]

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]

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

[@MaksymCzech]

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

[@lilrex2015]

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

[@colindante5164]

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.

[@carltone]

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!

[@Signcutter]

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!

[@DeltaXML_Ltd]

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

[@larscwallin]

The Sets methods are hot! 🔥

[@whosgrshh2596]

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

[@shneiball123]

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

[@Dylan_thebrand_slayer_Mulveiny]

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]

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.

[@sathyamv]

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

[@Kevroa1]

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

[@piaIy]

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]

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]

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

[@mdalmamunit427]

Always great and detailed video ❤

[@br3nto]

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.

[@Aliakbaresmaeiliiii]

Thank you so much man this is so usefull

[@muthukumar8009]

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

[@jeanmonnin1184]

Cool video! Keep it up 🙏🏻🥰

[@br3nto]

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

[@sakshigoyal9018]

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

[@Blackthorne98]

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

[@coherentpanda7115]

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.

[@darienfawkes9475]

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

[@w01dnick]

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

[@SUBHASHISDAS-h5q]

Thanks, this is very useful content👍

[@princesiachin279]

wow another great video from Kyle🤩

[@taunado]

Video has only been up for 4 minutes haha

[@princesiachin279]

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

[@gosnooky]

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.

[@shahfaisal3923]

Thanks Kyle for such a great video.

[@vasilymedvedev3077]

Perfect video! 👍

[@DamonMedekMusic]

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.

[@Suraj.5260]

Thanks for the video

[@sarfrazshah5158]

Thank you!

[@plasmodiun1]

Tus videos son los mejor, your videos are the best

[@SoreBrain]

I love this yearly format

[@asherdotjs]

You are my documentation :)

[@TesterAnimal1]

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

[@ExtraTurtle]

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

[@zerdnelemo]

Can you talk about the new Pipeline Operator in JS?

[@Siderite]

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.

[@Fanaro]

9:00 Why not decorators on functions?

[@djscratchnsniff]

thanks for the video

[@XxguaxinimxX.]

Great video!

[@darienfawkes9475]

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

[@asagiai4965]

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.

[@daniyarkarbayev7176]

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

[@GelzintVidaurre]

Thanks Kyle ❤❤

[@robyroby162]

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

[@seroltech118]

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

[@piaIy]

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]

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 🎉)

[@AndrewTSq]

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

[@0xtz_]

decorators 👀

[@FunctionGermany]

decorators 💀

[@0xtz_]

@@ChichaGad Yees 😂

[@shgysk8zer0]

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.

[@langgs]

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

[@NeoCoding]

very nice

[@filipesommer8253]

isn't toSpliced the same as slice()?

[@plasmodiun1]

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

[@chriscentproductions]

I like the Set 😭👍👍

[@flaminggasolineinthedarkne4]

so cool ❤

[@amalmurikkoli7629]

You are a god for me.

[@atmospheric_b]

we really need these magic set methods like in python

[@Pretagonist]

I love when languages gets more functional methods.

[@Renovatio2142]

Did you consider to turn off the hair blower?

[@milanfanas]

Could they add type support to get rid of typescript?

[@lakhveerchahal]

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.

[@xade8381]

'static typing' still knocking the door at stage 1

[@piaIy]

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.

[@ALex-ts1gu]

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.

[@deatho0ne587]

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.

[@Onenrico]

0:05

[@xenossolitarius5478]

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

[@supremoluminary]

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

[@Go_with-Christ]

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

[@raph151515]

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

[@ТестТестович-г2о]

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

[@timucintarakc2281]

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

[@EitanPeles]

how come?

[@hatrer2244]

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

[@The-Great-Brindian]

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 😢😭

[@jonmichaelgalindo]

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

[@cagdasucar3932]

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

[@faiyazrasul2050]

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

[@wayneswildworld]

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

[@raph151515]

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

[@robertholtz]

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

[@radvilardian740]

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

[@vibonacci]

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!

[@mimosveta]

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

[@illegalsmirf]

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

[@civrev]

Yay, more features that I'll never use.

[@nik08101986]

M the second one to start it now

[@janbodnar7815]

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

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

[@TheUltimateTrainJourney]

Js in 2025 we need video😊

[@etilworg]

this are "proposed" not new , clickbait

[@hakuna_matata_hakuna]

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

[@supremoluminary]

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

[@trappedcat3615]

decorators remind me of Rust traits

[@glowing_flare]

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]

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.

[@adityapanchal534]

Would you ever stop shaking your head? 😂

[@cherubin7th]

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

[@gabbeeto]

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

[@zeeshan9991]

hello world