Functional splice
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.