A better way to splice an array into an array in javascript

You can use apply to avoid eval:

var args = [start, number].concat(newItemsArray);
Array.prototype.splice.apply(theArray, args);

The apply function is used to call another function, with a given context and arguments, provided as an array, for example:

If we call:

var nums = [1,2,3,4];
Math.min.apply(Math, nums);

The apply function will execute:

Math.min(1,2,3,4);

UPDATE: ES6 version

If your coding in ES6 you can use the "spread operator" (...)

array.splice(index, 0, ...arrayToInsert);

To learn more about the spread operator see mozilla documentation.

The 'old' ES5 way

If you wrap the top answer into a function you get this:

function insertArrayAt(array, index, arrayToInsert) {
    Array.prototype.splice.apply(array, [index, 0].concat(arrayToInsert));
}

You would use it like this:

var arr = ["A", "B", "C"];
insertArrayAt(arr, 1, ["x", "y", "z"]);
alert(JSON.stringify(arr)); // output: A, x, y, z, B, C

You can check it out in this jsFiddle: http://jsfiddle.net/luisperezphd/Wc8aS/


This question is really old, but with ES6, there's a simpler way to do this using the spread operator:

sourceArray.splice(index, 0, ...insertedArray)

If you're using uncompiled javascript in the browser, be sure to check if it's supported in your target browser at https://kangax.github.io/compat-table/es6/#test-spread_(...)_operator.


Also, this may be slightly off topic, but if you don't want or need to modify the original array, but could use a new array instead, consider this approach:

mergedArray = sourceArray.slice(0, index).concat(insertedArray, sourceArray.slice(index))

You can also add such a function to the Array prototype, if you want something that is almost identical to the splice method. E.g.

Array.prototype.spliceArray = function(index, n, array) {
    return Array.prototype.splice.apply(this, [index, n].concat(array));
}

Then usage would simply be:

var array = ["A","B","C","","E","F"];

array.splice(3,1,"D");
// array is ["A","B","C","D","E","F"]

array.spliceArray(3,3,["1","2","3"]);
// array is ["A","B","C","1","2","3"]

See it in action here: http://jsfiddle.net/TheMadDeveloper/knv2f8bb/1/

Some notes:

  • The splice function modifies the array directly, but returns the an array of elements that were removed... not the spliced array.
  • While it's normally not recommended to extend core javascript classes, this is relatively benign with most standard frameworks.
  • Extending Array won't work in cases where specialized array classes are used, such as an ImageData data Uint8ClampedArray.

The answers above that involve splice.apply and insert the array in a one liner will blow up the stack in a stack overflow for large array. See example here: http://jsfiddle.net/gkohen/u49ku99q/ You might have to slice and and push each item of the inserted and remaining part of the original array for it to work. See fiddle: http://jsfiddle.net/gkohen/g9abppgy/26/

Array.prototype.spliceArray = function(index, insertedArray) {
   var postArray = this.splice(index);
   inPlacePush(this, insertedArray);
   inPlacePush(this, postArray);

   function inPlacePush(targetArray, pushedArray) {
// Not using forEach for browser compatability
       var pushedArrayLength = pushedArray.length;
       for (var index = 0; index < pushedArrayLength; index++) {
           targetArray.push(pushedArray[index]);
       }
   }
}