In previous articles, I've covered that Javascript stores objects and arrays in heap storage. That means that an array is created once, and then any updates to it in the future will update that original array. For example: let myArray = [ 1, 2, 3 ];
let newArray = myArray;

newArray[0] = 2;

// Both return [ 2, 2, 3 ]
console.log(newArray, myArray); As such, we often find ourselves making copies or cloning arrays to make changes on them without affecting the original. A common way to do that is with operator: the three dots let myArray = [ 1, 2, 3];
let newArray = [...myArray];

newArray[0] = 2;

// Returns [ 2, 2, 3 ] and [ 1, 2, 3 ]
console.log(newArray, myArray); Since cloning is so common, which has reached stage 3, which will give us a host of new ways to copy and then change an array. This proposal is called the proposal. Let's take a look at how it works. a new specification has been written "Change Array by Copy" Support Currently, these features are not supported in any major browser or Node.JS version. We can expect them to be supported soon though since this specification has reached Stage 3 in the Javascript proposal process. This section will be updated as support changes. Saying that, a does exists to recreate the behaviour of this proposal, which you can use today. polyfill New Change Array by Copy Methods The new proposal adds 4 new methods which will an array, and then change it in some way. These are: copy - clone an array, and then reverse it Array.prototype.toReversed() - clone an array, and then sort it. Array.prototype.toSorted(compareFn) - clone an array, and splice it in some way. Array.prototype.toSpliced(start, deleteCount, ...items) - clone an array, and add a new element somewhere within it. Array.prototype.with(index, value) All of these methods will work on data too, for example, . TypedArray Int8Array toReversed() does exactly what it says - it takes an array, and reverses it. Since this function clones the array, we don't need to do any copying to create a new version of our original array: toReversed let x = [ 1, 2, 3 ];
let y = x.toReversed();

// Returns [ 1, 2, 3 ], [ 3, 2, 1 ]
console.log(x, y); toSorted() , is a non-destructive version of , meaning it does not alter the original array. By default, will take an array and sort it numerically. For example: toSorted sort() let x = [ 5, 3, 4, 2, 1 ];
let y = x.toSorted(); // [ 1, 2, 3, 4, 5 ] It also accepts a comparison function, which works the same as the method in Javascript, and is useful when working with an array of objects. For example: sort() let x = [
    { value: 0 },
    { value: 4 },
    { value: 2 },
    { value: 3 }
];

// y becomes:
// [
//    { value: 0 },
//    { value: 2 },
//    { value: 3 },
//    { value: 4 }
// ]
let y = x.toSorted((a, b) => {
    return a.value - b.value
}); toSpliced() is a non-destructive version of , meaning it does not alter the original array. It accepts three arguments: toSpliced() splice() - the position to start at. start - the number of elements to remove. deleteCount - any items to insert at the start position after deletion. ...items For example: let x = [ "Dog", "Cat", "Zebra", "Bat", "Tiger", "Lion" ];

// y is [ "Dog", "Snake", "Bat", "Tiger", "Lion" ]
let y = x.toSpliced(1, 2, "Snake");

// z is [ "Dog, "Tiger", "Lion" ]
let z = x.toSpliced(1, 3); is a perfect example of how these copy functions are useful - using the original method, we would remove elements from and permanently change them. Using , we can change many times, without worrying about its contents changing. The above splice() x toSpliced() x with() Finally, we have , which simply changes one element in an existing array. In essence, take Array and show it something else. Here is an example of it in action. with() A with let x = [ "Dog", "Cat", "Lizard" ]
// y is now [ "Dog", "Zebra", "Lizard" ]
let y = x.with(1, "Zebra")
// z is now [ "Tiger", "Cat", "Lizard" ]
let z = x.with(0, "Tiger") Again, , without having to create a copy each time. we've been able to make multiple new arrays from one initial array Conclusion These array additions are pretty uncontroversial, and much-needed addition to a language that normally maintains only one copy of an array or object. Using these new methods, Javascript removes confusion and complexity in code. Although not as big of a change as something like , it is still a welcome addition to the language. Temporal Also Published here

Mozilla

How the TypeScript NonNullable Type Works

TypeScript's Omit Type Explained

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - Tip Your Hat Tutorials Best Tutorials

Nominated for 2022 - HackerNoon Contributor of the Year - Java

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Too Long; Didn't Read

The Array Methods Coming to JavaScript in 2022

The Array Methods Coming to JavaScript in 2022

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

2 Quick and Easy Ways to Fix 'Uncaught SyntaxError: Cannot use import statement outside a module'

A Deep Dive Into the JavaScript Some() Method

Array Filter vs Array Reduce vs For Loop

Array Manipulation: Understanding JavaScript Array Methods

Demystifying Javascript Array Methods with Practical Examples

Learn JavaScript Array Methods in just 8 Minutes!!

2 Quick and Easy Ways to Fix 'Uncaught SyntaxError: Cannot use import statement outside a module'

A Deep Dive Into the JavaScript Some() Method

Array Filter vs Array Reduce vs For Loop

Array Manipulation: Understanding JavaScript Array Methods

Demystifying Javascript Array Methods with Practical Examples

Learn JavaScript Array Methods in just 8 Minutes!!

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps