Hot Spec Summer is back again

Today’s issue: Getting in trouble on MDN’s new playground, driving the anonymous tuple element hype train, and the return of Backbone.js.

Welcome to #203.

---

Hot Spec Summer is back again

ECMAScript 2023 was officially approved last month, which means it’s time to welcome some new features into the JavaScript family.

To celebrate, we’re hosting our third annual Hot Spec Summer™️ — a friendly pagan ritual tradition where we drink a ceremonial cocktail of white Monster, purple Kool-Aid, and red Pop Rocks, then go on a vision quest to predict which new JS features will be the most beneficial in the future.

To help you keep score at home, we’ll rate each new ES2023 feature on a hotness scale of 1-5 🔥. Let’s dive in:

Array.findLast() and Array.findLastIndex() — Two new methods to start searching an array from the end, instead of the beginning.

🔥 Rating: 3.2/5. This gives you a cleaner way to do reverse order searches that doesn’t require manual array reversals or complex index calculations.

Hashbang Grammar — Not to be confused with The Hash-slinging Slasher, we can now use the hashbang symbol, #! at the beginning of a script to specify which JS interpreter you want to execute the script.

🔥 Rating: 2/5. This idea comes from the Unix world and was already implemented in non-browser environments like Node.js, which is probably still the most common place you’d use it.

Symbols as WeakMap Keys — This extends the WeakMap API to allow unique Symbols to serve as keys now too. Previously, only objects could serve as keys.

🔥 Rating: 4.1/5. Symbols help provide more clarity and better ergonomics around WeakMaps, which should help more developers utilize the API’s memory-optimization benefits.

Change array by copy — We’ve been blessed with four new-but-familiar methods on Array.prototype that let you make changes on an array and return a new copy of it with the change, without mutating original array. You can probably already guess what these do: toReversed(), toSorted(), toSpliced(start, deleteCount, ...items), and with(index, value).

🔥 Rating: 5/5. This 4-for-1 special is an even better deal than you can get at Wendy’s. And these new methods should become immediately relevant for JS developers who want to avoid mutations.

Bottom Line: Please remember to celebrate Hot Spec Summer responsibly.

---

Courier will save you weeks of notification work

Building notifications from scratch is so terrible that I used to switch jobs rather than deal with that mess.

But the tech job market ain’t what it used to be, so thank goodness for Courier – a simple API that lets you manage all your notification infrastructure in one place.

And they just launched Inbox, which helps you build an in-app notification experience your users will actually enjoy, with a fraction of the work.

Inbox comes with a powerful API, customizable components for web and mobile, and tons of advanced features like mobile push, toasts for the web, batching, and more.

A Senior PM at billion-dollar startup (Oyster HR) said that Courier “saved 4 engineers 3 months of work from not having to construct notification infrastructure, design UI, and develop them to spec.”

How many dev hours could you save? Try it out for free.

---

Have a job you want to fill?

---

What gets logged?

for (var i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), i * 1000)
}

---

1. MDN introduced their own playground, so you can play with their interactive code samples yourself. It reminds me of my elementary school playground, except I haven’t gotten arrested here for selling fake cigarettes (yet).

2. Expo SDK 49 comes with v2 of the Expo router, the ability to inspect network requests directly in JS debugger, built-in React devtools and more.

3. What’s the biggest development trend for 2023? Take the Developer Nation survey, share your opinion about tools and technologies, and win cool prizes like an Apple MacBook Pro 13-Inch, AirPods, and more! Start here. [sponsored]

4. Una Kravets and (our best friend) Adam Argyle gave a 45-minute talk about The future of responsive design at Figma’s Config 2023 Conf.

5. Orta Therox wrote a new section in the React docs about Using TypeScript with React. It’s not public yet, so here’s the vercel preview link, lol.

6. Neon is a set of Rust bindings for writing “safe and fast” native Node modules.

7. Svelte did a complete overhaul of the Svelte.dev site. It looks great, but I did find it a little strange that they wrote it all in Backbone.js 🤷‍♂️.

8. Some folks are calling the TypeScript 5.2 beta the most exciting TypeScript release ever. But I’m pretty sure those people are just early investors in Anonymous Tuple Elements trying to pump their bag.

---

What gets logged?

for (var i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), i * 1000)
}

A little throw back for all you old heads. This used to be everyone’s favorite JavaScript interview question.

This code will eventually log 5, 5 times.

The reason for this is because we declared our variable with var, which is function scoped. By the time our functions given to setTimeout run, i will already be 5 and every function will reference that same variable.

To fix this, use let which is block scoped and will give each iteration of our for loop its own i.

for (let i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), i * 1000)
}

or you can capture the correct value of i by passing it as an argument to the function via setTimeout’s third argument.

for (var i = 0; i < 5; i++) {
  setTimeout((capturedI) => console.log(capturedI), i * 1000, i)
}

or you can use an IIFE to kind of do the same thing, lol.

for (var i = 0; i < 5; i++) {
  ((capturedI) => 
    setTimeout(() => console.log(capturedI), i * 1000)
  )(i);
}