Array: Insert an Item at a Specific Index with JavaScript

By  on  

There are many tasks related to arrays that sound quite simple but (1) aren't and (2) aren't required of a developer very often. I was encountered with one such task recently: inserting an item into an existing array at a specific index. Sounds easy and common enough but it took some research to figure it out.

// The original array
var array = ["one", "two", "four"];
// splice(position, numberOfItemsToRemove, item)
array.splice(2, 0, "three");

array;  // ["one", "two", "three", "four"]

If you aren't adverse to extending natives in JavaScript, you could add this method to the Array prototype:

Array.prototype.insert = function (index, item) {
  this.splice(index, 0, item);
};

I've tinkered around quite a bit with arrays, as you may have noticed:

Arrays are super useful -- JavaScript just makes some tasks a bit more ... code-heavy than they need to be. Keep these snippets in your toolbox for the future!

Recent Features

Incredible Demos

  • By
    Link Nudging with CSS3 Animations

    One of the more popular and simple effects I've featured on this blog over the past year has been linking nudging.  I've created this effect with three flavors of JavaScript:  MooTools, jQuery, and even the Dojo Toolkit.  Luckily CSS3 (almost) allows us to ditch...

  • By
    MooTools Zebra Tables Plugin

    Tabular data can oftentimes be boring, but it doesn't need to look that way! With a small MooTools class, I can make tabular data extremely easy to read by implementing "zebra" tables -- tables with alternating row background colors. The CSS The above CSS is extremely basic.

Discussion

  1. Man, isn’t this JavaScript powerful…

  2. MaxArt

    How about a little step further? Since splice takes an indefinite number of arguments, you can do something like this:

    Array.prototype.insert = function (index) {
      this.splice.apply(this, [index, 0].concat(this.slice.call(arguments, 1)));
    };
    

    so you can do

    array.insert(2, "three", "another three", "the last three");
    array;  // ["one", "two", "three", "another three", "the last three", "four"]
    
  3. Great tip, thanks. I knew this trick before but I forgot that splice could take more than 2 arguments, phew.

  4. Yes, it’s a very useful function. Last year I was delighted to find out that it exists – it made the project I was working on extremely useful.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!