Shiv Dev

New Array Methods in Javascript

Photo by Chris Ried on Unsplash

New Array Methods in Javascript

Shivananda Sai's photo
Shivananda Sai
·

2 min read

Table of contents

  • Recently, some new Array methods have been introduced. These are not yet supported by all browsers.

Array.with()

  • The Array.with() method in JavaScript is used to change the value of a given index in the array, returning a new array with the element at the given index replaced with the given value.

  • The original array is not modified. This allows you to chain array methods while doing manipulations.

      // We create a copy of the original array to make any change
  const animals = ["dog","cat","tiger"];
  const animalsCopy = [...animals];
  animalsCopy[1] = "lion";

  console.log("Original",animals); // ["dog","cat","tiger"];
  console.log("Copy",animalsCopy); // ["dog","lion","tiger"];

      // By using Array.with()
  const animals = ["dog","cat","tiger"];
  const animalsCopy = animals.with(1, "lion")

  console.log("Original",animals); // ["dog","cat","tiger"];
  console.log("Copy",animalsCopy); // ["dog","lion","tiger"];
    • we don't create a copy of the original array to make any change in the array.

Array.toSorted()

  • Array.toSorted() method in Javascript returns a new array with the elements sorted in ascending order, and it does not modify the original array.

  • When we use Array.sort() it modifies the original array.

const numbers = [8,4,0,1];
// We use the copy of the numbers array in order not to modify the original array
const sortedNumbers = [...numbers].sort();

console.log("Original", numbers); // [8,4,0,1]
console.log("Sorted",sortedNumbers); // [0,1,4,8]

const numbers = [8,4,0,1];
// toSorted() method will sort without modifying the original array
const sortedNumbers = numbers.toSorted();

console.log("Original", numbers); // [8,4,0,1]
console.log("Sorted",sortedNumbers); // [0,1,4,8]

Array.toReversed()

  • Array.toReversed() method in Javascript returns a new array with the elements sorted in reversed order, and it does not modify the original array.

  • When we use Array.reverse() it modifies the original array.

const numbers = [8,4,0,1];
// We use the copy of the numbers array in order not to modify the original array
const reversedNumbers = [...numbers].reverse();

console.log("Original", numbers); // [8,4,0,1]
console.log("Reversed",reversedNumbers); // [1,0,4,8]

const numbers = [8,4,0,1];
// We use the copy of the numbers array in order not to modify the original array
const reversedNumbers = numbers.toReversed();

console.log("Original", numbers); // [8,4,0,1]
console.log("Reversed",reversedNumbers); // [1,0,4,8]

Array.toSpliced()

  • Array.toSpliced() returns a new array with the specified elements removed, leaving the original array unchanged.

When we use Array.splice() method, it modifies the original array.

const array = [1, 2, 3, 4, 5]; 
array.splice(0, 2);  

console.log("Original",array); // [3, 4, 5]

const array = [1, 2, 3, 4, 5];
const newArray = array.toSpliced(0, 2);

console.log("Spliced",newArray); // [3, 4, 5]
console.log("Original",array); // [1, 2, 3, 4, 5]

Reference

Thanks for Reading 🚀

JavaScriptES6