11 New JS Features You Can Use Today!
WDWeb Dev Simplified@WebDevSimplified · 1.8M subscribers
- Views
- 88K
- 87,985
- Outlier
- ×1.9
- Median 47.5K
- Length
- 20:32
- Published
- Jun 9
- Tuesday
- Comments
- 213
- 3.8K likes
Script
How it's written
- Words
- 4,910
- Words a minute
- 239
- Reading time
- 21 min
- Segments
- 14
The hook
0:00–0:26In this video, I'm going to be covering nine brand new JavaScript features that you can actually use in every single browser and I'm saving two bonus features to the very end. They aren't quite available in every browser yet, but I've been waiting over five years to use these features. I'm so excited that they're as close as they are. Also, if you just think you don't need to learn these things because AI does everything for you, I hate to break it to you, but AI doesn't even know that these things exist and they will constantly write code the bad old way. So, if you know
Structure
In this video, I'm going to be covering nine brand new JavaScript features that you can actually use in every single browser and I'm saving two bonus features to the very end. They aren't quite available in every browser yet, but I've been waiting over five years to use these features. I'm so excited that they're as close as they are. Also, if you just think you don't need to learn these things because AI does everything for you, I hate to break it to you, but AI doesn't even know that these things exist and they will constantly write code the bad old way. So, if you know that these exist, you can actually start using them and writing code much better than what the AI can produce. Lastly, if you actually want to see a written version of this, I create tons of blog articles entirely for free. I'll link in the description this exact article, but I have over 100 different articles you can check out on various different topics. And while you're on my blog, you can actually download my completely free web dev road map. It covers everything you need to know to actually get started building with web development whether it's front end or back end. This road map covers absolutely everything. It will make sure you stay up to date with everything that's changing in web dev landscape. Welcome back to Web Dev Simplified. My name is Kyle and my job is to simplify the web for you. And the very first feature I want to get started with is a rather simple one and that is that there are tons of new methods added to the set type inside of JavaScript. So, if you're unfamiliar, this set type essentially allows you to create what's similar to an array, but it's a unique list of elements. For example, if I try to add the element two to this set twice, it will only ever show up in that set one time, which means it's a really great way to essentially create lists of things to see if you have something or if you don't have something because it's a unique list. But the problem is if you want to do different mathematical
Watch from 0:00comparisons on sets, that was impossible until all these new set methods were added. This isn't even all of them. There are quite a few, but some of the most important ones are going to be union, which essentially tries to combine together two sets with all the unique elements from both of them. And if we just real quickly look at the actual results from this, you can see we get a set with one, two, three, four, five cuz those are all the elements that these two different sets have when you combine them together. You can also do an intersection and that is essentially going to show you only the elements that appear in both set A and set B. So, you can now see we only get the value three cuz that's the only thing that's in common between these. And as you can see, there are tons of different types. For example, we can do a difference in this particular case, and it determines, okay, let's take everything from set A and subtract out everything that's in set B. So, now we're left over with just one and two cuz we subtracted three from that very first set. We could also do the symmetric difference, and that's essentially going to take our two sets and just remove all the things that are duplicated between them. So, you can see we get one, two, four, and five as our values left over cuz it removed that duplicate value of three. And then some of the other things you can do is like checking supersets and subsets. So, I can say like is subset of just like that, and you can see that'll return false because A is not a subset of B. But if I change this so that it was a subset, you can see it's going to return true. So, it's just a great way to do these mathematical computations without having to write a way reducers and things like that manually. Now, the next important thing that I want to talk about is iterator helpers. This is something you're not going to use all the time, but whenever you've had to deal with iterators, you know how painful they can be to work with. Iterators are often formed from generators, and if you're unfamiliar with generators are, I have a full video
Watch from 1:31I'll link in the cards and description for you. And even a blog article if you want a written version instead. But essentially a generator is a function that you can continually call over and over and over again to get a new value from it. And you can see generators and iterators in lots of different places inside of JavaScript, but a generator function has this star syntax inside of it. And now what I can do is I can actually call this function. So, I can say numbers just like that. And then I can just say val. And I can say next for example to get the next value, and it's just going to continually iterate up and up. So, in our case, if I just console.log val.next, and we take a look at what that is, you can see I get a value of zero and done of false. And if I were to call this again, you can see my value is one and done is false. Done just determines when you're at the end of your loop, and essentially this value is just whatever is returning from here. This is just constantly giving me a brand new number every single time that I call this, but there's lots of places that you would get iterators back, whether it's from a library or different things built into JavaScript. For example, if I have an array of values, let's just say 1 2 3, and I say a.values, this actually returns to me an iterator. You can see here we get an array iterator, and I can use that exact same syntax of next and so on to get various different values from it. So, this isn't just unique to generators. But, what this allows us to do is it allows us to use all those nice array methods we're used to, filter, map, and so on, directly on these iterators. So, what I can do here is I can say console.log val, and normally you would only have access to next, and that's pretty much it. But, now I have access to all those array methods. For example, I can come in here and I can filter these values if
Watch from 3:01I wanted. I could map these values. So, let's say that I'm going to take each number and I'm going to multiply it by two. So, we're just going to say a map of n 2 just like this. And the important thing is, since this is an infinite loop, I need to make sure I take this infinite loop and only get a certain number of values from it. So, I can just come in here and I can say take and determine how many numbers I want. So, let's say that I want to get the first five numbers from this number generator, multiply them by two, and return a brand new array. If I give that a quick save, and I make sure that I convert this to an array by calling to array at the very end, now you're going to see it's going to give me an array of 0 2 4 6 8. Essentially, it's taking the first five numbers from here, which started at zero, go up to four, multiply them by two, and return that value to me. This take function right here is just making sure that you use this with infinite loops. So, if I have an infinite loop, it only gets a certain number, and to array is just a nice way to convert an iterator directly to an array, so it's easier to work with for various different things like printing out or using in your code. If you've never had to deal with iterators, this may not seem like a big deal, but honestly, if you have, you know how amazing this quality of life feature is, cuz working with iterators, usually we write salts and you're writing lots of for loops manually. This just takes all that and makes it super easy. Now, this next thing I want to talk about is called promise.try, and this is again a nice small quality of life feature that really helps making your code a lot cleaner to work with. Normally, when you're dealing with promises, one really annoying thing is that if you have code that is failing synchronously, that works differently than code that fails asynchronously. In our particular case, we have a promise here that is failing because of something. We just have this boolean right here we can change between true and false if we want this to fail or not. So, if we want it to fail, we just set this to true, it rejects our
Watch from 4:32promise, and we get that inside of our dot catch right here. Everything works great. The problem though is if inside this get user function, I have an error that is not something asynchronous. So, for example, let's say I have an error in my code right here. This is a synchronous part of my code, not inside promise section right here. And when I save, you can see it throws an error instead of catching my error inside of this dot catch. The only way for me to fix this is to wrap all of my code inside of a try catch like this. And now that'll actually solve my particular problem. And if I come down here, I can just console.log try catch, and that's going to catch that particular error right there. The problem with this approach though is that try catch is kind of messy to work with. For example, what if I wanted my user to be accessible outside this try catch? Well, I would need to create a user variable like this, and then redefine my user here, and then I could use my user out here. This is very messy and difficult to work with when all you're trying to do is get some errors being caught by this try catch thing. So, instead what you can do is we can actually use promise.try. And what that does is it essentially treats all errors as if they were promise based errors that are being resolved or rejected. So, all we need to do is just wrap this entire thing inside of a promise.try. So, just make sure we wrap that as a function just like that in our promise.try. And now everything else should work. We can get rid of this try catch section entirely, change this back to a const user, and if we give that a save, you can see our error is being caught no matter if it's a synchronous based error or if it's an error being thrown right here. It's being caught exactly the same inside this catch
Watch from 6:04statement, and that's because promise.try, all it does is it converts any errors that it gets, whether they're synchronous or asynchronous, it converts them into an asynchronous based error that can be caught using dot catch, which will drastically clean up and make your code easier to work with. Now, for this next topic that I want to talk about, we're going to be talking about import attributes. And this is actually something you may not even be aware of cuz you're so used to using a bundler, but inside of just plain JavaScript, you can't actually import JSON. At least you used to not be able to. For example, if I were to come up here and I try to import this user.json file, I can come in and I can say ./user.json and I can import that as a user just like this. Normally, this would not work. Just by default, if I run this code, it's going to give me an error. So, let's just make sure we try to log out what our user is. Just like that. And now if I come over and I look at our code, you can see uncaught syntax error, cannot use import statements outside a module. Well, that's of course because our HTML needs to be set up to make this use modules. So, let's just come in here, type equals module. There we go. But now you can see we're actually getting the error, failed to load module script expected JavaScript module, blah blah blah, but you're getting JSON. Essentially, we can't import this JSON. At least we used to not be able to, but we can add this with type JSON to the end of any of our imports that import JSON, and that's essentially going to tell our browser, "Hey, this is actually using JSON instead." So, now if we go to our page and we inspect and we look over at the console, you can see we're getting that user being printed out just like we expected. Now, currently this with type only supports JSON, but they're wanting to add support for other things such as
Watch from 7:34like CSS and so on. So, as the spec gets driven out further, we're going to see more things currently it's just JSON file support right now. Now, this is yet another really simple feature, but a huge quality of life feature. So, this is just escaping regular expression. Let's take for example this search. This search is using regular expression search behind the scenes, and if I were to come in here and I were to type for example dot com, I want to search for all the things that end in dot com, when I search, you notice I actually get this dot edu result as well as my dot com results. The reason for that is because in regular expressions, dot stands for any character possible, so it just matches this @com right here. That's exactly the same cuz dot is a wildcard inside of regular expression. If you're not familiar with regular expressions, I have a huge tutorial covering everything you need to know. I'll link it in the cards in the description for you. But, we can fix this very easily by using this regular expression.escape. All that does is it takes anything that you user input and essentially escapes out all these special characters and forces it to search for things that are just a period, for example. So, all we need to do is just take our input that is being given to us by the actual user, wrap that in that regular expression.escape, just like this. And now, if we give that a quick save and we were to search for .com, you'll notice that only shows me the things that end in .com cuz it escapes out all of the special characters possible. This makes it so you can do regular expression searches, for example, by adding your own stuff for surrounding it while taking in user input as part of that search without having to manually escape everything on your own. Now, this next one I want to
Watch from 9:05talk about is again a small quality of life improvement, but it is the array.from async function. And essentially, it allows you to convert an iterable into an array. And this is really great for certain generators that you may have. In our case, I have an asynchronous generator right here that fetches numbers from an API. And we have a function called get data and we send it a page and it's going to return to me the first five numbers from that page. So, every page has five numbers. So, if I get page one, it'll give me five numbers. If I get page two, it'll give me five numbers on page two, and so on. And what I want to do is I want to get all the numbers from the entire API. So, to do that, I can call this array.from async and pass it in that function that I'm calling and it's going to loop through calling this over and over and over again asynchronously, combining all that data together into one single array. And if we look at this get data function, it doesn't really matter what it does, but as you can see, all I'm doing is I'm returning a brand new promise that gives me the first five numbers and then it gives me the next five numbers, and the next five numbers until it gets to the very end. And in that case, it just returns the data as is. So, if we take a look at the final result from actually running this code, you can see here we get three arrays being returned. The first five numbers, the next five numbers, and the last five numbers, but in our case it's only three numbers at the very end. So, we just get three numbers showing up right there.
Watch from 10:36So, again, this array from a sync is really useful for when you want to take an asynchronous generator or iterable of any type. Usually it's going to be a generator though, and you want to loop through it, run all of the code, and get that back as a single piece of data that you can use wherever you want. Now, this next one is this error.isError function. This is just super simple. All it does is allows you to check to see if something is an error or not. This may sound kind of dumb because you could just do an instance of error. For example, I can say if, and let's just create a variable, if A is an instance of error, well, then I know inside of here I have an error object. But the problem is is this instance of error doesn't actually work properly if you're going across boundaries, for example, across iframes and things like that, and also may not work in other similar very niche situations. So, instead what we can do is we can just use that.isError function, and this is going to tell us is A an error or not. And of course, to make sure we do that correctly, this should be error.isError, and then we pass in our object we want to check. There we go. And now I know that if this is true, then inside of here A is going to be an error, and we can do whatever I want with that particular error. Again, it's a small quality of life feature that just makes it easier to check errors instead of having to do an instance of, and it'll work in those niche scenarios where instance of actually doesn't quite work like we expect, and it'll actually solve problems where, for example, instance of would incorrectly return to you that something's an error just because it kind of matched the shape of an error even though it actually wasn't an error.
Watch from 11:52So, again, this will solve all of those problems for you. Now, at the beginning of this video I talked about nice quality of life features that came to set. We also have nice quality of life features for map. If you're unfamiliar with what map is, I have a full tutorial I'll link it the cards and description for you. It goes over everything you need to know, but essentially a map is like a dictionary. You have one type that goes to another type. And creating a map is really easy. We can just say const A equals new map. And now we can essentially create associations. So we can say A. dot And if I want to add something into this map, I can just say set. I can give it a key, let's say one, and the value for this is going to be A. So now whenever I search for one by doing A. dot get of one, it's going to return to me that value of A. The problem is is that if you wanted to essentially get or insert a value, also called an upsert, this was impossible. So you used to have to just check, "Hey, does this value exist? If it doesn't, set it to a default value, and then return that value as is." A little bit cumbersome and something you did all the time. So they just added a nice get or insert function that allows you to do all of that in one line. So now I can just say A. dot get or insert. And what I can do is I can just pass it in my key, for example one, and I can pass it a default value, we'll say A. And now what's going to happen is this is going to give me a value right here, and this value is going to be equal to either what is currently inserted into my array at that key of one, or it'll fall back to the default value of A, and it'll make sure to put that default value into my map properly as that value.
Watch from 13:15We can also do get or insert computed. The only difference between the computed and non-computed version is the computed version takes a function as the second property, and then you get whatever your default value is. In our case we can just say A. This is only useful if this code to get the default value is computationally expensive. For example, like maybe you're getting the Fibonacci sequence, that's very slow to do. So you use a function version cuz this will only ever be called one time, instead of called every single time get or insert is being called. Now this next function, Math.sumPrecise, helps with certain floating-point arithmetic that you may run into problems with. For example, if I just do a simple console.log of 0.1 + 0.2 + 0.3, you would expect the result of this to be .6 but we actually inspect our page and we look over at the console you'll notice we get .6000001 and that's because we get some floating point arithmetic problems where you can't properly represent all numbers inside of floating points in computers it's just a general problem with computers. This is also a problem when you try to add together really really large numbers. Let's just say I did e 1 to the 20 and I want to add .1 onto that and then I wanted to subtract out the exact same e to the 20th. So you would think in the end I would get .1 as my result but if we look at the result it gives us zero and that's because again when is added to this very large number it essentially gets rounded off because of the way that the math works inside of a computer. We can try to fix this by using math.sumprecise.
Watch from 14:42So we can come in here with sumprecise just like that and this takes in an array so let's just convert this to an array of values we want to add together. So we'll come in here make sure that this is a negative value and now when we hopefully sum these together you can see we actually get being returned. So this makes it so you can sum very large numbers rather accurately compared to what you used to be able to do and now if we try to use that .2 .3 and so on result you'll see we now get but unfortunately it doesn't actually solve all the problems I'm talking about because if we remove that .3 you'll still we still get that rounding error. So it can only help with certain rounding errors and that's because the way that this number .3 essentially inside of the binary of the computer it's just impossible to represent .3 exactly because of the way the computer is set up. So we can't solve this using sumprecise but for those larger number situations and for most fractional situations sumprecise is going to give you a slightly more accurate accounting to what your actual result is going to be and will help you pretty much anytime you want to add together either really large numbers or decimal point numbers. Now this next one is unfortunately not available on every browser. Safari is still lagging, but it's an incredibly cool new feature that I am super excited to be coming to browsers, and that's the ability to essentially have explicit resource management where you can automatically close out or clean up different things. In our case, we just have a class we're using, but you can use objects or anything else you want.
Watch from 16:11And you can see we have a constructor that calls connected, so we're connecting to our database. We can query our database, and then we have this fancy symbol.dispose function that closes our database automatically for us. And the way that this code works is essentially anything that you want. It could be an object, it could be a class, it doesn't matter. You can add on a property called symbol.dispose written out exactly like this as a function, and it's going to automatically call this function as soon as the variable that is being created from this leaves scope, essentially when it's garbage collected. So, in our case, you can see that we have this function called main, which creates our database, it queries from our database, and then afterwards we call after just like this. So, in our case, it's going to create our database and log out the connection. Then it's going to query our database logging out query, and then finally, after this function's done, this database object no longer exists, we can't access it anymore. So, it's going to clean this up automatically for us by calling this console.log closing. And then afterwards, it'll call after. Now, if we look at our console, you'll notice that it doesn't actually do that. You can see that this closing text is no longer showing up in here at all. The reason for that is because you can't create a normal constant variable. Instead, you need to use a new keyword called using. And using just tells JavaScript, "Hey, whenever this variable goes out of scope, call this fancy symbol.dispose function automatically for me." Just by doing that, you can see automatically, as soon as we're done with this main function, it calls closing, and then it runs the code after the main function.
Watch from 17:36So, this is a great way to make sure we automatically clean up any of the resources that we use inside of our application. That way we don't have like dangling connections to our database or anything else like that. Like I said, it's not available in Safari yet, but it is available in every single other browser, and it's nice that you can use this inside of Node cuz honestly, Node is probably the most likely case you're going to use this. And if you're using the most up-to-date version of Node, it does support this. Now, this final topic that I want to talk about is the Temporal API, and I'm not going to go super in-depth in this video about it cuz I have a full massive video on Temporal API that I'll link in the cards and description, and a full article I'll link in the description as well. But it's essentially an entire replacement for the Date API inside of JavaScript, and it makes it so you never need to download a date library ever again, cuz this Temporal API handles everything you could ever want from a date. It handles time zones, durations, formatting, literally everything you could ever want from date library. Temporal handles it all for you. It's currently not in Safari yet, but there's a polyfill you can use if you want to start using Temporal. And this is something I've been super excited for. I literally made my video on this over 4 years ago, and it's still 100% up-to-date. So, I will link that video right over here for you, as well as in the cards and description. And again, if you want to master web development, I highly recommend checking out my completely free web dev roadmap. This literally covers everything you ever need to know, whether you want to be a front-end or back-end web developer. It's got 260 plus videos, 60 plus articles, over 120 different projects. This is the ultimate roadmap you need. It's entirely free. Just go ahead, check this out. I will link it down in the description for you. With that said, thank you very much for watching, and have a good day.
Watch from 19:01Full transcript
- 0:00
In this video, I'm going to be covering nine brand new JavaScript features that you can actually use in every single browser and I'm saving two bonus features to the very end. They aren't quite available in every browser yet, but I've been waiting over five years to use these features. I'm so excited that they're as close as they are. Also, if you just think you don't need to learn these things because AI does everything for you, I hate to break it to you, but
- 0:21
AI doesn't even know that these things exist and they will constantly write code the bad old way. So, if you know that these exist, you can actually start using them and writing code much better than what the AI can produce. Lastly, if you actually want to see a written version of this, I create tons of blog articles entirely for free. I'll link in the description this exact article, but I have over 100 different articles you can check out on various different topics. And while you're on my blog, you
- 0:42
can actually download my completely free web dev road map. It covers everything you need to know to actually get started building with web development whether it's front end or back end. This road map covers absolutely everything. It will make sure you stay up to date with everything that's changing in web dev landscape. Welcome back to Web Dev Simplified. My name is Kyle and my job is to simplify
- 1:02
the web for you. And the very first feature I want to get started with is a rather simple one and that is that there are tons of new methods added to the set type inside of JavaScript. So, if you're unfamiliar, this set type essentially allows you to create what's similar to an array, but it's a unique list of elements. For example, if I try to add the element two to this set twice, it will only ever show up in that set one time, which means it's a really great
- 1:23
way to essentially create lists of things to see if you have something or if you don't have something because it's a unique list. But the problem is if you want to do different mathematical comparisons on sets, that was impossible until all these new set methods were added. This isn't even all of them. There are quite a few, but some of the most important ones are going to be union, which essentially tries to combine together two sets with all the unique elements from both of them. And
- 1:44
if we just real quickly look at the actual results from this, you can see we get a set with one, two, three, four, five cuz those are all the elements that these two different sets have when you combine them together. You can also do an intersection and that is essentially going to show you only the elements that appear in both set A and set B. So, you can now see we only get the value three cuz that's the only thing that's in common between these. And as you can
- 2:04
see, there are tons of different types. For example, we can do a difference in this particular case, and it determines, okay, let's take everything from set A and subtract out everything that's in set B. So, now we're left over with just one and two cuz we subtracted three from that very first set. We could also do the symmetric difference, and that's essentially going to take our two sets and just remove all the things that are duplicated between them. So, you can see
- 2:25
we get one, two, four, and five as our values left over cuz it removed that duplicate value of three. And then some of the other things you can do is like checking supersets and subsets. So, I can say like is subset of just like that, and you can see that'll return false because A is not a subset of B. But if I change this so that it was a subset, you can see it's going to return true. So, it's just a great way to do these mathematical computations without having to write a
- 2:46
way reducers and things like that manually. Now, the next important thing that I want to talk about is iterator helpers. This is something you're not going to use all the time, but whenever you've had to deal with iterators, you know how painful they can be to work with. Iterators are often formed from generators, and if you're unfamiliar with generators are, I have a full video I'll link in the cards and description for you. And even a blog article if you want a written version instead. But essentially a generator is a function
- 3:07
that you can continually call over and over and over again to get a new value from it. And you can see generators and iterators in lots of different places inside of JavaScript, but a generator function has this star syntax inside of it. And now what I can do is I can actually call this function. So, I can say numbers just like that. And then I can just say val. And I can
- 3:27
say next for example to get the next value, and it's just going to continually iterate up and up. So, in our case, if I just console.log val.next, and we take a look at what that is, you can see I get a value of zero and done of false. And if I were to call this again, you can see my value is one and done is false. Done just determines when you're at the end of your loop, and essentially this value is just whatever is returning from here.
- 3:48
This is just constantly giving me a brand new number every single time that I call this, but there's lots of places that you would get iterators back, whether it's from a library or different things built into JavaScript. For example, if I have an array of values, let's just say 1 2 3, and I say a.values, this actually returns to me an iterator. You can see here we get an array iterator, and I can use that exact same syntax of next and so on to get
- 4:09
various different values from it. So, this isn't just unique to generators. But, what this allows us to do is it allows us to use all those nice array methods we're used to, filter, map, and so on, directly on these iterators. So, what I can do here is I can say console.log val, and normally you would only have access to next, and that's pretty much it. But, now I have access to all those array methods. For example, I can come
- 4:30
in here and I can filter these values if I wanted. I could map these values. So, let's say that I'm going to take each number and I'm going to multiply it by two. So, we're just going to say a map of n 2 just like this. And the important thing is, since this is an infinite loop, I need to make sure I take this infinite loop and only get a certain number of values from it. So, I can just come in here and I can say take and determine how many numbers I want. So, let's say that I want to get the first
- 4:51
five numbers from this number generator, multiply them by two, and return a brand new array. If I give that a quick save, and I make sure that I convert this to an array by calling to array at the very end, now you're going to see it's going to give me an array of 0 2 4 6 8. Essentially, it's taking the first five numbers from here, which started at zero, go up to four, multiply them by two, and return that value to me. This
- 5:11
take function right here is just making sure that you use this with infinite loops. So, if I have an infinite loop, it only gets a certain number, and to array is just a nice way to convert an iterator directly to an array, so it's easier to work with for various different things like printing out or using in your code. If you've never had to deal with iterators, this may not seem like a big deal, but honestly, if you have, you know how amazing this quality of life feature is, cuz working with iterators, usually we write salts
- 5:32
and you're writing lots of for loops manually. This just takes all that and makes it super easy. Now, this next thing I want to talk about is called promise.try, and this is again a nice small quality of life feature that really helps making your code a lot cleaner to work with. Normally, when you're dealing with promises, one really annoying thing is that if you have code that is failing synchronously, that works differently than code that fails asynchronously. In our particular case,
- 5:54
we have a promise here that is failing because of something. We just have this boolean right here we can change between true and false if we want this to fail or not. So, if we want it to fail, we just set this to true, it rejects our promise, and we get that inside of our dot catch right here. Everything works great. The problem though is if inside this get user function, I have an error that is not something asynchronous. So, for example, let's say I have an error
- 6:15
in my code right here. This is a synchronous part of my code, not inside promise section right here. And when I save, you can see it throws an error instead of catching my error inside of this dot catch. The only way for me to fix this is to wrap all of my code inside of a try catch like this. And now that'll actually solve my particular problem. And if I come down here, I can just console.log try
- 6:39
catch, and that's going to catch that particular error right there. The problem with this approach though is that try catch is kind of messy to work with. For example, what if I wanted my user to be accessible outside this try catch? Well, I would need to create a user variable like this, and then redefine my user here, and then I could use my user out here. This is very messy and difficult to work with when all you're trying to do is get some errors being caught by this try catch thing.
- 7:00
So, instead what you can do is we can actually use promise.try. And what that does is it essentially treats all errors as if they were promise based errors that are being resolved or rejected. So, all we need to do is just wrap this entire thing inside of a promise.try. So, just make sure we wrap that as a function just like that in our promise.try. And now everything else
- 7:20
should work. We can get rid of this try catch section entirely, change this back to a const user, and if we give that a save, you can see our error is being caught no matter if it's a synchronous based error or if it's an error being thrown right here. It's being caught exactly the same inside this catch statement, and that's because promise.try, all it does is it converts any errors that it gets, whether they're synchronous or asynchronous, it converts
- 7:41
them into an asynchronous based error that can be caught using dot catch, which will drastically clean up and make your code easier to work with. Now, for this next topic that I want to talk about, we're going to be talking about import attributes. And this is actually something you may not even be aware of cuz you're so used to using a bundler, but inside of just plain JavaScript, you can't actually import JSON. At least you used to not be able to. For example, if I were to come up here and I try to
- 8:02
import this user.json file, I can come in and I can say ./user.json and I can import that as a user just like this. Normally, this would not work. Just by default, if I run this code, it's going to give me an error. So, let's just make sure we try to log out what our user is. Just like that. And now if I come over and I look at our code, you can see
- 8:22
uncaught syntax error, cannot use import statements outside a module. Well, that's of course because our HTML needs to be set up to make this use modules. So, let's just come in here, type equals module. There we go. But now you can see we're actually getting the error, failed to load module script expected JavaScript module, blah blah blah, but you're getting JSON. Essentially, we can't import this JSON. At least we used to not be able to, but we can add this with
- 8:44
type JSON to the end of any of our imports that import JSON, and that's essentially going to tell our browser, "Hey, this is actually using JSON instead." So, now if we go to our page and we inspect and we look over at the console, you can see we're getting that user being printed out just like we expected. Now, currently this with type only supports JSON, but they're wanting
- 9:04
to add support for other things such as like CSS and so on. So, as the spec gets driven out further, we're going to see more things currently it's just JSON file support right now. Now, this is yet another really simple feature, but a huge quality of life feature. So, this is just escaping regular expression. Let's take for example this search. This search is using regular expression search behind the scenes, and if I were
- 9:25
to come in here and I were to type for example dot com, I want to search for all the things that end in dot com, when I search, you notice I actually get this dot edu result as well as my dot com results. The reason for that is because in regular expressions, dot stands for any character possible, so it just matches this @com right here. That's exactly the same cuz dot is a wildcard
- 9:46
inside of regular expression. If you're not familiar with regular expressions, I have a huge tutorial covering everything you need to know. I'll link it in the cards in the description for you. But, we can fix this very easily by using this regular expression.escape. All that does is it takes anything that you user input and essentially escapes out all these special characters and forces it to search for things that are just a period, for example. So, all we
- 10:07
need to do is just take our input that is being given to us by the actual user, wrap that in that regular expression.escape, just like this. And now, if we give that a quick save and we were to search for .com, you'll notice that only shows me the things that end in .com cuz it escapes out all of the special characters possible. This makes it so you can do regular expression searches,
- 10:27
for example, by adding your own stuff for surrounding it while taking in user input as part of that search without having to manually escape everything on your own. Now, this next one I want to talk about is again a small quality of life improvement, but it is the array.from async function. And essentially, it allows you to convert an iterable into an array. And this is really great for certain generators that you may have. In our case, I have an
- 10:48
asynchronous generator right here that fetches numbers from an API. And we have a function called get data and we send it a page and it's going to return to me the first five numbers from that page. So, every page has five numbers. So, if I get page one, it'll give me five numbers. If I get page two, it'll give me five numbers on page two, and so on. And what I want to do is I want to get all the numbers from the entire API. So,
- 11:10
to do that, I can call this array.from async and pass it in that function that I'm calling and it's going to loop through calling this over and over and over again asynchronously, combining all that data together into one single array. And if we look at this get data function, it doesn't really matter what it does, but as you can see, all I'm doing is I'm returning a brand new promise that gives me the first five numbers and then it gives me the next
- 11:31
five numbers, and the next five numbers until it gets to the very end. And in that case, it just returns the data as is. So, if we take a look at the final result from actually running this code, you can see here we get three arrays being returned. The first five numbers, the next five numbers, and the last five numbers, but in our case it's only three numbers at the very end. So, we just get three numbers showing up right there.
- 11:52
So, again, this array from a sync is really useful for when you want to take an asynchronous generator or iterable of any type. Usually it's going to be a generator though, and you want to loop through it, run all of the code, and get that back as a single piece of data that you can use wherever you want. Now, this next one is this error.isError function. This is just super simple. All it does is allows you to check to see if
- 12:12
something is an error or not. This may sound kind of dumb because you could just do an instance of error. For example, I can say if, and let's just create a variable, if A is an instance of error, well, then I know inside of here I have an error object. But the problem is is this instance of error doesn't actually work properly if you're going across boundaries, for example, across iframes
- 12:32
and things like that, and also may not work in other similar very niche situations. So, instead what we can do is we can just use that.isError function, and this is going to tell us is A an error or not. And of course, to make sure we do that correctly, this should be error.isError, and then we pass in our object we want to check. There we go. And now I know that if this is true, then inside of here A is going
- 12:53
to be an error, and we can do whatever I want with that particular error. Again, it's a small quality of life feature that just makes it easier to check errors instead of having to do an instance of, and it'll work in those niche scenarios where instance of actually doesn't quite work like we expect, and it'll actually solve problems where, for example, instance of would incorrectly return to you that something's an error just because it kind of matched the shape of an error
- 13:14
even though it actually wasn't an error. So, again, this will solve all of those problems for you. Now, at the beginning of this video I talked about nice quality of life features that came to set. We also have nice quality of life features for map. If you're unfamiliar with what map is, I have a full tutorial I'll link it the cards and description for you. It goes over everything you need to know, but essentially a map is like a dictionary. You have one type that goes to another type. And creating a map is really easy. We can just say
- 13:36
const A equals new map. And now we can essentially create associations. So we can say A. dot And if I want to add something into this map, I can just say set. I can give it a key, let's say one, and the value for this is going to be A. So now whenever I search for one by doing A. dot get of one, it's going to return to me that value of A. The problem is is that if
- 13:56
you wanted to essentially get or insert a value, also called an upsert, this was impossible. So you used to have to just check, "Hey, does this value exist? If it doesn't, set it to a default value, and then return that value as is." A little bit cumbersome and something you did all the time. So they just added a nice get or insert function that allows you to do all of that in one line. So now I can just say A.
- 14:18
dot get or insert. And what I can do is I can just pass it in my key, for example one, and I can pass it a default value, we'll say A. And now what's going to happen is this is going to give me a value right here, and this value is going to be equal to either what is currently inserted into my array at that key of one, or it'll fall back to the default value of A, and it'll make sure to put that default value into my map
- 14:40
properly as that value. We can also do get or insert computed. The only difference between the computed and non-computed version is the computed version takes a function as the second property, and then you get whatever your default value is. In our case we can just say A. This is only useful if this code to get the default value is computationally expensive. For example,
- 15:00
like maybe you're getting the Fibonacci sequence, that's very slow to do. So you use a function version cuz this will only ever be called one time, instead of called every single time get or insert is being called. Now this next function, Math.sumPrecise, helps with certain floating-point arithmetic that you may run into problems with. For example, if I just do a simple console.log
- 15:20
of 0.1 + 0.2 + 0.3, you would expect the result of this to be .6 but we actually inspect our page and we look over at the console you'll notice we get .6000001 and that's because we get some floating point arithmetic problems where you can't properly represent all numbers inside of floating points in computers it's just a general problem with computers. This is also a problem when
- 15:42
you try to add together really really large numbers. Let's just say I did e 1 to the 20 and I want to add .1 onto that and then I wanted to subtract out the exact same e to the 20th. So you would think in the end I would get .1 as my result but if we look at the result it gives us zero and that's because again when
- 16:02
is added to this very large number it essentially gets rounded off because of the way that the math works inside of a computer. We can try to fix this by using math.sumprecise. So we can come in here with sumprecise just like that and this takes in an array so let's just convert this to an array of values we want to add together. So we'll come in here make sure that this is a negative value
- 16:24
and now when we hopefully sum these together you can see we actually get being returned. So this makes it so you can sum very large numbers rather accurately compared to what you used to be able to do and now if we try to use that .2 .3 and so on result you'll see we now get but unfortunately it doesn't actually solve all the problems I'm talking about because if we remove that .3 you'll
- 16:44
still we still get that rounding error. So it can only help with certain rounding errors and that's because the way that this number .3 essentially inside of the binary of the computer it's just impossible to represent .3 exactly because of the way the computer is set up. So we can't solve this using sumprecise but for those larger number situations and for most fractional
- 17:05
situations sumprecise is going to give you a slightly more accurate accounting to what your actual result is going to be and will help you pretty much anytime you want to add together either really large numbers or decimal point numbers. Now this next one is unfortunately not available on every browser. Safari is still lagging, but it's an incredibly cool new feature that I am super excited to be coming to browsers, and that's the
- 17:25
ability to essentially have explicit resource management where you can automatically close out or clean up different things. In our case, we just have a class we're using, but you can use objects or anything else you want. And you can see we have a constructor that calls connected, so we're connecting to our database. We can query our database, and then we have this fancy symbol.dispose function that closes our database automatically for
- 17:46
us. And the way that this code works is essentially anything that you want. It could be an object, it could be a class, it doesn't matter. You can add on a property called symbol.dispose written out exactly like this as a function, and it's going to automatically call this function as soon as the variable that is being created from this leaves scope, essentially when it's garbage collected.
- 18:06
So, in our case, you can see that we have this function called main, which creates our database, it queries from our database, and then afterwards we call after just like this. So, in our case, it's going to create our database and log out the connection. Then it's going to query our database logging out query, and then finally, after this function's done, this database object no longer exists, we can't access it anymore. So, it's going to clean this up
- 18:27
automatically for us by calling this console.log closing. And then afterwards, it'll call after. Now, if we look at our console, you'll notice that it doesn't actually do that. You can see that this closing text is no longer showing up in here at all. The reason for that is because you can't create a normal constant variable. Instead, you need to use a new keyword called using. And using just tells JavaScript, "Hey,
- 18:48
whenever this variable goes out of scope, call this fancy symbol.dispose function automatically for me." Just by doing that, you can see automatically, as soon as we're done with this main function, it calls closing, and then it runs the code after the main function. So, this is a great way to make sure we automatically clean up any of the resources that we use inside of our application. That way we don't have like dangling connections to our database or
- 19:09
anything else like that. Like I said, it's not available in Safari yet, but it is available in every single other browser, and it's nice that you can use this inside of Node cuz honestly, Node is probably the most likely case you're going to use this. And if you're using the most up-to-date version of Node, it does support this. Now, this final topic that I want to talk about is the Temporal API, and I'm not going to go super in-depth in this video about it
- 19:29
cuz I have a full massive video on Temporal API that I'll link in the cards and description, and a full article I'll link in the description as well. But it's essentially an entire replacement for the Date API inside of JavaScript, and it makes it so you never need to download a date library ever again, cuz this Temporal API handles everything you could ever want from a date. It handles time zones, durations, formatting,
- 19:50
literally everything you could ever want from date library. Temporal handles it all for you. It's currently not in Safari yet, but there's a polyfill you can use if you want to start using Temporal. And this is something I've been super excited for. I literally made my video on this over 4 years ago, and it's still 100% up-to-date. So, I will link that video right over here for you, as well as in the cards and description. And again, if you want to master web
- 20:11
development, I highly recommend checking out my completely free web dev roadmap. This literally covers everything you ever need to know, whether you want to be a front-end or back-end web developer. It's got 260 plus videos, 60 plus articles, over 120 different projects. This is the ultimate roadmap you need. It's entirely free. Just go ahead, check this out. I will link it down in the description for you. With that said, thank you very much for watching, and have a good day.
Description
SponsorFREE Web Dev Roadmap: https://webdevsimplified.com/web-dev-...
JavaScript is constantly releasing new features such as ES2026 and ES2027 and in this video I will be covering all the new JavaScript features that I am most excited for.
📚 Materials/References:
SponsorFREE Web Dev Roadmap: https://webdevsimplified.com/web-dev-...
Generators Video: • Learn JavaScript Generators In 12 Minutes
Generators Article: https://blog.webdevsimplified.com/202...
Maps Video: • Another 5 Must Know JavaScript Features Th...
Maps Article: https://blog.webdevsimplified.com/202...
Temporal API Video: • Learn Temporal API In 17 Minutes
Temporal API Article: https://blog.webdevsimplified.com/202...
🌎 Find Me Here:
My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
01:04 - #1
02:49 - #2
05:36 - #3
07:47 - #4
09:13 - #5
10:34 - #6
12:05 - #7
13:18 - #8
15:10 - #9
17:16 - #10
19:24 - #11
#WebDevelopment #WDS #JavaScript
More from Web Dev Simplified
×2244:57The Best Local Agentic Coding Workflow (Complete Guide)
Web Dev Simplified1.1M views
×9.72:10Please… I Need Your Help
Web Dev Simplified459K views
×6.91:15:25The Ultimate MCP Crash Course - Build From Scratch
Web Dev Simplified327K views
×4.925:15I Will Never Use Prettier or ESLint Again
Web Dev Simplified231K views
