Different Ways to Use Array Slice in JavaScript
Last Updated :
05 Oct, 2023
In this article, we will see the different ways to use the Array slice method in Javascript. Using Array Slice in JavaScript refers to the technique of extracting a specified portion of an array, defined by start and end indices, to create a new array containing those selected elements.
Syntax
arr.slice(begin, end);
Parameters: This method accepts two parameters as mentioned above and described below:
- begin: This parameter defines the starting index from where the portion is to be extracted. If this argument is missing then the method takes begin as 0 as it is the default start value.
- end: This parameter is the index up to which the portion is to be extracted (excluding the end index). If this argument is not defined then the array till the end is extracted as it is the default end value If the end value is greater than the length of the array, then the end value changes to the length of the array.
Return value: This method returns a new array containing some portion of the original array.
We will explore all the above methods along with their basic implementation with the help of examples.
Approach 1: Using to copy an array
The slice() method can be used to create a copy of an array.to copy an array, use slice() method with no arguments, creating a shallow copy that duplicates the entire array without modifying the original.
Example: In this example we are using the above-explained apporach.
JavaScript
let languages = ["HTML", "CSS", "JavaScript", "React.js"];
console.log("orignal array :", languages)
let copiedArray = languages.slice();
console.log("Copied array :", copiedArray);
Outputorignal array : [ 'HTML', 'CSS', 'JavaScript', 'React.js' ]
Copied array : [ 'HTML', 'CSS', 'JavaScript', 'React.js' ]
Approach 2: To get the first N elements of an array
The slice() method can be used to get the first N elements of an array. To get the first N elements of an array, use slice(0, N), specifying the start index as 0 and the end index as N to extract the desired portion.
Example: In this example we are using the above-explained apporach.
JavaScript
let languages = ["HTML", "CSS", "JavaScript", "React.js"];
console.log("orignal array :", languages)
let result = languages.slice(0, 2);
console.log("Sliced array :", result);
Outputorignal array : [ 'HTML', 'CSS', 'JavaScript', 'React.js' ]
Sliced array : [ 'HTML', 'CSS' ]
Approach 3: Using to remove elements at specific index
The slice() method can be used to remove elements at specific index. To remove elements at a specific index, use slice(0, index).concat(arr.slice(index + 1)). It extracts elements before and after the index, effectively excluding the desired element.
Example: In this example we are using the above-explained apporach.
JavaScript
let arr = ["HTML", "CSS", "JavaScript", "React.js"];
// Remove the element at index 2 (value 3)
let indexToRemove = 2;
let newArr = arr.slice(0, indexToRemove).concat(
arr.slice(indexToRemove + 1));
console.log("Original Array:", arr);
console.log("New Array:", newArr);
OutputOriginal Array: [ 'HTML', 'CSS', 'JavaScript', 'React.js' ]
New Array: [ 'HTML', 'CSS', 'React.js' ]
To extract a range of elements from an array, use the slice(startIndex, endIndex) method. It creates a new array with elements from startIndex (inclusive) to endIndex (exclusive) in the original array.
Example: In this example we are using the above-explained apporach.
JavaScript
let languages = ["HTML", "CSS", "JavaScript", "React.js"];
console.log("orignal array :", languages)
let result = languages.slice(1, 3);
console.log("new array :", result);
Outputorignal array : [ 'HTML', 'CSS', 'JavaScript', 'React.js' ]
new array : [ 'CSS', 'JavaScript' ]