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.