8 NEW JavaScript 2024 Features
Vložit
- čas přidán 28. 07. 2024
- 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
Looking forward to using these in 10 years.
*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.
More like using 5% of them in 10 years.
Or you could use a transpiler and use them right now.
@@Azurryuthe reason jquery still rock
@@Dylan_thebrand_slayer_Mulveiny this is the way. You should be writing Typescript anyway, which means you are using some kind of transpilation
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.
This was a good video. Decorators looks interesting and I am pumped for Temporal
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.
I really don’t like their support for extensions too.
+++ No need decorators at all
It really baffles me that Set operations were not implemented on the Set class from the start.
Hey mate, absolutely love your channel. Could you do a video about tackling a frontend system design interview question?
The set methods will be very useful for my use case - Archetypes in an ECS
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...?
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.
Always great and detailed video ❤
Hey Kyle could you make a video on template engines for backend? Such as express-handlebars🤙🏽 nice video!
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.
These features are brilliant, you did an excellent job highlighting them all!
Thanks, this is very useful content👍
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.
Thanks Kyle for such a great video.
Great video!
Cool video! Keep it up 🙏🏻🥰
Perfect video! 👍
Thank you so much man this is so usefull
Thanks for the video
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.
does browser support also matter when talking about frameworks like react? or does react polyfills when you build it?
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!
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.
The Sets methods are hot! 🔥
I love this yearly format
It's nice to mention Map.groupBy along with Object.groupBy. Works similarly but returns Map.
9:56 woah! How were set functions not introduced when Set was added??
You are my documentation :)
Thank you!
Suggesting to use quokka extension, it will show output on the fly as you type
I am so looking forward to decorators. I think they will make web components so much easier.
Please in future add links to doc manuals you shown in description)
thanks for the video
Thanks Kyle ❤❤
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.
9:00 Why not decorators on functions?
hey, how to create an account on your website. i just wanted to check the price of your javascript course
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.
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.
I’m so looking forward to Temporal.
We do scheduling stuff and JS Date is almost useless. Lots of…. temporal utilities needed around it.
Tus videos son los mejor, your videos are the best
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.
I just love the way u explain everything. My fav developer
Can you talk about the new Pipeline Operator in JS?
Is there any library that use decorator for express routing ? Like we would use route decorator with spring boot or symfony
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.
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 🎉)
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.
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;
}
@@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.
wow another great video from Kyle🤩
Video has only been up for 4 minutes haha
@@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.
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
the json import and decorators are the things I did not see any use of, but others are nice. groupby will be nice.
I believe the new array methods do not do a deep copy, so e.g. objects in the arrays will still maintain their references
FYI: Temporal API as experimental proposal already for 4 years (from 2020) and unknown if it is going to become available in 2024.
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.
very nice
Temporal API has been in work since forever, have there been any news on it that made you include it in this video?
Could they add type support to get rid of typescript?
Temporal is pronounced with the emphasis on the first syllable NOT the second. TEMPoral NOT TemPORal.
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.
isn't toSpliced the same as slice()?
'static typing' still knocking the door at stage 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.
we really need these magic set methods like in python
I love when languages gets more functional methods.
Did you consider to turn off the hair blower?
decorators 👀
decorators 💀
***Java entered the chat***
@@ChichaGad Yees 😂
so cool ❤
You are a god for me.
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.
I performance tested toReversed and it was actually slightly less performance than regular Array.prototype.reverse. Kind of disappointing. Hopefully performance will improve.
I like the Set 😭👍👍
if i invested my time in c instead of learning js i would be a programmer by now
how come?
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.
keeping up is not difficult, there were some activities around 2016, most of the time it's stagnant and kind of slow
How do you define what the promise actually does when using withResolvers
You can start using these right away in server side code ;)
The more I watch your videos, the more I love C++ 😅
I hope decorators will be like python decorators
Frontend devs primarly looking at their keyboard to type is the funniest shit
A video on the 10 projects each for a beginner dev of JS, intermediate dev of JS, senior dev of JS
M the second one to start it now
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.)
4 months later and that import json went from 0% to 78% >
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…
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 😢😭
Hi, idk ur name, but why is ur head always move like that ? or is it just me ?
Keeping up-to-date on JavaScript is an exercise in futility.
0:05
with resolver super useful, the existing workaround was ugly, too bad the naming sucks
Oh great one more language filled with decorators. As JS doesn't support enough sideffect patterns
Yay, more features that I'll never use.
decorators remind me of Rust traits
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!
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!
🔥
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.
"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.
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
Kyle’s been sitting in his room for years, stackin bitcoin, ready to emerge a millionaire…
Would you ever stop shaking your head? 😂
JavaScript is getting more complex than human languages if this continues.
I know this is a joke but have you learned another human language?
deno added decorators and temporal , btw your last deno vid is 5 years old
this are "proposed" not new , clickbait
hello world
i don;t like decorator bullshit.. slowly people turning JS into TS