6 or So New Approved and Proposed JavaScript APIs  ## Metadata - Author: [[Syntax - Tasty Web Development Treats]] - Full Title: 6 or So New Approved and Proposed JavaScript APIs - Category: #podcasts - URL: https://share.snipd.com/episode/19aceb4a-b779-4236-a3e3-83c6384994d2 ## Document Notes ## Highlights - Episode AI notes 1. The speaker successfully navigated through a difficult area and encountered new JavaScript features along the way. 2. The promise.withResolvers method provides more control over when a promise is resolved or rejected. 3. The method returns the resolve and reject functions, enhancing flexibility in promise handling. 4. The dot.at method simplifies accessing array and string elements using negative indices. 5. Negative indices in square brackets couldn't be added to array syntax due to potential conflicts. 6. The dot.at method is more type-safe in TypeScript. ([Time 0:00:00](https://share.snipd.com/episode-takeaways/b5992414-56a9-4c92-99c5-d2299c41ac04)) - Navigating through an underdeveloped area and new JavaScript features In a treacherous journey through an underdeveloped area, the narrator perseveres and feels empowered to tackle anything with JavaScript. They discuss the promise.withresolvers method, which allows for more control over resolving or rejecting a promise. They also mention the dot.at method, which simplifies accessing array and string elements by allowing negative index values. The immutable array methods and the potential new ones are also mentioned. These methods provide more flexibility and cleaner code in manipulating arrays. Overall, the narrator finds these updates to JavaScript helpful and exciting. Transcript: Scott Tolinski An area that was pretty underdeveloped you know yeah uh their roads were definitely i'm gonna say iffy at large parts of it and we got we got caught in like a thunderstorm on like the day That we were furthest away so i'm it's like pitch black and storming and there's giant hydroplaning puddles everywhere and it was like very treacherous. But hey, I made it. And I feel really good about it. So awesome. I can do anything now with JavaScript if I can do that. Wes Bos All right, let's get into the let's rattle through what the methods are real quick. So we're going to hit promise.withresolvers array and string.at. The immutable array methods, which we have touched upon before array grouping. And then this last one, which is crazy, observable events, which I saw this and I was just like, yeah, I think I want that. I want. Scott Tolinski So yeah. Yeah. Wes Bos Oh, good. I'm glad we're on the same page. Let's start with the first one, which is promise dot with resolvers. This is currently in stage three. To give you a quick rundown of what the different stages are, you have stage zero, straw man. Stage one, proposal. Stage two, draft. Stage three, candidate. So the proposal is considered complete and ready for review, including extensive testing and implementation feedback. So like once it hits stage three, the browsers generally start to put it in the browser. Sometimes they even ship it unflagged and you can just try it out. And like, that's kind of like the last chance to say like, oh, we missed something major, but almost nothing pops up at stage three. And then stage four is totally finished. So stage three is like, that means we're going to get it. And what this is, is a promise can, like when you return a promise and you store it in a variable, there's really only two things you can do. You can wait for the thing to be resolved with dot then or await, or you can pass it to promise all, promise all settled, or you can wait for the thing to reject, right? Once you actually have a promise in a variable, that's the two things that you can do. I guess you could also cancel the promise as well. Can you? No, you can't because no, there's no method on it. So you can only wait for it to resolve or reject. And if you want to control how or when a promise is resolved or rejected, the work generally needs to happen inside of the promise callback. So you have a new promise or you have an async function. And then all of the logic that needs to reject or resolve the promise needs to happen inside of that callback. So generally, you're passing all of the functions that need to do the work into it. The flip side to that is promise.withresolvers will return the promise, but it will also return the resolve and reject methods for you. So that you sort of have these portable little switches or portable triggers to your promise that you can then pass those functions into other things. So the way that I think about it is currently you have to pass the work into a promise. And this will allow you to pass the resolve and reject methods into the work. That's really handy if you have a route handler and you have a method that returns something. You can keep your logic inside the route handler instead of having to pass the route handler response into another function. So you can make it work right now where you basically have a function. You can outscope the resolve and reject. You can bump them out of scope and return them as variables. And people often call this a deferred. And this is what a lot of libraries currently already do. So this will allow you to do that natively with resolvers function. Wow. Scott Tolinski I think that the way you described it as letting you pass it into the work, being more portable, is the key sentence that unlocked this whole thing to me. Because when I was doing research for this, the very most thing I wanted to ask you is, really, what does this solve? What problem does this solve? And that really succinctly, I think, gets to the heart at it. So really neat stuff here. It's funny when proposals like this show up, I instantly go, okay, I've lived my whole life without something like this. Why do I need this? Why would I ever need it? It definitely does seem like to help with ergonomics a bit there. And I'm happy to have that, especially around promises. Wes Bos Another really good example is they show this in the, they had like a presentation for like why we need to add this is if you're working with streams, streams have events like on data, On end, on start, on error, right? And if you want to convert, if you want to resolve or reject on any of those events, that's kind of annoying because then you have to put the stream inside of the promise and it's a little Bit messy. So just being able to have a straight up resolve reject method that you can use in any of your callbacks is really nice. Yeah, cool. Scott Tolinski Well, let's talk about.at, the at method. The app method, man, this is something if you've worked in other languages, maybe like Python, coming back to arrays and JavaScript will feel like accessing the correct properties Is a giant pain. So this at method is currently in all browsers. It's a node, it's in Dino, it's everywhere. And this thing allows you to access various positions in an array with the same way that we have before zero one zero through whatever the index is. But also you can use negative numbers to work backwards from the end of the array. So if you pass in a negative one, it's going to give you the last item in the array. And this is definitely how arrays work in Python. And in Python, you're actually able to do brackets, negative one directly when accessing something. Like square bracket, yeah. Yeah. And I love, I love that. So not being able to do that in JavaScript has always bit me because it's like, oh, I just want to do that. And now we can do it with dot at again which is now supported everywhere so you can do it um i gotta i gotta love this and you know like you have mentioned in here it even works with strings You want to grab the last character from a string you do dot at negative one and and likewise uh negative two is going to be the second to the last so it's not just negative one it's any negative Number starts at the end and works backwards. Making, you know, finding things in arrays or strings very, very nice. Wes Bos Yeah, there's a couple other benefits to it. Because anytime I tweet about it, I get a lot of people, like, I got so much anger from people being like, this is bloat. Why can't this? Just like, we already have square brackets to access indexes on arrays. Why do we ([Time 0:04:28](https://share.snipd.com/snip/0fc0e5e7-b5c8-453a-bd65-21d172476424))