💥 Unleashing the Power: New Array Methods That Will Revolutionize Your JavaScript Code!

Photo by Mohammad Rahmani on Unsplash

JavaScript is a dynamic and versatile language that is constantly evolving. One area where JavaScript has seen significant improvements is in its array methods.

#1. The .at() method is a powerful addition to JavaScript’s array methods, introduced in ES2022. This method provides a more intuitive way to access elements in an array based on their indices.

let’s see how it works

const DevStack = ["react", "tailwind", "Html", "css", "javascript"];

console.log(DevStack[DevStack.length-1]); // Output: "javascript"
console.log(DevStack[DevStack.length-2]); // Output: "css"

In traditional JavaScript, if you wanted to access the last element or the second last element of the array, you would do something like this

While this works perfectly fine, it can be a bit verbose. This is where the .at() method comes in. The .at() method allows you to access the element at a given index in an array in a more concise way. Positive integers count from the beginning of the array, and negative integers count from the end of the array.

Here’s how you can use the .at() method to achieve the same result as above:

const DevStack = ["react", "tailwind", "Html", "css", "javascript"];

console.log(DevStack.at(-1)); // Output: "javascript"
console.log(DevStack.at(-2)); // Output: "css"

#2. The .toSpliced() method, introduced in ECMAScript 2023 (ES14), is a significant addition to JavaScript’s array methods. This method was designed to address a common side effect of the .splice() method, which mutates the original array.

In contrast, the .toSpliced() method returns a new array based on the provided array, without altering the original array. This is particularly useful in scenarios where preserving the original array is crucial.

Note — only Valid in Nodejs > 20 version

let’s see the splice method:

const originalArray = ['react', 'tailwind', 'Html', 'css', 'javascript'];
originalArray.splice(0, 2, 'PHP', 'Laravel');

console.log(originalArray); // Output: ['PHP', 'Laravel', 'Html', 'css', 'javascript']

In this example, the .splice() method is used to replace the first two elements of originalArray with 'PHP' and 'Laravel'. The method mutates originalArray directly, and the array reflects these changes when logged to the console. This is a key difference between .splice() and .toSpliced(), with the latter not mutating the original array.

Now let’s see the toSpliced() Method:

const originalArray = ['react', 'tailwind', 'Html', 'css', 'javascript'];
const newArray = originalArray.toSpliced(0, 2, 'PHP', 'Laravel');

console.log(newArray); // Output: ['PHP', 'Laravel', 'Html', 'css', 'javascript']
console.log(originalArray); // Output: ['react', 'tailwind', 'Html', 'css', 'javascript']

As you can see, newArray is a modified version of originalArray, but originalArray remains unchanged. This makes the .toSpliced() method a powerful tool for managing arrays in JavaScript, enhancing code clarity and predictability.

#3. The .toSorted() method, introduced in ECMAScript 2023 (ES14), is a significant addition to JavaScript’s array methods. This method was designed to address a common side effect of the .sort() method, which mutates the original array.

Note — only Valid in Nodejs > 20 version

The .sort() method sorts the elements of an array in place and returns the array by Mutating it. Here’s an example:

const DevStack = ["react", "tailwind", "Html", "css", "javascript"];
DevStack.sort((a, b) => a.localeCompare(b));
console.log(DevStack); // Output: ["Html", "css", "javascript", "react", "tailwind"]

In this example, the .sort() method is used to sort the DevStack array in place. The array is sorted in ascending order based on the string values of the elements. The localeCompare function is used to ensure that the sort is alphabetic rather than Unicode order.

Now, if we had a .toSorted() method similar to our hypothetical .toSpliced() method, it would work like this:

const DevStack = ["react", "tailwind", "Html", "css", "javascript"];
const sortedArray = DevStack.toSorted((a, b) => a.localeCompare(b));
console.log(sortedArray); // Output: ["Html", "css", "javascript", "react", "tailwind"]
console.log(DevStack); // Output: ["react", "tailwind", "Html", "css", "javascript"]

In this example, sortedArray is a sorted version of DevStack, but DevStack remains unchanged. This is how we would expect the hypothetical .toSorted() method to work.

#4. The otoReversed() method, introduced in ECMAScript 2023 (ES14), reverses the order of elements in an array without mutating the original array. This is an improvement over the reverse method, which modifies the original array.

Note — only Valid in Nodejs > 20 version

The .reverse() method reverses the order of elements of an array and returns the mutated array. Here’s an example:

const DevStack = ["react", "tailwind", "Html", "css", "javascript"];
DevStack.reverse();
console.log(DevStack); // Output ["javascript", "css", "Html", "tailwind", "react"]

After executing DevStack.reverse(), the DevStack array is reversed, and the output of console.log(DevStack) is ["javascript", "css", "Html", "tailwind", "react"]. This shows that the original DevStack array has been altered.

Let’s now explore the .toReversed() method for the same array:

const DevStack=["react","tailwind","Html","css","javascript"]
const ReversedDevStack=DevStack.toReversed()
console.log(ReversedDevStack) // Output: [ 'javascript', 'css', 'Html', 'tailwind', 'react' ]
console.log(DevStack) // Output: [ 'react', 'tailwind', 'Html', 'css', 'javascript' ]

In this code snippet, we first declare an array DevStack. We then call the .toReversed() method on DevStack and assign the result to a new constant ReversedDevStack. When we log ReversedDevStack to the console, we see that it is a reversed version of DevStack. However, when we log DevStack to the console, we see that it remains unchanged. This demonstrates that .toReversed() does not mutate the original array.

#5. The .with(index,value)method was introduced in ECMAScript 2023 (ES14). It updates the value of a particular index with the given value, and the good thing about the with() method is that it returns a new array and doesn’t mutate the original array.

Note — only Valid in Nodejs > 20 version

let’s see an example:

const DevStack=["react","tailwind","Html","css","javascript"]
const newDevStack=DevStack.with(2,"TypeScript")
console.log(newDevStack) // [ 'react', 'tailwind', 'TypeScript', 'css', 'javascript' ]
console.log(DevStack) // Output: [ 'react', 'tailwind', 'Html', 'css', 'javascript' ]