JavaScript Array slice() method

The JavaScript array slice() method extracts a part of the given array and returns it. This method doesn't change the original array.

Syntax

The slice() method is represented by the following syntax:

Parameter

start - It is optional. It represents the index from where the method starts to extract the elements.

end - It is optional. It represents the index at where the method stops extracting elements.

The slice() method returns a new array that contains the extracted elements.

Examples of JavaScript Array slice() Method

Let us understand array slice() method with the help of examples.

Example1: Array slice() method without a parameter

In this example, we will slice an array without passing any parameters.

Code:

Output:

[ 'Apple', 'Banana', 'Orange', 'Mango' ]

Explanation:

In the upper code, we have created a variable named myArray using let. This array contains fruit names. We utilized the slice() method on the myArray and stored the result in the variable res then we logged the result to the console. As we have called the slice() method without any parameters that is why it will copy the entire array as it is.

Example 2: Array slice() method with an index number

In this example, we will slice an array by passing only an index number which will be an index number. It will return the elements from the array from that index.

Code:

Output:

[ 'Mango' ]

Explanation:

In the upper code, we defined myArray which consists of four string elements. We used the slice() method with one parameter on the myArray and stored the result in the variable res then logged the result. We have given 3 as a parameter which is an index value that slices the array starting from index 3 up to the end of the array.

Example 3: Array slice() method with two index numbers

In this example, we will slice an array by passing two index numbers. It will return all the elements between those two indices. It will include the value of the first parameter and exclude the value of the second parameter.

Code:

Output:

[ 'Banana', 'Orange' ]

Explanation:

In the upper example, we defined a variable named myArray consisting of string elements. We used the slice() method with two parameters on myArray. We stored the result in the res and got output to the console. It will slice the array starting at index number 1 and end the array at index number 3.

Example 4: Passing a single negative index value.

In the example below, we will give a single negative value as an index to extract an element.

Code:

Output:

[ 'Bootstrap' ]

Explanation:

In the above code, we defined an array named arr consisting of four elements. We have passed a negative index value in the slice() method and stored the output in the variable named result. A negative index means counting the elements from the end of the array so we have entered -1 index which gives the last value of the array.

Example 5: Passing two negative index values.

In this example, we will give two negative index values to extract elements from the given array.

Code:

Output:

[ 'AngularJS', 'Node.js', 'JQuery' ]

Explanation:

In the upper code, we defined an array named arr containing four elements. We have passed two negative indices and stored the output in the variable named result. We have passed -4 and -1 values. The index -4 corresponds to the first element and -1 corresponds to the last element. So slice(-4, -1) extracts the last elements from the array that come between -4 and -1.

Uses of slice() method:

• Useful in creating a shallow copy of an array: When we call the slice() method without passing any arguments, it creates a new array with all the elements from the original array. It is called shallow copy which means the new array references the same objects.
• Useful for converting array-like objects to arrays: When we use slice.call() to convert array-like objects (like arguments, NodeLists, etc.) into actual arrays. It is useful when we want to apply array methods that are not available on array-like objects.
• Useful in String Manipulation: We can use the slice() method to extract a part of a string. It can be utilized to extract a portion of a string by entering a start and optional end index.
• Useful for getting elements from the end of an array: We can make use of negative indices with the slice() method to get an element from the last index of an array. For example, as in slice (-3), we get back the last 3 elements of the array.

Conclusion:

The slice() method method in an array is one of the most important methods for extracting a part of an array. In this article, we have understood what the slice() method is and its various ways of extracting some portion of an array and the uses of the slice method.

Frequently Asked Questions (FAQs)

1. What does the slice() method in an array do?

The slice() method in an array extracts a part of an array and constructs a new array with the part that was extracted. When a developer utilized the slice() method, it does not alter the original array.

2. How does slice() differ from splice()?

The slice() method does not make any changes in the original array. It returns a new array. However, the splice() method makes changes in the original array by adding, replacing or removing elements.

3. How can slice() be utilized to extract the last element of an array or a string?

We can utilize a negative index value which can count values from the end. For example, myArray.slice(-1) returns an array with the last element.

4. Can we use the slice() method for strings as well as arrays?

Yes, the slice() method can be utilized on both strings & arrays in JavaScript. This method itself acts differently for the type of data on which it is performed and returns a value accordingly. For strings, slice() extracts characters and returns a new string, while for arrays, slice() extracts elements and returns a new array.

5. Does the slice() method makes a deep copy or a shallow copy?

The slice() method makes a shallow copy. The primitive data types like numbers, strings, booleans, etc., are copied by their value, but objects and nested arrays are copied by reference. If we modify a nested object in the copied array, that modification will reflect in the original array since both arrays are referring to the same object in memory.