Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

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!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

Incredible Demos

  • By
    Smooth Scrolling with MooTools Fx.SmoothScroll

    I get quite a few support requests for my previous MooTools SmoothScroll article and the issue usually boils down to the fact that SmoothScroll has become Fx.SmoothScroll. Here's a simple usage of Fx.SmoothScroll. The HTML The only HTML requirement for Fx.SmoothScroll is that all named...

  • By
    Vertically Centering with Flexbox

    Vertically centering sibling child contents is a task we've long needed on the web but has always seemed way more difficult than it should be.  We initially used tables to accomplish the task, then moved on to CSS and JavaScript tricks because table layout was horribly...

Discussion

  1. Aram Koukia

    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. Mahdi

    Great tip, thanks. I knew this trick before but I forgot that splice could take more than 2 arguments, phew.

  4. Filip

    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!