8 NEW JavaScript 2024 Features

keeping up to date on all the latest JavaScript features is incredibly difficult which is why in this video I'm going to be covering eight of the coolest new features coming to JavaScript in 2024 and I'll be going through them in order from the ones that have the best browser support all the way down to the ones that have the least amount of browser support but honestly are some of the coolest features out there welcome back to web def simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project Center as you can see I have a bunch of tabs open for all the different things that I want to talk about as well as some code on the side for different examples that we're going to go through now the First new proposal I want to talk about for JavaScript in 2024 is actually a combination of two different proposals the first one is changing array by copy which gives us new immutable array methods and the next one I want to talk about here is going to be the array grouping by and that's because both of these deal with arrays and they actually both have rather good browser support as you can see here this two reversed method and all the other methods like this have almost 90% support and they're pretty much supported in every single browser out there which which means you can pretty much start using this immediately and then when it comes to group by the support's not quite as good you can see it's only about 80% or 70% and that's because Safar it still does not have this implemented now the very first set of methods I want to talk about is the ones with really good browser support almost 90% And that is these four methods right here two sorted two reversed two spliced and width essentially all four of these methods replace features that already exist in JavaScript but instead of mutating the existing array they create a brand new copy of the array normally if I were to say a. sort what this is going to do is it's going to change the actual array a and that's going to be completely mutated so if my array had for example 2 1 3 what's going to happen is it's going to change array a to be 1 2 and 3 and it's changing the actual array a here with the two sorted version instead it's actually going to return to me a brand new array and not change a at all so it does not do any mutations and instead return to me a copy of the array that is sorted same thing with two reversed this just does the same thing as reverse but does not mutate the array same thing with two spice it does the same thing as splice but does not mutate the array and this a.width the thing that this does is allow you to actually change specific elements in an array for example if I wanted to change the element at index 2 to be the value of a what that's going to do is actually mutate my array a while if I came in here with the width method and said change index 2 to the value of a that's going to return to me a brand new array B that has change the second index to the value of a these methods are really useful if you need to deal with immutability for example in something like react now the next method is one I really like and that is the group by Method on object and what you do is you just pass it an array of objects like this you can see I passed to my people here then you pass it a function and then function is going to return whatever you want to group by in our case we're grouping by age and what this is going to do is return to me a brand new object that is grouped by that category so in our case we're going to get an object that has a key property here of 28 and then it's going to have an array of all the different values so essentially both of these people have the age of 28 so they're going to be throwing into that array just like that and this right here is what the actual returned object is going to be from this group buy so it just allows you to write out group buys really easily without having to do like complicated reduced statements or anything like that now these are the newest array methods that are out there but I actually have a full video covering all the different cool array methods out there you want to know which include these and many others so I highly recommend checking out that video I'll link get in the cards and description for you so now let's move on to the very next topic we'll close out of these tabs and the next one I want to talk about is promise with resolvers and this also has rather good support as you can see here the support's at 67.6 5% it's not perfect but as you can see Safari is pretty much the only reason the support is not very good once Safari has this implemented the browser support will pretty much Skyrocket up to around 90% and all this allows you to do is to create promises without actually needing to execute the promise immediately inside of the statement you created in normally you would create a new promise and you pass that a function with the resolve and reject statements inside of there and then inside this code somewhere you're going to call resolve and somewhere you're going to call reject that way your promise is going to work and then up here you're going to obviously have a promise like this now this works for about 99% of use cases but sometimes you want to create a promise but not actually use your resolve or reject inside of here just because of the way that your code is structured so what you can do instead is you can use promise. withth resolvers just like that and what this function does is it actually returns three separate things to you inside of an object you're going to have your promise you're going to have your resolve function and you're going to have your reject function just like this let me just make sure I get everything spelled properly there we go and we can just make that this says promise 2 up here and now we're going to see how this works so now you can see we have our promise which we can do whatever we want you know we could say promise do then or catch it works just like a normal promise but the nice thing is I can call resolve anywhere it doesn't have to be inside of this function that I Define my promise with same thing with rejected I can call this absolutely anywhere in my code so depending on how you have your code structured this may be a better way for you to write out your promises if you need to use resolve or reject in places that you can't easily put inside of the actual function you pass to new promise again it's not a super common feature you're going to need all the time but it is something new that is coming to JavaScript in 2024 now the next feature I want to talk about is one of my favorite features that currently unfortunately has absolutely no support as you can see 0% but it is something that's in stage three and we'll hopefully make it to stage four before the end of 2024 and that is the temporal API this is essentially a brand new way to write out dates inside of JavaScript now there's a ton of documentation on every single thing that this supports as you can see it's a quite lengthy document here but really the idea behind the temporal API is that the date system in JavaScript absolutely sucks to work in so it's actually been completely overhaul with this temporal API which makes it so you pretty much don't need to use date libraries anymore because this handles literally everything you would want to do with dates and if you want to learn more about this I have a full blog article that goes massively in depth into everything you would ever need to know about this and also I have a full video which I'll link in the cards in description for you on everything you need to know about the temporal API because once this gets enough browser support that you can actually use it this is going to be a feature I guarantee you're going to use in every single website because it's so much better than working with traditional dates now the next feature I want to talk about is again one that doesn't have any browser support at all you can see it's still at 0% and that's because it's currently in stage three but this is again something I'm hoping will make it to 2024 JavaScript and that is Json modules now if you've ever written code before in JavaScript you've probably seen an import statement that looks something like this we'll say import users from users. Json and that works just fine when you use it but this is is actually not a default JavaScript feature this is a feature of the different bundlers you use like webpack rollup V and so on they allow you to import Json CSS and many other features into your code but in normal JavaScript the only thing you can import is Javascript files so what this Json modules proposal is saying is essentially giving you the ability to import Json into your JavaScript directly and all you have to do is just say with and you specify that the type here is going to be Json and this would allow you to directly import Json into your JavaScript code without having to use like a bundler or something else now this used to actually be part of a larger proposal which is again something I want to talk about and that's called the import attributes and this import attributes worked with Json as well as many other features inside of JavaScript so like things like CSS and so on you can import you can import normal JavaScript pretty much anything that you would want to import even here we have web assembly being imported it would just allow you to import essentially a variety of different files directly into JavaScript without the need for a bundler so Json is broken out into its own category because it wanted to get pushed essentially faster down the track so hopefully we'll see that this will actually come out sooner than the overall implementation for everything with the actual import attributes so both of these have 0% support right now but hopefully by the end of 2024 this Json one will actually have pretty good support and then this import attributes may not be ready by then but hopefully it won't be too much further down the road now the next new JavaScript feature that I want to talk about again has 0% support unfortunately and that is decorators and this is one that I don't quite think will be be ready unless it's towards the very end of 2024 and decorators are just a way to actually improve how you work with classes inside of JavaScript here's a really quick little example as you can see it uses this at syntax and this may be something that you're familiar with if you've worked in something like angular before or even in typescript because they both have their own implementation of decorators and there's lots of libraries out there that use this and even other programming languages have decorators and essentially decorators are just a way for you to kind of hook into classes you can maybe make it run code when you call function you can make it run code when you initialize a brand new object from that class when you initialize a class and so on there's just a bunch of different ways that you can hook in and it allows you to add extra functionality to your actual classes without needing to directly call functions inside your class it allows you to decorate it with extra functionality or extra abilities and so on that do different things it's really comprehensive as you can see the documentation is absolutely massive for everything you can do with decorators and again it's just a way for you to improve how you work with classes by adding in different features into classes calling function and so on now if you're not working in classes this is probably not a feature you're going to use very much but if you are in a pretty heavy class-based way of working with JavaScript this is something that you're probably definitely looking forward to now the very last topic I want to talk about actually has some browser support which is nice you can see it's about 11% and that's because it's pretty much only supported in Safari but as you can see Chrome is essentially implementing support in the brand newest version of Chrome so it's going to be hopefully implemented in pretty much every browser relatively soon and that is new methods being added to the set object inside of JavaScript you know that you can create a brand new unique array by saying new set for example 1 2 3 and this is going to be an array that only contains unique values so for example if I tried to add the value one twice it'll only show up in my set one single time well these new methods are ways for you to interact with these sets to do essentially mathematical operations on them so I'll pull over what all these look like for example we have the difference method which allows you to determine which things are only in one set and not the other set intersection allows you to determine what is in both sets so you can see here it shows what's in both A and B the symmetric difference shows me what is not in a and not in B so essentially everything that they don't share the union just combines both the sets together then we have some methods such as is just joint from to determine if they're completely separated and then determining if they're subsets or supersets of one another so these are really handy functions that are being added to sets which is great if you do some maybe more complicated mathematical operations with your sets need need to remove elements add elements based on other sets this is a super useful feature that I honestly can't believe wasn't included originally when sets were introduced to JavaScript just because of how fundamental and useful they are for different things that would require you to use a set because of how relatively simple these functions are I think that there's a very high chance that this is going to be implemented by the end of 2024 in pretty much every single browser and those are all the brand new features coming to JavaScript in 2024 and Beyond now if you want to keep up to date with other things such as CSS HTML and even more JavaScript features I have tons of videos covering all those different topics I'll link some of them over there for you and with that said thank you very much for for watching and have a good day

Channel: Web Dev Simplified

Views: 136,627

Keywords: webdevsimplified, es2024, javascript new features, new js 2024, js 2024, new javascript features 2024

Id: duNEnLUxie8

Length: 11min 0sec (660 seconds)

Published: Tue Feb 13 2024