can't make sense of trailing element index associated with call to splice

Question

I found a great function for moving elements in an array to different positions:

function eleMove1( arr, from, to ) {
  arr.splice( to, 0, arr.splice( from, 1 )[ 0 ] );
}

var arr = [ 'a', 'b', 'c', 'd', 'e' ];
eleMove1( arr, 3, 0 );
console.log ( 'eleMove1: ' + arr ); // eleMove1: d,a,b,c,e
console.log ( arr ); // ["d", "a", "b", "c", "e"]
console.log ( '\n ' );

/*
*/

function eleMove2( arr, from, to ) {
  arr.splice( to, 0, arr.splice( from, 1 ) );
}

var arr = [ 'a', 'b', 'c', 'd', 'e' ];
eleMove2( arr, 3, 0 );
console.log ( 'eleMove2: ' + arr ); // eleMove2: d,a,b,c,e
console.log ( arr ); // [["d"], "a", "b", "c", "e"]
console.log ( '\n ' );

But as I am just getting started with JS I am puzzled as to the relevance of the [ 0 ] ); part of the splice statement. Convention leads me to believe it refers to the first indexed element of an array. But what array? Surely not the arr passed to the function, and surely not the func's arg's array, since the original function I lifted this from didn't actually pass the arr as one of the func's args:

Move an array element from one array position to another

It seems to be hanging off the end of the second splice call on the arr, but I still can't figure out why and what for.

The arr's output does, however, seems largely unaffected by the absence of this little piece of code. What then is the significance of this little snippet in the splice statement, and how does it lend relevance to the overall performance of the function, if at all?

`splice` returns an array! So you have to specify which element you want from that array, even if the cut-out element is one item. Here is the docs on [**MDN**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)! — ibrahim mahrir, Mar 01 '17 at 21:12
I appreciate the link, as the w3 page for splice does not seem make explicit reference to a splice array storing the values extracted and re-pushed to a new position. — scriptz, Mar 01 '17 at 21:44
Yeap, the MDN is more detailed: `Return Value: An array containing the deleted elements. If only one element is removed, an **array** of one element **is returned**. If no elements are removed, an empty array is returned.` And the W3 detail: `Definition and Usage: The splice() method adds/removes items to/from an array, and **returns** the **removed item(s)**.` — scriptz, Mar 01 '17 at 21:52
MDN is much more better than W3 as it provides a lot of details! — ibrahim mahrir, Mar 01 '17 at 21:59

Austio · Accepted Answer · 2017-03-01T21:41:30.063

4

The [0] refers to the first element in the array that is deleted. If we walk through the code.

function eleMove1( arr, from, to ) {
  arr.splice( to, 0, arr.splice( from, 1 )[ 0 ] );
}

Would be similar to writing like this.

function eleMove1( arr, from, to ) {
  deletedItemsArray = arr.splice( from, 1 );
  itemYouDeleted = deletedItemsArray[0];

  arr.splice( to, 0, itemYouDeleted);
}

This works because splice mutates arr in place and returns the items it deletes as an array. That deleted item becomes an argument to the initial arr.splice method, which puts itemYouDeleted at position to

edited Mar 01 '17 at 21:41

answered Mar 01 '17 at 21:20

Austio

5,939
20
34

ok I hear some bells chiming in the far off distance, but I will have to think more about this to get them ringing louder I think. So the value pulled from arr.splice( from, 1) gets put into a tmp splice array so the element position 3 (from=3) can be deleted (as directed by the 1 param) and then referenced and moved into the array's first element position. Ok yea that makes sense, but still a little archaic to look at and understand still. – scriptz Mar 01 '17 at 21:37
Yes, easiest to think of it as 2 separate function calls. It relies on actually changing the referenced array and the return value of the splice being the deleted items. – Austio Mar 01 '17 at 21:40
Although this was not the first answer, I accepted it because it provided the level of detail I needed to defog my confused (lack of) understanding of the concept. – scriptz Mar 01 '17 at 22:17

score 1 · Answer 2 · answered Mar 01 '17 at 21:24

1

Your outputs do show the difference that this code makes.

orig:    console.log ( arr ); // ["d", "a", "b", "c", "e"]
changed: console.log ( arr ); // [["d"], "a", "b", "c", "e"]
                                  ^^^^^

That little [0] grabbed the first element from the array returned by splice and used it rather than the whole array when you do the insert.

answered Mar 01 '17 at 21:24

Scott Sauyet

49,207
4
49
103

Yes its actually this double square bracket that caught my attention at first and got me digging more because I didn't understand the why behind it. It makes more sense now. – scriptz Mar 01 '17 at 21:48

can't make sense of trailing element index associated with call to splice

2 Answers2