Updated May 24, 2023
Introduction of JavaScript Array Slice
In this article, we will discuss the array slicing method in javascript. An array is a data structure that stores a collection of items or data of the same type. In JavaScript, the slice() method is used to choose a piece of an array and return it as a new array without modifying the original array. This is referred to as array slicing. The elements that have been selected are copied to the new array, allowing for more flexible array data processing.
Working of Array slice() Method in JavaScript with Examples
In this section, we will see how the slice() method works on an array in javascript. A slice() function returns a part of selected elements of the array without changing the original array. This method selects elements starting at the given start parameter. The slice() method concludes at a specified end parameter, but it does not include the element at the end parameter index itself. Now let us see the syntax and examples below.
Syntax:
arr.slice(start, end)Parameters:
- start: The start parameter is used to specify the index of the array from which the slice() method should begin selecting elements. It determines the starting point of the selection process.
- end: On the other hand, the end parameter is used to define the index of the array where the slice() method should stop extracting elements.
This method returns a new array that contains the selected elements of the array. Therefore, this start parameter identifies the zero-based index of the array. If the end parameter is not specified when using the slice() method, it will default to extracting elements up to end-1. In other words, it will consider the length or size of the array as the value for the end parameter.
Example #1
Code:
<!DOCTYPE html>
<html>
<body>
<p>Click the button below to select the second and the third elements from the array and print.</p>
<button onclick="func()">click me</button>
<p id="arr_slice"></p>
<script>
function func() {
var article = ["The", "Educba", "Training", "for", "Javascript"];
var heading = article.slice(1, 3);
document.getElementById("arr_slice").innerHTML = heading;
}
</script>
</body>
</html>Output:
Explanation:
In the above program, we select the second and third elements of the given array using the slice() method. The statement article.slice(1,3) indicates that the array named “article” consists of 5 elements, and the indexing of the array starts from 0. In the above statement, we can see the start parameter has index 1, and the end parameter has index 3, which says it will select the second and third element from the given array.
We will see in the below article regarding the uses of the slice() form on array in javascript. The slice() method is used to clone an array. Cloning in javascript means copying object properties to another object to avoid creating an existing object. Let us see an example below
Example #2
Code:
<!DOCTYPE html>
<html>
<body>
<script>
var arr = [45,36,81,72,25,93];
var new_arr = arr.slice();
document.write("The given array is as follows :" + arr )
document.write("The sliced array is as follows : " + arr.slice() );
</script>
</body>
</html>Output:
Explanation: In the above program, we saw that we are using a slice() method where there are no parameters, so it will print all the elements in the given array as a new array that has the same elements as the original array. To show or get specific elements from an array, use the slice() method. As we can see in the preceding sample, we are extracting a few elements from the supplied array. So now we will see how to use the slice() method for copying part of an array without changing the given original array. Let us see in the below example.
Example #3
Code:
<!DOCTYPE html>
<html>
<body>
<script>
var colors = ['red','green','blue','yellow','purple'];
var rgb = colors.slice(0,3);
console.log(rgb);
document.write("The given array is as follows :" + colors )
document.write("The sliced array is as follows : " + rgb );
</script>
</body>
</html>Output:
Explanation: In the above program, we can see we are only copying the part of the array as a new array from the given array. In this, we are slicing the elements from starting index as 0 and the end index as 3, which will print 3 elements of the given array. The slice() method allows us to copy a part of the given array. We can also use the slice() method to convert array-like objects into arrays. Let us see an example to demonstrate this.
Example #4
Code:
<!DOCTYPE html>
<html>
<body>
<script>
function toArray() {
return Array.prototype.slice.call(arguments);
}
var convertion = toArray('A','B','C');
console.log(convertion);
document.write("The given array like object is converted to the array as follows:" + convertion)
</script>
</body>
</html>Output:
Explanation: In the above program, we can see a function named “toArray” which has parameters as “arguments” which are array-like objects. Then in the function “toArray” body, we call the slice() method so that it will convert the given arguments into an array. Therefore every argument passed to the function “toArray” will be the elements of the new array.
Conclusion
In this article, we saw what syntax is and its parameters with its working. We also saw the main uses of the slice() method on array in javascript. The slice() method has two parameters, and both are optional. For specific copying parts of an array, we must specify the “start” and “end” parameters. This we saw in the above examples.
Recommended Articles
We hope that this EDUCBA information on “JavaScript Array Slice” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
