Confusion with javascript array.splice()

Question

I'm really confused about this.

My understanding was that array.splice(startIndex, deleteLength, insertThing) would insert insertThing into the result of splice() at startIndex and delete deleteLength's worth of entries? ... so:

var a = [1,2,3,4,5];
var b = a.splice(1, 0, 'foo');
console.log(b);

Should give me:

[1,'foo',2,3,4,5]

And

console.log([1,2,3,4,5].splice(2, 0, 'foo'));

should give me

[1,2,'foo',3,4,5]

etc.

But for some reason it's giving me just an empty array? Take a look: http://jsfiddle.net/trolleymusic/STmbp/3/

Thanks :)

Brelje

As a couple of people have now pointed out - the function returns the removed elements, but modifies the array. Thanks :) ! – Brelje

And three excellent answers - sorry, I just marked the first one that came in as the correct one. Thanks all for your help! – Brelje

Answer 1

The "splice()" function returns not the affected array, but the array of removed elements. If you remove nothing, the result array is empty.

Millisent

Answer 2

splice() modifies the source array and returns an array of the removed items. Since you didn't ask to remove any items, you get an empty array back. It modifies the original array to insert your new items. Did you look in a to see what it was? Look for your result in a.

var a = [1,2,3,4,5];
var b = a.splice(1, 0, 'foo');
console.log(a);   // [1,'foo',2,3,4,5]
console.log(b);   // []

In a derivation of your jsFiddle, see the result in a here: http://jsfiddle.net/jfriend00/9cHre/.

Thordis

Answer 3

The array.splice function splices an array returns the elements that were removed. Since you are not removing anything and just using it to insert an element, it will return the empty array.

I think this is what you are wanting.

var a = [1,2,3,4,5]; 
a.splice(1, 0, 'foo'); 
var b = a;
console.log(b); 

Nomo

Answer 4

I had this issue. "The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place." https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

This will work:

var a = [1,2,3,4,5];
a.splice(1,0,'Foo');
console.log(a);

If you want it inside a function you could do this:

function placeInMiddle(arr){
     
     arr.splice(2,0, "foo");
      return arr;
    
}  
placeInMiddle([1,2,6,7])

Array.prototype.splice() page on Mozilla developer is more clear than other resources about how the splice method works and how it can be implemented, described briefly below!

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

Limestone