Immutable array updates with Array.prototype.with

Browsers precocious gained a caller interoperable method that you tin telephone connected Arrays: Array.prototype.with().

This article explores really this method useful and really to usage it to update an array without mutating nan original array.

Intro to Array.prototype.with(index, value)

The Array.prototype.with(index, value) method returns a transcript of nan array it's called connected pinch nan scale group to nan caller worth you provide.

The pursuing illustration shows an array of ages. You'd for illustration to create a caller transcript of the array while changing nan 2nd property from 15 to 16:

const ages = [10, 15, 20, 25]; const newAges = ages.with(1, 16); console.log(newAges); // [10, 16, 20, 25] console.log(ages); // [10, 15, 20, 25] (unchanged)

Breaking down nan code:: ages.with(...) returns a transcript of nan ages variable without modifying nan original array. ages.with(1, …) replaces nan 2nd item (index = 1). ages.with(1, 16) assigns nan 2nd point to 16.

This is really you were capable to create a caller transcript of nan array pinch a modification.

This is beautiful useful erstwhile you want to make judge that nan original array remains unchanged, and this article covers immoderate of nan usage cases for this. But, for now, take a look astatine what would person happened had you utilized nan bracket notation:

const ages = [10, 15, 20, 25]; const newAges = ages; newAges[1] = 16; console.log(newAges); // [10, 16, 20, 25] console.log(ages); // [10, 16, 20, 25] (Also changed 🙁)

As you tin see, nan ages adaptable was besides modified successful this example. That’s because erstwhile you delegate ages = newAges, JavaScript does not transcript nan array but rather creates a reference to nan different array. So, immoderate alteration successful 1 will also affect nan different 1 arsenic they are some pointing to nan aforesaid array.

Array.prototype.with() and immutability

Immutability is astatine nan bosom of galore frontend libraries and frameworks, to name a few: React (and redux), and Vue

Also, different libraries and frameworks don't needfully require immutability but encourage it for amended performance: Angular and Lit

So, developers often had to usage different methods that returned copies of arrays which sacrificed codification readability:

const ages = [10, 15, 20, 25]; const newAges = ages.map((age, index) => { if (index === 1) { return 16; } return age; }); console.log(newAges); // [10, 16, 20, 25] console.log(ages); // [10, 15, 20, 25] (Remains unchanged)

Here's an illustration Codepen of really .with() tin beryllium utilized successful React successful combination with useState to immutably update an array of items:

Since nan .with() method returns a transcript of nan array, you tin concatenation multiple .with() calls aliases moreover different array methods. The pursuing illustration demonstrates incrementing nan 2nd and 3rd ages from nan array:

const ages = [10, 15, 20, 25]; const newAges = ages.with(1, ages[1] + 1).with(2, ages[2] + 1) console.log(newAges); // [10, 16, 21, 25] console.log(ages); // [10, 15, 20, 25] (unchanged)

Other caller immutable methods

Three different methods precocious became interoperable:

• Array.prototype.toReversed() which reverses nan array without mutating the original array.
• Array.prototype.toSorted() which sorts nan array without mutating nan original array.
• Array.prototype.toSpliced() which useful like .splice() but without mutating nan original array.

These 3 methods are, according to MDN, nan copying type of their counterparts. These methods tin besides beryllium utilized wherever immutability is expected or preferred.

In conclusion, immutable updates tin beryllium achieved much easy in JavaScript pinch 1 of nan 4 methods presented successful this article. Specifically, the .with() method makes it easier to update a azygous constituent of nan array without mutating nan original array.