8 NEW JavaScript 2024 Features

JavaScript is constantly evolving with new features being added yearly. In this video I am going through 8 new features that are being added to JavaScript in 2024 or will hopefully be added in 2024. Some of these features are real game changers.
📚 Materials/References:
Temporal API Blog Article: blog.webdevsimplified.com/202...
Temporal API Video: • Learn Temporal API In ...
New Array Methods Video: • 20+ Must Know Array Me...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:33 - Array Copy Methods & groupBy
03:16 - Promise.withResolvers
05:07 - Temporal API
06:05 - JSON Modules & Import Attributes
07:51 - Decorators
09:10 - New Set Methods
#ES2024 #WDS #JavaScript

[@trappedcat3615]

Looking forward to using these in 10 years.

[@LupoTosk96]

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

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

[@lilrex2015]

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

[@shneiball123]

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

[@whosgrshh2596]

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

[@Blackthorne98]

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

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

[@user-kf1gz7xg1c]

+++ No need decorators at all

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

[@DeltaXML_Ltd]

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

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

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

[@MaksymCzech]

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

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

[@mdalmamunit427]

Always great and detailed video ❤

[@user-ti3vy8ko3v]

Thanks, this is very useful content👍

[@larscwallin]

The Sets methods are hot! 🔥

[@aliakbarsoft]

Thank you so much man this is so usefull

[@shahfaisal3923]

Thanks Kyle for such a great video.

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

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

[@br3nto]

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

[@ExtraTurtle]

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

[@vasilymedvedev3077]

Perfect video! 👍

[@darienfawkes9475]

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

[@cagdasucar3932]

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

[@Suraj.5260]

Thanks for the video

[@SoreBrain]

I love this yearly format

[@jeanmonnin1184]

Cool video! Keep it up 🙏🏻🥰

[@muthukumar8009]

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

[@XxguaxinimxX.]

Great video!

[@user-ko1cw6mv4q]

Thanks Kyle ❤❤

[@w01dnick]

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

[@sarfrazshah5158]

Thank you!

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

[@riccarrasquilla379]

thanks for the video

[@asherayub101]

You are my documentation :)

[@plasmodiun1]

Tus videos son los mejor, your videos are the best

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

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

[@zerdnelemo]

Can you talk about the new Pipeline Operator in JS?

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

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

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

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

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

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

[@Fanaro]

9:00 Why not decorators on functions?

[@langgs]

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

[@daniyarkarbayev7176]

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

[@AndrewTSq]

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

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

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

[@darienfawkes9475]

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

[@0xtz_]

decorators 👀

[@FunctionGermany]

decorators 💀

[@ChichaGad]

***Java entered the chat***

[@0xtz_]

@@ChichaGad Yees 😂

[@Pretagonist]

I love when languages gets more functional methods.

[@NeoCoding]

very nice

[@atmospheric_b]

we really need these magic set methods like in python

[@filipesommer8253]

isn't toSpliced the same as slice()?

[@milanfanas]

Could they add type support to get rid of typescript?

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

[@supremoluminary]

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

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

[@raph151515]

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

[@Renovatio2142]

Did you consider to turn off the hair blower?

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

[@flaminggasolineinthedarkne4]

so cool ❤

[@chriscentproductions6905]

I like the Set 😭👍👍

[@user-ze7nw9ud7m]

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

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

[@amalmurikkoli7629]

You are a god for me.

[@hatrer2244]

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

[@leokiller123able]

I hope decorators will be like python decorators

[@timucintarakc2281]

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

[@EitanPeles]

how come?

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

[@LeandroAndrus-fn4pt]

Temporal and json import, hopefully without cross site restriction, are good to have, but the rest is junk that can be implement in half a line of code…

[@Go_with-Christ]

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

[@illegalsmirf]

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

[@faiyazrasul2050]

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

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

[@wayneswildworld]

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

[@Onenrico]

0:05

[@radvilardian740]

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

[@nevergrindonline]

Yay, more features that I'll never use.

[@raph151515]

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

[@nik08101986]

M the second one to start it now

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

[@xenossolitarius5478]

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

[@muhammedmaher6704]

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.

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

[@trappedcat3615]

decorators remind me of Rust traits

[@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?

[@supremoluminary]

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

[@hakuna_matata_hakuna]

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

[@steventaylor6294]

It all feels like sugar. Seems like 10 years from now, JS wont even be a thing any more. Everything grounded in C is just going to be eaten by Rust and Go and all the new tribe.

[@etilworg]

this are "proposed" not new , clickbait

[@zeeshan9991]

hello world

[@pawandeore1656]

i don;t like decorator bullshit.. slowly people turning JS into TS

[@ahndeux]

Date functions in Javacript was designed by a sadomasochist. I don't even need to say anymore.

[@DM-pg4iv]

Yawn. Whens this lame language going to introduce a type system. And no TS is not real type system its a glorified linter.