Discussion on: JavaScript Interview Question #49: Add a new array element by index

[Vaibhav]

const arr = [1,2,3]
 const elements = "insert"
 const index = 2;
 const output = [...arr];
 console.log( output.splice(index, 0, ...elements))

Hey i was just checking your code out, it works but why splice method for me returns an empty array but works for you.

[teamradhq]

It's because Array.splice deletes and inserts items in array, then returns any items that were deleted. So if we don't delete any items, return value of Array.splice(n, 0, ...items) will always be empty [].

In your example, you just need to log output as well as result of splice call:

const arr = [1,2,3]
const elements = "insert"
const index = 2;
const output = [...arr];

console.log( output.splice(index, 0, ...elements)) // []
console.log(output);
// (9) [1, 2, "i", "n", "s", "e", "r", "t", 3]

And if you're wondering why you see individual characters from elements variable; it's because you're using rest parameter, which will spread iterable contents into function args. In case of string this is the individual characters of its value.

If this isn't what you want, and instead you just want to insert string value, you just need to remove rest operator:

const arr = [1,2,3]
const element = "insert"
const index = 2;
const output = [...arr];

output.splice(index, 0, element)
console.log(output);
// [1, 2, "insert", 3]

This is also the reason why we spread arr into a new output array, before calling splice, because it mutates the array it's called on. When designing our implementation, it's better to avoid mutating input and let the consumer decide if they want to mutate.

For example, consumer "mutates" by assigning output of someFn to previously declared variable arr:

let arr = [1, 2, 3, 4];
arr = someFn(arr); 
console.log(arr);
['some', "mutation", 'has', 'occured'];

I think the fact that splice is mutative leads a lot of people to avoid it. However, it's really useful! Here's some of the things you can do with it...

• Remove items from array:

const arr = arr = [1, 2, 3, 4];
const result = arr.splice(1,2);
console.log(arr, result);
// (2) [1, 4] (2) [2, 3]

• Add items to array:

const arr = [1, 2, 3, 4];
const result = arr.splice(1, 0, 5, 6);
console.log(arr, result);
// (6) [1, 5, 6, 2, 3, 4] []

• Substitute items in array:

arr = [1, 2, 3, 4];
result = arr.splice(1, 2, 5, 6);
console.log(arr, result)
// (4) [1, 5, 6, 4] (2) [2, 3]

So to summarise:

• Array.splice mutates its array.
• Array.splice returns items that were deleted from its array.
• Array.splice syntax is:

Array.splice(start, deleteCount, ...items);

Hope this helps explain it more ;)

[Vaibhav]

Thank You for long explanantion, everything make sense now. I havent used these methods very often so forgot there nature and what it does and for some reason i havent noticed that it mutates the original array it self in mdn documentation. Stupid me...