According to MDN docs:
The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.
What if I wanted to do it in a functional way?
I would use the functional slice() method in combination with spread syntax
Here is the idea:
const items = ['item1', 'item2', 'item3', 'item4', 'item5'];
const position = 3; // aka "array index"
const newItems = [
...items.slice(0, position),
'NEW ITEM',
...items.slice(position)
];
// newItems = ['item1','item2','item3','NEW ITEM','item4','item5'];
// items = ['item1', 'item2', 'item3', 'item4', 'item5'];
Reusable function
Here is the implementation as a function with the same features of the splice() method:
const functionalSplice = (items, position, deleteCount, ...newItems) => ([
...items.slice(0, position),
...newItems,
...items.slice(position + deleteCount)
]);
const items = ['item1', 'item2', 'item3', 'item4', 'item5'];
const newItems_pos3 = functionalSplice(items, 3, 0, 'NEW ITEM middle 1', 'NEW ITEM middle 2');
// ['item1', 'item2', 'item3', 'NEW ITEM middle 1', 'NEW ITEM middle 2', 'item4', 'item5']
const newItems_start = functionalSplice(items, 0, 1, 'NEW ITEM start');
// ['NEW ITEM start', 'item2', 'item3', 'item4', 'item5']
What if I wanted to add an item at the end of the array?
The solution is using Infinity (or items.length, but Infinity is easier!)
const newItems_end = functionalSplice(items, Infinity, 0, 'NEW ITEM end');
// ['item1', 'item2', 'item3', 'item4', 'item5', 'NEW ITEM end']
Array.functionalSplice()
Here is the implementation as a function in the Array prototype, mimicking the splice() signature:
Array.prototype.functionalSplice = function (position, deleteCount, ...newItems) {
return [
...this.slice(0, position),
...newItems,
...this.slice(position + deleteCount)
]
};
const items = ['item1', 'item2', 'item3', 'item4', 'item5'];
const newItems_pos3 = items.functionalSplice(3, 0, 'NEW ITEM middle 1', 'NEW ITEM middle 2');
// ['item1', 'item2', 'item3', 'NEW ITEM middle 1', 'NEW ITEM middle 2', 'item4', 'item5']
Modern functional splice: toSpliced() to the rescue!
JavaScript added a new Array method called toSpliced() that finally solves the problem.
The signature is identical to the splice() method, but it returns a copy of the original array.
If you want to check whether your browser supports this feature, you can browse caniuse.com to have more details.
Demo
I created a demo on stackblitz if you want to play with it.
Top comments (0)