Transcript
00:00:00If you think you know JavaScript, try and answer these questions.
00:00:02What does new date with the string 0 get you?
00:00:07Did you think it was Unix Epoch time?
00:00:09Well, you'd be wrong, because JavaScript sees the string 0 as the year 2000, because vibes.
00:00:14Okay, what if it was the number 0 though?
00:00:19Well, at least this one makes sense, it's January 1st, 1970,
00:00:22and knowing that, if we did date.pass on both of these 0s,
00:00:25we know they're not the same, so if we compared them, this should be false.
00:00:28Except, that's wrong.
00:00:30Date.pass only works on strings, so it coerces the number 0 into a string,
00:00:34so both of these are the year 2000 again.
00:00:36This is only question 3 of 28 in this quiz, and I am annoyed already.
00:00:40Thankfully though, Temporal is here to fix this,
00:00:42and that is just one of the four confirmed features for JavaScript 2027,
00:00:45as well as a few really interesting proposals that are close to confirmed,
00:00:48including one that could change how every framework works.
00:00:56Let's start with the big one, Temporal.
00:00:57This is the new date API that's been in the works for 9 long years,
00:01:01but in March it finally reached stage 4, meaning it's ready to go.
00:01:04If you don't know why this makes every JavaScript developer happy,
00:01:07I urge you to take that quiz.
00:01:08It is no surprise that most people use libraries like Moment, Luxon, or Date functions,
00:01:12and I've actually covered Temporal in full in a previous video,
00:01:15so subscribe to stay up to date with this kind of stuff.
00:01:18The TLDR of Temporal is instead of one messy date object that does every job poorly,
00:01:22you get separate types that each do one job properly.
00:01:24Temporal Plane Date is just a calendar date with no times or time zones to deal with.
00:01:28Plane Time is just a wall clock time with no dates to deal with.
00:01:31Instant represents a unique point in time, aka the nanoseconds since the Unix Epoch,
00:01:36without any time zone or calendar system.
00:01:38Zone Date Time is a full date in a real time zone,
00:01:40and it understands daylight saving time.
00:01:42And there's duration, which gives you real date math,
00:01:44so there's no more adding milliseconds or other random math scattered around your codebase.
00:01:48As an example of all of these working together,
00:01:50let's say I had a flight from New York to London that leaves at 8pm New York time on Sunday the 24th October,
00:01:55and the flight takes 7 hours.
00:01:57London is 5 hours ahead, so 8pm plus a 7 hour flight means 3am New York time,
00:02:01which means I should land at 8am in London.
00:02:03Except Temporal here is saying 7am, and it would be right.
00:02:07This flight actually happens on the night that the clocks go back in London,
00:02:09and Temporal knows that and is handling it for me.
00:02:12And if you don't believe that the clocks change mid-flight,
00:02:14you don't actually have to guess this,
00:02:15you can just use get timezone transition,
00:02:17which tells me the change was at 1am London time.
00:02:19As another example, if I had an 11am meeting that I want to push back one day,
00:02:23but overnight the clocks change,
00:02:24I don't suddenly want that meeting to be at 10am,
00:02:26and with Temporal, it doesn't have to be.
00:02:28It knows that I'm working in days here, and not hours.
00:02:31The other big advantage of Temporal is that everything is immutable now,
00:02:34so every operation returns a brand new object,
00:02:36so you don't have to guess anymore if your original date has been changed somewhere in your code.
00:02:40And if all of that wasn't good enough,
00:02:41it also makes sorting dates easier,
00:02:43working out days until easier,
00:02:45rounding dates,
00:02:45and months also start at zero.
00:02:47That is pretty groundbreaking stuff.
00:02:49It's just so much better than the JavaScript date object,
00:02:51and the good news is you don't have to wait to try this one.
00:02:53Firefox, Chrome, Node.js, and Dino already have this,
00:02:56Bun is coming soon,
00:02:57and Safari needs to catch up.
00:02:58Moving on to feature number two,
00:03:00we have explicit resource management,
00:03:01aka the using keyword.
00:03:03This one went stage four in May.
00:03:05Anytime you grab something that needs cleaning up,
00:03:06like a file handle, database connection, or a stream,
00:03:09you're supposed to release that when you're done.
00:03:10This typically meant try finally blocks everywhere,
00:03:13or you would just forget,
00:03:14and now you have a resource leak.
00:03:16Now though,
00:03:16the using keyword ensures that when a variable goes out of scope,
00:03:19whether that's because it's the end of the block,
00:03:20an early return,
00:03:21or an exception,
00:03:22JavaScript automatically calls the object's symbol.dispose method.
00:03:25On top of that,
00:03:26there's also a way of using for async cleanup with async dispose,
00:03:29and a disposable stack for composing several resources,
00:03:32so they tear down in reverse order.
00:03:33This is just one of those nice to have helpers
00:03:35that should help clean up some of our code with those try finally blocks,
00:03:38and the good news is,
00:03:39it's been in Firefox, Chrome, Node, Bun, and Dino for quite some time now,
00:03:42so you may have already used this one.
00:03:43Next up,
00:03:44for feature number three,
00:03:44we have a more niche one,
00:03:45which is joint iteration,
00:03:47aka iterator.zip.
00:03:48Let's say I had three arrays,
00:03:50names, age, and cities,
00:03:51and I want to combine these into one.
00:03:52Well, iterator.zip can do this,
00:03:54as it lets us iterate over multiple iterables in parallel,
00:03:56and gives us an array containing the next value for each input.
00:04:00There's also zip keyed that does the exact same thing,
00:04:02but gives you named objects instead,
00:04:03and both of them also have options for what happens when the input iterables are different lengths,
00:04:07so mode can be shortest,
00:04:08which means stop as soon as the shortest iterable runs out.
00:04:11This is the default.
00:04:12Longest will keep going until the longest iterable finishes,
00:04:15and strict will throw a type error if the input's a different lengths.
00:04:17With longest as well,
00:04:18you can actually provide padding values for what happens when there's a missing entry.
00:04:21These features seem like a continuation of the work that's been done on iterators over recent years.
00:04:26ES 2025 gave us the helpers like map, filter, take, and drop,
00:04:29and there's currently some stage three proposals like iterator chunking,
00:04:32iterator includes, and iterator join.
00:04:34Basically, just more and more features that remove the need for Lodash.
00:04:37You can actually only use zip in Firefox today,
00:04:39but hopefully the other ones catch up.
00:04:40Moving on to our fourth confirmed feature,
00:04:42this one's a pretty low level one,
00:04:43atomic stop pause,
00:04:45and I'll be quick with this one because unless you're writing multi-threaded code,
00:04:47with a shared array buffer,
00:04:49you're probably not going to come across it.
00:04:50If we create four bytes of memory that can be shared across threads or workers,
00:04:53and then we use those bytes as a one integer lock,
00:04:56then in a while loop, we use atomics.compareexchange
00:04:58to say if this value is unlocked, lock it,
00:05:01and if the value is locked,
00:05:02keep looping because someone else is using it,
00:05:04and we want to wait until they're done.
00:05:06This is called spinning or busy waiting,
00:05:08and the problem is that a tight loop like this can hammer the CPU.
00:05:11So atomics.pause is used to tell the runtime or the CPU,
00:05:14I'm intentionally spinning here,
00:05:16I'm waiting for something to change,
00:05:17and then the CPU can handle the spin loop a lot more efficiently.
00:05:20As you can see, that's a very low level feature,
00:05:22so it's mostly used by library authors or performance sensitive code,
00:05:25and it's supported in most browsers,
00:05:27Bundino,
00:05:28and even worked for me in Node,
00:05:29even though MDN said it shouldn't.
00:05:30So those are our four locked in features,
00:05:32all in stage four and expected to be part of ES 2027.
00:05:36But now let's talk about stage three,
00:05:37because some of these are available now.
00:05:39First, we have import defer.
00:05:40When used on an import,
00:05:41the module gets loaded,
00:05:42but none of its code actually runs until the first time you use it,
00:05:46so you get lazy execution.
00:05:47This is different from what dynamic imports give you,
00:05:49which give you lazy loading,
00:05:51so it waits to download the module,
00:05:52but it doesn't stop the top level code running once it's been fetched.
00:05:55This should help with some of the startup time of apps
00:05:57with really large dependency graphs.
00:05:59Second, there's promise.all keyed.
00:06:01Instead of promise.all handing you an array
00:06:03that you destructure by position,
00:06:04you pass an object and you get named results back.
00:06:06This one is a pretty small feature,
00:06:08but it made a lot of people very happy when it was announced.
00:06:11Next up, we have decorators.
00:06:12These have been stage three since 2022,
00:06:14but BUN ship standard decorators in February,
00:06:16and I do wonder when this will ever get to stage four.
00:06:19Finally, there's one proposal that I think is really exciting,
00:06:21but it's stage one,
00:06:22so it might take some time to appear,
00:06:24but that is signals.
00:06:25This would add a built-in reactive state primitive to JavaScript
00:06:27with writable values,
00:06:29computed values,
00:06:29and automatic dependency tracking,
00:06:31and the goal is to give frameworks like Angular,
00:06:33Vue, Svelte, and Solid
00:06:33a common low-level foundation for that reactivity,
00:06:36so they can all use a standardized core
00:06:38instead of their current independent implementations.
00:06:40There we go.
00:06:41That is what TC39 is expected to give us in ES2027.
00:06:44What's your favorite feature,
00:06:45and have you used it already?
00:06:47Let me know in the comments down below.
00:06:48While you're there, subscribe,
00:06:49and as always, see you in the next one.
00:06:50See you next time.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video