Exploring New Array Methods: toSorted, toReversed, toSpliced, with() in JavaScript

Welcome to our latest blog post where we delve into some lesser-known array methods in JavaScript. Today, we’re going to discuss toSorted, toReversed, toSpliced, and with(). These methods might not be as commonly used as map, filter, or reduce, but they offer powerful functionality when you need to manipulate arrays in unique ways.

Let’s dive in with examples for each method:

1. toSorted

The toSorted method sorts the elements of an array and returns a new array with the sorted elements. It does not modify the original array.

const numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3];

const sortedNumbers = numbers.toSorted();
console.log(sortedNumbers); // Output: [1, 1, 2, 3, 3, 4, 5, 5, 6, 9]

2.toReversed

The toReversed method reverses the elements of an array and returns a new array with the reversed elements. It also does not modify the original array.

const fruits = ['apple', 'banana', 'cherry', 'date'];

const reversedFruits = fruits.toReversed();
console.log(reversedFruits); // Output: ['date', 'cherry', 'banana', 'apple']

3. toSpliced

The toSpliced method removes elements from an array and optionally replaces them with new elements. It returns a new array containing the removed elements. This method does modify the original array.

const colors = ['red', 'green', 'blue', 'yellow', 'orange'];

const removedColors = colors.toSpliced(1, 2, 'purple', 'pink');
console.log(removedColors); // Output: ['green', 'blue']
console.log(colors); // Output: ['red', 'purple', 'pink', 'yellow', 'orange']

4. with()

The with() method provides a way to execute a function with the array as its context (this value). This method can be useful for chaining array operations or for better readability.

const pets = ['dog', 'cat', 'rabbit'];

pets.with(console.log); // Logs: ['dog', 'cat', 'rabbit']

Remember, the with() method does not alter the array in any way; it’s merely a utility for executing functions with the array as context.

These array methods may not be as widely used as others, but they offer handy functionality for specific use cases. Experimenting with them can enhance your JavaScript coding skills and provide solutions to various programming challenges.