A Practical Application

Consider a scenario with a list of tasks:

let tasks = [

'Walk the dog',

'Take out trash',

'Do laundry'

];

Suppose you want to add the task 'Buy groceries' at index 1. You can achieve this with:

tasks.splice(1, 0, 'Buy groceries');

// tasks is now:

// [ 'Walk the dog', 'Buy groceries', 'Take out trash', 'Do laundry' ]

The new task is inserted at index 1 without altering any existing entries. This method is beneficial because:

• It modifies the original array directly, so there’s no need for reassignment.
• You can insert items at any index by adjusting the parameter.
• You can add multiple items by including more arguments.

Inserting Multiple Items

To add several items at once, simply provide additional arguments to splice():

let tasks = ['Walk dog', 'Trash', 'Laundry'];

tasks.splice(1, 0, 'Groceries', 'Post office');

// tasks is now:

// ['Walk dog', 'Groceries', 'Post office', 'Trash', 'Laundry']

This way, both 'Groceries' and 'Post office' are inserted starting at index 1, making it easier than looping through to insert each item individually.

Adding Items at the End of the Array

Often, you might want to append an item to the end of an array. This can be done by using the array’s length as the index:

let tasks = ['Walk dog', 'Trash', 'Laundry'];

tasks.splice(tasks.length, 0, 'New task');

// tasks is now:

// ['Walk dog', 'Trash', 'Laundry', 'New task']

By passing the length, the new item will always be added at the end, regardless of the current size of the array.

Inserting at the Beginning of the Array

If you need to add an item at the start of the array, simply use an index of 0:

let tasks = ['Walk dog', 'Trash', 'Laundry'];

tasks.splice(0, 0, 'New first task');

// tasks is now:

// ['New first task', 'Walk dog', 'Trash', 'Laundry']

Using an index of 0 will place the new item(s) at the very beginning.

Alternative: Using Spread Syntax

The splice() method modifies the original array. If you prefer to keep the original intact, consider using spread syntax:

let items = [1, 2, 3, 4];

let result = [

...items.slice(0, 2),

5,

...items.slice(2)

];

// result is [1, 2, 5, 3, 4]

// original array remains unchanged

In this example:

1. A slice of the original array is taken up to the desired insertion index.
2. It is spread into a new array.
3. The new item is included.
4. The remainder of the slice is spread into the new array.

While this method is more verbose than splice(), it can be beneficial when you want to avoid mutating the original array.

Recap

• Utilize Array.prototype.splice() for inserting items into arrays.
• Specify the index, use 0 for delete count, and list the new item(s).
• Insert at the start with index 0 and at the end using the array length.
• Multiple items can be added simultaneously.
• Spread syntax offers a non-mutative alternative for insertion.

In my view, the splice() method is the most effective way to insert items into an array in JavaScript.

Explore More with Video Tutorials

To deepen your understanding, check out these helpful videos:

The first video titled 5 Ways to Add Items to Arrays in JavaScript provides various techniques for managing arrays in JavaScript.

The second video, How to Insert an Item into an Array at a Specific Index in JavaScript, focuses on inserting items at designated positions within an array.

Thank you for engaging with the In Plain English community! Don't forget to clap and follow for more insightful content.

Follow us on: X | LinkedIn | YouTube | Discord | Newsletter

Explore additional resources at Stackademic | CoFeed | Venture | Cubed

Find more content at PlainEnglish.io