FreeCodeCamp and JavaScript: the slice function(), Part 1

In my last entry, we used the JavaScript function slice() to convert an arguments object into an array, using the following line of code:

var args = Array.prototype.slice.call(arguments, 1);

I noted then that the slice() function “takes part of an array and copies it into another array”.  Let’s dig a little deeper.  Per MDN, the syntax for the slice() function is:

arr.slice([begin[, end]])

Okay, so obviously arr is the array that we are copying.  There are two parameters, begin and end, and both are optional (that’s why they’re in brackets).

Begin tells the function where to begin extracting the content.  Now, keep in mind that, as with all things JavaScript, we begin at 0 and not at 1.  So, for example, if we have an array arr = [6, 3, 7, 8] then telling slice:

arr.slice(1);

will give you

3, 7, 8

Now, you can do begin with negative numbers too, and this tells it to start at the END and work backwards.

arr.slice(-2);

will return

8, 7

The default (if you don’t give it a value) is 0, and begin will “begin” at the beginning, aka element[0] of your array.

Next is the end parameter.  This tells slice() where to STOP.  Note that slice() stops at the element BEFORE end.  That means that end is NOT included!  The example given by MDN is

arr.slice(1, 4);

and this will give you elements 1, 2, and 3 from your array.  Note that this does not return element arr[0], because begin is set to 1, and it does not give you element arr[4], because end is NOT included.

As with begin, negative numbers can be used for end.  MDN notes that if you give the command:

arr.slice(2,-1);

you will get the third through the second to last element in your array.  So let’s say your array is arr = [2, 4, 6, 8, 10, 12].  the above command will return 6, 8, 10.  Remember that the third element in your array is arr[2], not arr[3], and that’s why the items return start with 6 and not 4.  Second to last is 10.

As with begin, there is a default, and if you don’t give a value for end, the extraction will continue to the last element in the array.

Now, it should be noted that slice() does NOT modify your original array.  In the examples above, arr stays the same as it was before the slice operation.  Chances are you will store your results in a new variable, like so:

var newArray = arr.slice(0, 3);

newArray gets the copied items, arr stays exactly the same.  Likewise, if you add something to newArray, arr won’t change, and vice versa.  Another thing to note is that if your array items are strings (“red”, blue”, “green”), you won’t get back something like “r”, “e”, “d”, etc.

Advertisements

3 thoughts on “FreeCodeCamp and JavaScript: the slice function(), Part 1

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s