Modern JavaScript Features (ES2020–ES2024) Every Developer Should Know

JavaScript has evolved dramatically over the past few years.

Modern ECMAScript updates transformed JavaScript into a cleaner, safer, and more developer-friendly language.

Features introduced between ES2020 and ES2024 solve many of the classic problems developers struggled with for years.

Optional Chaining (?.)

Optional Chaining prevents applications from crashing when accessing deeply nested object properties.

Old Approach

if (
    user &&
    user.profile &&
    user.profile.address
) {

    console.log(
        user.profile.address.street
    );
}

Modern Approach

const street =
    user?.profile?.address?.street;

If any property is undefined or null, JavaScript safely returns undefined instead of throwing an error.

Nullish Coalescing (??)

The Nullish Coalescing operator solves common problems caused by using the traditional OR operator.

Problem with ||

const port =
    options.port || 3000;

If port equals 0, JavaScript incorrectly falls back to 3000.

Modern Solution

const port =
    options.port ?? 3000;

The ?? operator only falls back when the value is null or undefined.

Promise.allSettled()

Traditional Promise.all() fails immediately if one promise rejects.

Modern applications often need all results, even if some requests fail.

const results =
    await Promise.allSettled([
        api1(),
        api2(),
        api3()
    ]);

Each result contains either:

• fulfilled
• rejected

This makes parallel request handling much safer.

Array.at()

The .at() method simplifies array indexing.

Old Syntax

const last =
    arr[arr.length - 1];

Modern Syntax

const last =
    arr.at(-1);

Negative indexes make array access cleaner and easier to read.

Immutable Array Methods

ES2023 introduced immutable versions of destructive array methods.

These methods are especially important in React applications where state mutation causes bugs.

• toSorted()
• toReversed()
• toSpliced()
• with()

Old Destructive Sort

users.sort(
    (a, b) => a.age - b.age
);

Modern Immutable Sort

const sortedUsers =
    users.toSorted(
        (a, b) => a.age - b.age
    );

The original array remains unchanged.

Array.with()

The with() method creates a modified copy of an array without mutating the original.

const original =
    ['a', 'b', 'c'];

const modified =
    original.with(1, 'NEW');

This pattern works perfectly with immutable state management.

Object.groupBy()

ES2024 introduced one of the most useful modern utilities for working with arrays.

Developers can now group objects without writing complex reduce logic.

const grouped =
    Object.groupBy(
        products,
        product => product.category
    );

This dramatically simplifies data transformation logic.

Why Modern JavaScript Matters

Modern JavaScript features are not simply syntactic sugar.

They improve:

• Code readability
• Error prevention
• Developer productivity
• Application maintainability
• Frontend state management

Best Features for React Developers

• Optional Chaining
• Nullish Coalescing
• toSorted()
• with()
• Promise.allSettled()

These features reduce common React state bugs and simplify component logic.

Conclusion

Modern JavaScript has become significantly cleaner and safer than older versions of the language.

Features introduced between ES2020 and ES2024 help developers write shorter, more maintainable, and less error-prone applications.

Understanding these modern patterns is now essential for professional JavaScript development.