Slice and Splice can be confusing, partly because their names are so similar. But they are both super important when it comes to manipulating arrays. Considering many technical interviews have you deal with arrays, it is pretty important to not only understand both methods but to understand the differences between them.
Slice
A huge thing to understand about the .slice() method is that it does not change the original array. It is non-destructive. As you can imagine, it is used to extract a portion, or chunk, of the array. Typically, this method takes in two arguments, the first one being required (unless you simply want to make a copy of the array). Think of this first argument as the starting point. This is where the slicing begins! The second, optional argument, is where you want to slice until.
Your Task:
Let's see an example of this in action, at my expense. I want you to look at the array that contains an obvious lie about me and turn it into something that is true.
lies = ['People', 'think', 'Ben', 'is', 'cool', 'but', 'he', 'is', 'not']
How can we make me cool??
As you can see in the code above, we want to begin the slice at the 2nd element index and slice UNTIL the 5th element index. The second argument of 5 is not included in the slice, therefore you get the elements in the 2nd, 3rd and 4th indices. Also notice how when we console.log the original "lies" array, it is not changed. You can use the .join() method and some string concatenation to see how cool I am in sentence form.
Splice
Now let's talk about the super similar looking, but very different performing .splice() method. One very important difference of .slice() and .splice() is that splice is a DESTRUCTIVE method. Splice allows you to both remove AND add elements to an array. First, let's take a look at removing elements.
Once again, this method can take two arguments, the first being required. The first argument is your starting point. The second argument is the number of elements you want to be removed from the array. Check the picture below for a simple example. Notice the the method is indeed destructive. We start at the second element index and tell it to splice one element off of the array.
If we don’t define the second argument, every element starting from the given index will be removed from the array. Check out the example below. We start slicing at the second index and are just left with the first two elements.
Your Task:
Let's once again look at an array and try to make it a little better for me. Let's make me not funny looking. Hint: You can also use negative numbers if you want to start from the end of an array, rather than the beginning.
silly_array = ["Ben", "is", "really", "funny", "looking"]
Lastly, let's look at how to add an element to an array using .splice(). The first part of the method works the exact same as before. Your first argument is where to start, the second is how the number of elements you want to remove (probably 0) and the 3rd is what you want to add. This element will be added immediately BEFORE your starting index. You can add as many elements as you would like, just add them as additional arguments. I won't show you an example first, let's see if you can get this on your own.
Your Task:
Looking at the array below, how can we add a single word to change the entire outlook on my bank account. I will tell you right now, there is "not" a whole lot currently there.
fake_news = ["Ben", "does", "have", "a", "lot", "of", "money"]
As you can see above, we start at the 2nd index, don't remove anything and the 3rd parameter of "not" is added BEFORE the 2nd index.
Dope.
Oldest comments (0)