Introduction to Slice() Method in JavaScript
Slice( ) method in javascript is used to subset or extracts elements of the array and return it. Sice( ) method is a built-in method in javascript. Slice() Method in JavaScript extracts elements from the array and returns it as an output but it does not update or change to the array, the array remains the same as it was previously.
Syntax of the Slice( ) Method in Javascript:
array.slice(start,end)This method extracts elements from the array and returns it just as an output.
Parameters
start – start parameter is an optional parameter, which is used to specify the starting index from where the elements start to be extracted. If we do not provide a value for this parameter, then the function takes 0 as default value.
end – end parameter is an optional parameter, which is used to specify the ending index up to where the elements to be extracted. Note that the end index value is excluding means that the end value will be end-1value. If we do not provide a value for this parameter, then the function takes the length of the array as the default value and if the end value is greater than the array length, then the end value takes as the length of the array.
Examples of Slice() Method in JavaScript
Next, we will write the HTML code to understand the slice( ) method more clearly with the following example, the slice( ) method used to extract the single element from the array a bypassing the start index as 2 and end index 3.
Example #1
Code:
<!DOCTYPE html>
<html lang= "en" >
<head>
<title> This is an example for slice( ) method </title>
</head>
<body>
<!-- code to show the working of slice( ) method -->
<script>
var a = ["Apple", "Banana", "Orange", "Mango"]
var res = a.slice(2, 3);
document.writeln(res);
</script>
</body>
</html>Output:
In the above code the slice( ) method is using and the passed the parameter value for start index as 2 and end index 3, so the slice( ) method slice the given array a or extract the elements of the given array from index 2 to index 2 (the end value is excluding). Hence in an array an at the index 2 it stores element “Orange”, So the return value of the slice method is “Orange”, as shown in the output.
In the next example code, we will rewrite the above code for slice( ) method to extract the multiple elements from the given array.
Example #2
Code:
<!DOCTYPE html>
<html lang="en" >
<head>
<title> This is an example for slice( ) method </title>
</head>
<body>
<!-- code to show the working of slice( ) method -->
<script>
var a = ["Apple", "Banana", "Orange", "Mango"]
var res = a.slice(1, 4);
document.writeln(res);
</script>
</body>
</html>Output:
In the above code the parameter passed to the slice( ) method is for start index as 1 and end index 4, so the slice( ) method slice the given array a or extract the elements of the given array from index 1 to index 3 (the end value is excluding). Hence in an array an at the index 1 it stores element “Banana”, at index 2 store element “Orange” and at index 3 store element “Mango”, So the return value of the slice method is “Apple, Orange, Mango”, as shown in the output.
In the next example code, we will rewrite the above code for the slice( ) method to extract the multiple elements from the given array based on the negative index.
Example #3
Code:
<!DOCTYPE html>
<html lang="en" >
<head>
<title> This is an example for slice( ) method </title>
</head>
<body>
<!-- code to show the working of slice( ) method -->
<script>
var a = ["Apple", "Banana", "Orange", "Mango"]
var res = a.slice(-4, -1);
document.writeln(res);
</script>
</body>
</html>Output:
In the above code the parameter passed to the slice( ) method is, for start index as -4 and end index as -1, so the slice( ) method slice the given array a or extract the elements of the given array from index -4 to index -1 (the end value is excluding), in the reverse order the last element is store at index -1, the last second element is store at index -2 and so all. Hence in an array an at the index -4 it stores element “Apple”, at index -3 store element “Banana” and at index -2 store element “Orange”, So the return value of the slice method is “Apple, Banana, Orange”, as shown in the output.
We will rewrite the above code for the slice( ) method to extract all elements of the given array.
Example #4
Code:
<!DOCTYPE html>
<html lang= "en" >
<head>
<title> This is an example for slice( ) method </title>
</head>
<body>
<!-- code to show the working of slice( ) method -->
<script>
var a = ["Apple", "Banana", "Orange", "Mango"]
var res = a.slice( );
document.writeln(res);
</script>
</body>
</html>The output of the above code is –
In the above code, no parameters passed to the slice( ) method so the start index and end index takes the default value as 0 and length of the array that is 4 respectively. So the elements of the given array are extracted from index 0 to 4(the end value is excluding).
Conclusion
To extracts, the elements of an array in javascript the slice( ) method can be used as we have seen with examples. The slice( ) method accepts two parameters which are start index and end index, as both optional so the default values are 0 and length of the given array respectively.
