Different Ways to Use Array Slice in JavaScript

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);

Output

orignal 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);

Output

orignal 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);

Output

Original Array: [ 'HTML', 'CSS', 'JavaScript', 'React.js' ]
New Array: [ 'HTML', 'CSS', 'React.js' ]

Approach 4: Using to extract a range of elements from an array

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);

Output

orignal array : [ 'HTML', 'CSS', 'JavaScript', 'React.js' ]
new array : [ 'CSS', 'JavaScript' ]