Newest Features Worth Knowing

The last several editions of JavaScript have added features that remove whole groups of awkward code. These are the ones that come up most often in interviews and in real projects.

ES2020 brought optional chaining and nullish coalescing, which together let you handle missing values safely. The same edition added logical assignment, which lets you write a fallback without repeating the variable name three times.

ES2021 added the numeric separator, so you can write one million as a group of digits instead of a long run of zeros. It also added the replaceAll method, which does the thing that the regular expression flag always made you do before.

ES2022 brought the Object.hasOwn method, which replaces a pattern that used to appear everywhere, together with class fields and the at method on arrays for counting from the end. ES2023 brought the non-mutating array methods, so toSorted, toReversed, toSpliced, and with, along with findLast and findLastIndex. ES2024 brought the array grouping helpers.

// Optional chaining and nullish coalescing.
var settings = { nested: { theme: null } };
console.log(settings?.nested?.theme ?? 'light');   // light

// Logical assignment.
var retries = 0;
retries ||= 3;
console.log(retries);   // 3

// The replaceAll method.
console.log('a-b-c'.replaceAll('-', '+'));   // a+b+c

// Object.hasOwn, added in ES2022.
var target = { a: 1 };
console.log(Object.hasOwn(target, 'a'));   // true

// The at method for indexing from the end.
var letters = ['a', 'b', 'c'];
console.log(letters.at(-1));   // c

// findLast, from ES2023.
console.log([1, 2, 3].findLast(function (n) { return n > 1; }));   // 3

The grouping helpers are the newest and the most interesting of these. They let you group a collection by a key in a single call, which used to mean writing a reduce with an accumulator every time. The function takes an array and a callback that returns the key for each element, and it gives you back an object and not a map, so the keys are always strings.

There is one caveat to keep in mind about the new array methods. The non-mutating ones, so toSorted and its relatives, are the safer default because they leave the original array alone. The older mutating versions still exist and they are still everywhere in older code, so you need both of them in your head. The grouping helpers are also recent enough that you should check the browser support you need before you rely on them, or you can keep a small helper of your own.

The 2023 edition added four array methods that give you a new array instead of changing the array they were called on, and the older mutating versions of the same operations are still here as well.

// Newer array methods that do not mutate the original.
var values = [3, 1, 2];

console.log(values.toSorted(function (a, b) { return a - b; }));   // [1, 2, 3]
console.log(values.toReversed());                                  // [2, 1, 3]
console.log(values.with(0, 9));                                    // [9, 1, 2]
console.log(values);                                               // [3, 1, 2] unchanged

console.log(values.findLast(function (n) { return n < 3; }));       // 2
console.log([1, 2, 3].toSpliced(1, 1));                             // [1, 3]

Here is why they were added. The older mutating methods, which are sort, reverse, and splice, are a well known source of bugs. This is especially true in a React application, where a state array that is sorted in place is not noticed as changed, because the reference to the array is still the same one. The new methods remove that trap, because the result is always a new array with a new identity, so the change is visible.

Each of them has a clear counterpart. The toSorted method is the non-mutating sort. The toReversed method is the non-mutating reverse. The toSpliced method is the non-mutating splice, and it takes the same start, count, and items arguments. The with method replaces one element at an index without changing the array.

There are two related additions in the same edition. The findLast and findLastIndex methods search from the end of the array, which is how you pick the most recent entry in a log or the last matching item in a list. And the copyWithin method has been around since older editions, but it is rarely used, because the new methods cover the common cases in a clearer way.

Most new language features are worth adopting, but there are a few that deserve some caution. The reasons are usually about the tools around the language and not about the language itself.

The very newest additions. The grouping helpers from the 2024 edition are the clearest example. They are elegant, but they are new enough that older browsers, older runtime versions, and some build tools do not support them yet. If your project has to run in an environment that you do not control, check first, and keep a small helper of your own if the answer is not clear.

Decorators. The proposal has changed shape several times, the support in tools is still uneven, and the syntax is not in the main specification yet. It is interesting to know about, and it is a poor choice for production code that you have to maintain.

Anything that changes the meaning of existing code quietly. The new array methods are safe, because they are new names and nothing that already exists changes. Be careful with features that alter the behaviour of code you have already written, because that change can stay invisible until it is far too late.

Features that your build cannot translate. This is the general rule. Any syntax that your tools cannot parse will fail at build time on the machines that lack it, and the failure often shows up in a browser that you do not test in. If your build has to support older browsers, check that the tools handle a feature before you use it.

There are two things to avoid that have nothing to do with syntax. Do not adopt a new feature just because it is shorter, when the older version is clearer to the person who reads it next month. And do not use a brand new feature in a shared library, because you will be forcing every consumer of that library to have a runtime that supports it.