How to insert an element at a specific array index with JavaScript

In this article, I’ll teach you how to add an element to a JavaScript array but set it to a specific position.

Let’s set the stage. I have a sidebar menu with a couple of items in it.

const sidebarMenu = ['home', 'about', 'contact'];

However, for premium users, I want to add the courses menu. It has to show right before the contact item.

Add an element to an array at a specific index with JavaScript permalink

To add this item, we can use the splice method. This method has multiple powers and can even be used to delete items. So be very careful when setting the parameters.

To set an item, we can use the first parameters to define the position, and everything after that is the items we push.

if (premiumUser) {
  sidebarMenu.splice(2, 0, 'courses');
}

Our sidebarMenu now has the following content: [ 'home', 'about', 'courses', 'contact' ].

So let’s see what the numbers mean:

• the first one (2): start position
• second one (0): delete count
• the rest: items to add

It’s important to note that JavaScript arrays start at zero, so when defining the start position, you must keep that in mind.

Our array counts like this:

• 0: Home
• 1: About
• 2: Contact

With the splice method, we technically say: Add an item at position two, don’t remove any existing elements, and the element to add is ‘courses’.

Adding multiple elements permalink

A super cool thing about splice is that it has no limit to how many items it can add. So we can even add multiple items.

if (premiumUser) {
  sidebarMenu.splice(2, 0, 'courses', 'profile');
}

// [ 'home', 'about', 'courses', 'profile', 'contact' ]

Thank you for reading, and let’s connect! permalink

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter