DEV Community

Cover image for Enhance Your Code: The Latest and Greatest JavaScript Methods
Karthikeyan
Karthikeyan

Posted on

Enhance Your Code: The Latest and Greatest JavaScript Methods

Here are some of the latest and most useful JavaScript methods that have been introduced in recent versions of ECMAScript (ES2020, ES2021, ES2022, and ES2023):

1. String.prototype.replaceAll()

Replaces all occurrences of a substring in a string.

const str = 'foo bar foo';
const newStr = str.replaceAll('foo', 'baz');
console.log(newStr); // baz bar baz
Enter fullscreen mode Exit fullscreen mode

2. Promise.allSettled()

Returns a promise that resolves after all of the given promises have either resolved or rejected.

const promises = [
    Promise.resolve(1),
    Promise.reject('error'),
    Promise.resolve(3)
];

Promise.allSettled(promises).then((results) => {
    results.forEach((result) => console.log(result.status));
});
// fulfilled
// rejected
// fulfilled
Enter fullscreen mode Exit fullscreen mode

3. Logical Assignment Operators

Combines logical operations with assignment.

let a = 1;
a ||= 2; // a = a || 2
console.log(a); // 1

let b = 0;
b &&= 2; // b = b && 2
console.log(b); // 0

let c = null;
c ??= 3; // c = c ?? 3
console.log(c); // 3
Enter fullscreen mode Exit fullscreen mode

4. Nullish Coalescing Operator (??)

Provides a default value when the left-hand side is null or undefined.

const foo = null ?? 'default value';
console.log(foo); // default value
Enter fullscreen mode Exit fullscreen mode

5. Optional Chaining (?.)

Allows safe access to deeply nested properties.

const user = { address: { street: 'Main St' } };
const street = user?.address?.street;
console.log(street); // Main St
Enter fullscreen mode Exit fullscreen mode

6. BigInt

A built-in object that provides a way to represent whole numbers larger than 2^53 - 1.

const largeNumber = BigInt(123456789012345678901234567890);
console.log(largeNumber); // 123456789012345678901234567890n
Enter fullscreen mode Exit fullscreen mode

7. WeakRef and FinalizationRegistry

Allows creation of weak references to objects and registers a cleanup callback for when the object is garbage collected.

let target = { data: 'some data' };
const weakRef = new WeakRef(target);

const registry = new FinalizationRegistry((heldValue) => {
    console.log(`Cleaned up ${heldValue}`);
});

registry.register(target, 'some data');
target = null;
// Later, when garbage collected, "Cleaned up some data" will be logged.
Enter fullscreen mode Exit fullscreen mode

8. Array.prototype.at()

Allows relative indexing in arrays.

const array = [10, 20, 30, 40];
console.log(array.at(-1)); // 40
Enter fullscreen mode Exit fullscreen mode

9. Object.hasOwn()

A safer alternative to Object.prototype.hasOwnProperty.

const obj = { key: 'value' };
console.log(Object.hasOwn(obj, 'key')); // true
Enter fullscreen mode Exit fullscreen mode

10. Top-level await

Allows using await at the top level of modules.

// In a module file (e.g., module.mjs)
const data = await fetchData();
console.log(data);
Enter fullscreen mode Exit fullscreen mode

11. Relative indexing method for Strings

The at() method is also available for strings.

const str = 'hello';
console.log(str.at(-1)); // 'o'
Enter fullscreen mode Exit fullscreen mode

12. Object.fromEntries()

Transforms a list of key-value pairs into an object.

const entries = new Map([
    ['foo', 'bar'],
    ['baz', 42]
]);

const obj = Object.fromEntries(entries);
console.log(obj); // { foo: 'bar', baz: 42 }
Enter fullscreen mode Exit fullscreen mode

These methods and operators provide more flexibility and efficiency in handling common programming tasks.

Top comments (0)