How does the spread syntax affect array splice

Question

I found the following code and I don't know what is the difference between A and B:

var fruits = ["Banana", "Orange", "Apple", "Mango"];

A

fruits.splice(2,0,["Lemon", "Kiwi"]);

B

fruits.splice(...[2,0].concat(["Lemon", "Kiwi"]));

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var A = fruits.splice(2, 0, ["Lemon", "Kiwi"]);
var B = fruits.splice(...[2, 0].concat(["Lemon", "Kiwi"]));

console.log(A)
console.log(B)

Answer 1

First of all, Statement A & Statement B will generate different results.

In Statement A, you are inserting an array (["Lemon", "Kiwi"]) as an array element at position 2 while removing 0 items. So, you are inserting a string array in another string array at position 2.

var fruits = ["Banana", "Orange", "Apple", "Mango"];


fruits.splice(2,0,["Lemon", "Kiwi"]);

console.log(fruits);

However, Statement B is much more interesting. To, understand it fully, first log out it's core portion like this:

console.log(...[2,0].concat(["Lemon", "Kiwi"]));  // basic array concatenation then spread

As you can see it generates, 2 0 Lemon Kiwi. Then it is passed as parameter to fruits.splice(..here..). According to array#splice it will enter two strings (Lemon & Kiwi) at position 2, while removing 0 elements.

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.splice(...[2,0].concat(["Lemon", "Kiwi"]));
// is same as fruits.splice(2, 0, 'Lemon', 'Kiwi')

console.log(fruits);

NOTE:

• array#splice updates the original array.
• Statement A inserts an array (IE ["Lemon", "Kiwi"]) in parent string array whereas, Statement B inserts two strings (IE 'Lemon', 'Kiwi') in parent string array.

Answer 2

A treats ["Lemon", "Kiwi"] as one item and inserts it in given index

["Banana", "Orange", ["Lemon", "Kiwi"], "Apple" , "Mango"];

B concats [2,0] and ["Lemon", "Kiwi"] and then passes them to splice as comma seperated arguments like

fruits.splice(2,0,"Lemon", "Kiwi");  

which modify the array like below

["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]

Answer 3

As per the doc from function signature:

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

In B:

fruits.splice(...[2,0].concat(["Lemon", "Kiwi"]));

Because [2,0].concat(["Lemon", "Kiwi"]) means [2,0,"Lemon", "Kiwi"].

So fruits.splice(...[2,0,"Lemon", "Kiwi"]); becomes fruits.splice(2,0,"Lemon", "Kiwi"); using the spread operator(...).

Above code you are saying add "Lemon", "Kiwi", from index 2 witho deleting 0 items.

In this case 2 is start index, deleteCount is 0, and item1 is "Lemon", item2 is "Kiwi".

Now in A:

fruits.splice(2,0,["Lemon", "Kiwi"]);

You are saying add ["Lemon", "Kiwi"], from index 2 with deleting 0 items. In this case 2 is start index, deleteCount is 0, and item1 is ["Lemon", "Kiwi"].

Answer 4

First of all you need to understand how splice works

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

it takes start(starting index from zero), number of elements to be deleted, and rest any arguments will be added at that starting index.

Now you are clear with splice, so let go step by step for clearer understanding of those statments.

The following statement

fruits.splice(...[2,0].concat(["Lemon", "Kiwi"])); 

after concatenation becomes

fruits.splice(...[2,0,"Lemon", "Kiwi"]);

after spread it becomes

fruits.splice(2,0,"Lemon", "Kiwi");

then splice will take fruits from index 2 and delete nothing(as given zero) and add rest of the arguments ie., "Lemon" and "Kiwi"

So You get ["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]

Where as in

fruits.splice(2,0,["Lemon", "Kiwi"]);

the splice will take fruits from index 2 and delete nothing(again as given zero) and add rest of the arguments i.e, "["Lemon", "Kiwi"]"

So you get ["Banana", "Orange", ["Lemon", "Kiwi"], "Apple", "Mango"]

I hope it helps.

Answer 5

All other answers correctly describe splice method and spread operator behavior, but none tries to correct your misunderstanding about the result.

What you are actually seeing, is the return value of splice method, which is an array containing the removed elements, which in both your method calls, are none. That's why you get an empty array as the result.

To see the behavior of calling splice method, you need to log the fruits array after each call (not the return value of the method), which in your case is not so much useful, because your expectations about the fruits array does not hold in the second call.

Answer 6

Without using spread, B is:

fruits.splice( 2, 0, "Lemon", "Kiwi" );

The concat is a bit confusing, it could also have been written as:

fruits.splice( ...[ 2, 0 ], ...[ "Lemon", "Kiwi" ] );

Or:

fruits.splice( ...[ 2, 0, "Lemon", "Kiwi" ] );