Introduction of JavaScript Array Slice
In this article, we will discuss the array slicing method in javascript. An array is used to store a collection of items or data with similar data types or an array can be defined in simple words as a group of elements having the same data type. An array slice is a method of slicing the given array to obtain part of the array as a new array. In javascript, there is a method known as the slice() method for selecting part of the given elements and return this as a new array object without changing the original array. Thus the new selected elements of the array are copied to a new array.
Working of Array slice() Method in JavaScript with Examples
In this section, we will see how the slice() method works on array in javascript. A slice() function is used to return a part of selected elements of the array without changing the original array. This method selects elements starting at the given start parameter and ends at a given end parameter but the end parameter is not included in this method as its optional parameter. Now let us the syntax and examples below.
Syntax:
arr.slice(start, end)Parameters:
- start: this argument is used to define the index of an array from where the function should start selecting the elements of an array. This parameter is optional.
- end: this parameter is used to define the index of an array at where the function should stop extracting the elements from the array. This parameter is also optional.
This method returns a new array that contains the selected elements of the array. We should also note that in the slice() method if the start parameter is not defined then slicing begins from the index 0 of the array and therefore this start parameter identifies the zero-based index of the array. Similarly, if the end parameter is not defined then the slice() method will extract up to end-1 which means it will use the length or size of the array for 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 can see we are selecting the second and third elements of the given array using the slice() method. It can be seen in the statement article.slice(1,3) this means that the given array with name “article” has 5 elements and the indexing starts from 0 in the above statement we can see the start parameter has index 1 and end parameter has the index 3 which says it will select the second and third element from the given array.
As we know slice() method is used for slicing the part of the given array without changing the original array. This method is used in many different ways. We will see in the below article regarding the uses of the slice() method on array in javascript. The slice() method is used to clone an array. Cloning in javascript means copying object properties to another object so as to avoid creating an object which already exists. 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 which has the same elements as the original array. Thus the slice() method is used for printing the array elements. As we saw in the above sample example we are extracting a few elements from the given 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 end index as 3 which will print 3 elements of the given array. Therefore slice() method is used for copying part of the given array by using the slice() method. Now let us see how the slice() method is used for converting array-like object to array. 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 array-like object. 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 conclude that the array slice() method is mainly used for slicing or selecting part of elements of the given array. In this article, we saw what is syntax 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” parameter. This we saw in the above examples.
Recommended Articles
This is a guide to JavaScript Array Slice. Here we discuss the introduction and working of array slice() method in javascript along with different examples and its code implementation. You may also have a look at the following articles to learn more –
39 Online Courses | 24 Hands-on Projects | 230+ Hours | Verifiable Certificate of Completion
4.5
View Course
Related Courses
