Why does this now work as one return statement?

Question

I am just curious, why does this block of code work...

function slasher(arr, howMany) {
  arr.splice(0, howMany);
  return arr;
}

slasher([1, 2, 3], 2);

But this does not? My desired outcome is "[3]"

function slasher(arr, howMany) {
  return arr.splice(0, howMany);
}

slasher([1, 2, 3], 2);

Answer 1

Answering such questions is simply a matter of consulting a good documentation. I recommend Mozilla's MDN - Array.splice() :

The splice() method changes the contents of an array by removing existing elements and/or adding new elements.

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.

It tells us that this method changes the array in-place, ie myArray.splice() directly mutates / changes myArray instead of building a new array and returning that. The returned value is actually the list of removed elements.

Answer 2

function slasher(arr, howMany) {
  arr.splice(0, howMany);
  return arr;
}

slasher([1, 2, 3], 2);

This will first 'splice' the given array, which in essence will just remove the first howMany elements from the array ( 2 ). You then return the array (which is now different as it has had it's first 2 elements removed), hence [3] .

function slasher(arr, howMany) {
  return arr.splice(0, howMany);
}

slasher([1, 2, 3], 2);

This will return the result of the original splice. From the documentation where it says Return value ( https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/splice?v=control ), this will return the elements that were removed from the array, hence [1, 2] .

Answer 3

@Sam, splice method changes the contents of an array (itself) by removing existing elements and/or adding new elements. Hence in the first code sample, you are getting [3].

However, it returns 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.

As a result in the second code sample, you get: [1,2].

Answer 4

This is because Splice returns an array containing the deleted elements, and not the remaining parts in the array. By returning arr, you returned the array after it was "slashed".

Source: Splice at MDN

Answer 5

Most functions in any Language are either Accessors, or Mutators. They either access a property or they change a property or structure. In this case, splice() is both. It's important to read documentation on all functions you use especially in JS as they sometimes will do more than one thing.

sometimes a function might be overloaded where one version is an accessor and the other is a mutator.

Any time you pass an array to a function make sure you know what might happen to the contents of the array.

Splice returns the removed elements while simultaneously changing the contents of the array. The return value is not the array you passed in. This is common across many languages to return a removed item from a data structure.