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.