DEV Community

Cover image for Functional Array.splice()
Daniel Zotti
Daniel Zotti

Posted on • Originally published at danielzotti.it

Functional Array.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'];
Enter fullscreen mode Exit fullscreen mode

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']
Enter fullscreen mode Exit fullscreen mode

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']
Enter fullscreen mode Exit fullscreen mode

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']
Enter fullscreen mode Exit fullscreen mode

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more