.slice() method is a common method that’s often used in code but not often understood by novice developers. To help you understand this helpful method, we will discuss exactly what it is and four ways you can use it.
What is the .slice() method?
.slice() returns a portion of an array. It’s implementation looks something like this:
It takes two arguments:
- The index of the element to start at.
- The index of the element to end at.
It then returns an array containing elements from the start index to the end index.
start_index in the method is inclusive (where
start_index is included), and the
end_index is exclusive (where
end_index is not included). This method creates a shallow copy and does not modify the original array or string.
.slice() method can be helpful when working on a big project:
- The method can be used to quickly and easily extract a portion of an array or string. This function can be very helpful when you need to process only a subset of data.
- Developers can use the
.slice()method to create a new array or string based on an existing one. This can be helpful when you need to manipulate data in a different way than the original.
How to use the .slice() method
.slice() method can be used on both arrays and strings (which is just an array of characters). Let’s look at some code examples to understand this better.
Here we have an array of integers named
arr, and we are using the slice method on it and storing the output of the slice method in a new variable named
newArr. In this case, the output of the code will be
[4, 5, 6]. But how?
The start index, in this case, is 3. This means we will start slicing the array from
arr, which is 4, and we still stop at
arr[6-1], which is 6. If you are wondering why we have subtracted 1 from the end index, it is because the end index is always exclusive, which means the end index is not included.
To better understand this concept, let’s look at another example::
In this code, we don’t have any end index specified because both the start and end indexes are optional, and you can use them per your needs.
When any index is not specified, we assume that the index is either the first element (if the start index is not specified) or the length of the array. Because the index starts from 0, we’ll include all elements until the end of the array ( i.e. where the index is
The output, in this case, will be
["D", "E", "F", "G", "H", "I", "J"]. The start index is 3, and the end index is not mentioned, so we’ll start slicing from
arr, which is “D“. As the end index is not mentioned, we’ll include all elements.
Until now, we only looked at the start and end indexes as positive numbers, but these indexes can be negative ones too.
Using .slice() with negative indexes
We have the start and end index as negative numbers in the following code block:
The negative index means we’ll count the index from the end of the array. A negative index can be thought of as an offset from the end of the array, list, or string. For example, in an array with five elements, you can access the last element with an index of -1 (like
arr[-1]), the second-to-last element with an index of -2, and so on.
The output, in this case, will be
[8, 9]. The start index is
arr[-3], which is 8, and the end index is
arr[-1], which is 10. Since the end index is exclusive, the output will be
As we discussed before, both index arguments are optional. Let’s look at a code example with only one negative index argument.
Here we only have one index specified: -3. We’ll start from
arr[-3], which is D, and we’ll include all elements until the end. So the output, in this case, will be
["D", "E", "F"].
Using .slice() on a nested array
We can use the slice method on a nested array as well:
We have a nested array in the above-mentioned code block and are using the slice method on it. In this instance it will print the last two array elements:
[[4,5,6],[7,8,9]]. You can further access elements based on the index directly like this:
Using .slice() without indexes
Developers can also use the slice method without a start or end index, as both are optional. In this case, the output is the shallow copy of the array. Let’s look at the code to understand this better.
var array = ["a", "b", "c", "d", "e"]; var output = array.slice() // Using slice without arguments console.log(output);Code language: PHP (php)
Without using any index arguments, this
.slice() operation would output
'a', 'b', 'c', 'd', 'e'.
Using .slice() on strings
As discussed earlier, the slice method can also be used on strings:
Understanding the difference between .slice() and .splice()
splice() are both methods that developers can use to manipulate arrays. However, there is a significant difference between the two methods.
.slice() method returns a new array containing a subset of the elements from the original array. The elements in the new array are selected from the original array based on a start and end index that you specify.
On the other hand, the
.splice() method modifies the original array.
When you use
.splice() to add or remove elements from an array, the elements you add or remove are selected based on a start index that you specify.
So, if you want to extract a section of an array without modifying the original array, you would use the
.slice() method. And if you want to remove a section of an array and get the removed elements back, you would use the
.splice(start_index, items_to_remove, item_to_insert_1, item_to_insert_2, ...)Code language: CSS (css)
.splice() method, the
start_index is a required parameter where all others are optional.
In the following code block, we have an array on which we have used both
When we used the
.slice() method, the start index and the end index are 1 and 4, respectively, which gives the output as
[2, 3, 4].
On the other hand, when we used the
.splice() method on the same array, we get the output as
[1, 4, 5] because we are removing two elements from index 1 (i.e., 2 and 3).
Try it out!
.slice() method. This can come in handy when working with arrays and other objects that contain several elements. We’ve also provided a few examples to explain how the method works, using code snippets, as well as how
This post was written by Keshav Malik. Keshav is an information security engineer who loves to build and break stuff. He is constantly on the lookout for new and interesting technologies and enjoys working with a diverse set of technologies in his spare time. He loves music and plays badminton whenever the opportunity presents itself.