How to Add an Item to a Specific Array Position With JavaScript

Learn how to add an item to a specific array position (index) in JavaScript.

Let’s say you want to add an item to an array, but you don’t want to append (add it at the end) or prepend it (add it at the beginning). You want to add the item at a specific position/place of an array.

Note: when we walk about manipulating data at specific positions/places, we often call it the index. With array indexes we start counting at 0, which means that:

• 0 is 1
• 1 is 2
• and so on.

So if you have an array with 5 items, and you want access to the 3rd item, you’d address it as 2.

Alright, let’s do what you came here for.

Enter the splice() method

To add an item to a specific index position in an array, we can use the powerful JavaScript array.splice() method. The splice() method can add or remove items from an array.

The splice() syntax looks like this:

array.splice(startIndex)
array.splice(startIndex, deleteCount)
array.splice(startIndex, deleteCount, value1)

The splice() method takes 3 or more arguments:

• Argument 1: the startIndex which is where (the position) you want to add something.
• Argument 2: the optional deleteCount argument where you can specify how many items you want to delete (from the startIndex position).
• Argument 3: the new item value(s) you want to add to the array.

Practical splice() example

So let’s say that we have a cast list of actors from a fictive action-packed movie called “Ask Questions Later”. The actors are listed in an order based on the size of their role in the movie.

One actor from the cast decides to throw a tantrum because his name doesn’t show up in the main cast list:

const mainCastList = [
  "Michael Jai White",
  "Jean-Claude Van Damme",
  "Sigourney Weaver",
  "Jason Statham",
  "Uma Thurman"
  "The Rock",
  "Wesley Snipes"
]

And the upset actor is no other than the almighty Steven Seagal(!!) who appears in this movie exactly 7 seconds, just enough time to beat 10 enemies senseless. Mr. Seagal believes that this is enough screen time to put him on the main cast list.

And who is going to argue with Steven Seagal?

Alright, let’s add him to the main cast list, using the splice() method and the argument syntax you just learned about.

We’ll add Steven Seagal as the 2nd actor on the main cast list, right after Michael Jai White (I’ll explain why in a moment):

const mainCastList = [
  "Michael Jai White",
  "Jean-Claude Van Damme",
  "Sigourney Weaver",
  "Jason Statham",
  "Uma Thurman",
  "The Rock",
  "Wesley Snipes",
]

mainCastList.splice(1, 0, "Steven Seagal")

console.log(mainCastList)
// ["Michael Jai White", "Steven Seagal", "Jean-Claude Van Damme", "Sigourney Weaver", "Jason Statham", "Uma Thurman", "The Rock", "Wesley Snipes"]

There you go Steven, I hope you’re happy now!

And just because repetition is a crucial part of learning, this is what’s happening in the code above:

• We attach the splice() method to the mainCastList variable
• Then we apply 3 arguments to splice(), the startIndex position (1), the deleteCount (0 = nothing is deleted), and finally, the item we want to add at that index position ("Steven Seagal").

Oh and the reason we can’t add Mr. Seagal as number one of the list is that Michael Jai White would kick his ass, obviously.

Good to know about the splice() method

Add more items at once

If you want to add more items at once, you separate them by commas, like this:

mainCastList.splice(1, 0, "Steven Seagal", "Sylvester Stallone")

Delete all items from startIndex

If you don’t pass the 2nd argument (in our example, 0) then all items from the startIndex position will be removed by default. So be careful when using splice() on real-life projects.

Start from the array’s end

If you want to specify the position from which you want to add/delete items from the end of the array instead of the beginning, then use negative values, on the first splice() argument, like this:

mainCastList.splice(-1, 0, "Steven Seagal")
console.log(mainCastList)
// ["Michael Jai White", "Jean-Claude Van Damme", "Sigourney Weaver", "Jason Statham", "Uma Thurman", "The Rock", "Steven Seagal", "Wesley Snipes"]

Now Mr. Seagal is 2nd last on the main cast list, which is a bold decision that you make at your own risk.