I have been using splice method to replace array values but recently learned a newer way for this purpose, thus sharing it with the rest.
Out with the Old ๐ฐ๏ธ - Splice Method
Let's take a look at the newer way of replacing values in an array using the splice method:
const initialFruits = ["๐", "๐", "๐", "๐", "๐"];
const newFruits = [...initialFruits];
newFruits.splice(3, 1, "๐");
console.log(initialFruits);
// ["๐", "๐", "๐", "๐", "๐"]
console.log(newFruits);
// ["๐", "๐", "๐", "๐", "๐"]
Not only is this approach cumbersome, but it also lacks the clarity we crave in modern JavaScript development. ๐ฉ
In with the New ๐ - With Method
Now, Let's take a look at the traditional way of replacing values in an array using the with method:
const initialFruits = ["๐", "๐", "๐", "๐", "๐"];
const newFruits = initialFruits.with(3, "๐");
console.log(initialFruits);
// ["๐", "๐", "๐", "๐", "๐"]
console.log(newFruits);
// ["๐", "๐", "๐", "๐", "๐"]
I found this method much more clearer than the older one. Let me know your thoughts. =)
Happy coding! ๐๐ปโจ
Follow me for more such content:
LinkedIn: https://www.linkedin.com/in/shameeluddin/
Github: https://github.com/Shameel123
Top comments (3)
Nice on, Shameel! ๐ฅ
Thanks! =D
It's true the API is a little cumbersome (often you want to either remove elements or add them, not do both in the same operation), but the main issue with it is in-place mutation. Sometimes that can be useful, but more often than not you want a copy of the array instead.
Array#withisn't a drop-in immutable replacement forArray#splice; it only covers theArray#splice(existingIndex, 1, singleReplacement)case. It's a much better API for that use case, but not as versatile asArray#splice.There is now a drop-in immutable replacement though, which is called
Array#toSpliced. It has an identical API toArray#splice, except it doesn't mutate the original array and returns the copied array with modifications.