JavaScript

Array slice() Method in JavaScript | Explained

JavaScript offers numerous built-in functions to work with arrays like array.splice(), array.includes(), array.push(), array.slice(), etc. All these functions come up with different functionalities. For example, the push() method inserts a new element at the end of an array, the splice() method adds a new element in the array, and so on. Now if we talk about the array.slice() method then we will come to know that it is used to slice out a subpart of an array.

This post will explore the below-listed aspects of array.slice() method in JavaScript:

So, let’s begin!

What is array.slice() in JavaScript?

It is a built-in array function that returns a new array of selected/extracted elements from a given array. The array.slice() method doesn’t affect the original array, instead it returns a new array of extracted elements. It can take two optional parameters to specify the starting and ending position. By default, the starting position is “0” while the end position is the last element of the array. It means if we didn’t specify any parameter then the slice() method will return

Syntax of array.slice()

The below snippet will assist you to understand the basic syntax of the array.slice() method:

array.slice(starting_position, end_position);

The array.slice() method will extract the elements from the given array between the starting_position (included) and end_position(excluded).

How to use array.slice() method in JavaScript?

Let’s consider the below-given example to understand how array.slice() method work in JavaScript:

const languages = ["Python", "C#", "C++", "HTML", "CSS", "PHP", "Java"];

const frontend = languages.slice(3, 5);

console.log("Original Array: " , languages);

console.log("Resultant Array: ", frontend);

In the example program, firstly, we created an array named “languages” that consists of different programming languages. Next, we utilized the array.slice() method to extract the elements present between the third and fifth index. Finally, we utilized the console() method to print the original array and extracted array:

The output verified that the array.slice() method returned a new array of selected elements only.

What will happen if we didn’t specify any parameter in the array.slice() method:

const languages = ["Python", "C#", "C++", "HTML", "CSS", "PHP", "Java"];

const frontend = languages.slice();

console.log("Original Array: " , languages);

console.log("Resultant Array: ", frontend);

The following will be the output for the above-given program:

The output shows that If we didn’t specify the starting and end position then the array.slice() method will return a complete array.

Task is to pass the negative value as a parameter to the array.slice() method:

In the slice() method, we can also pass the negative values as parameters; in such cases, the index of the element placed at the last index will be -1, the index of the second-last element will be -2, the index of the third-last element will be -3 and so on while the index of the first element will be 0.

const languages = ["Python", "C#", "C++", "HTML", "CSS", "PHP", "Java"];

const frontend = languages.slice(-4, -2);

console.log("Original Array: " , languages);

console.log("Resultant Array: ", frontend);

In this example, the array element “HTML” is present at index “-4”, and “CSS” is present at index “-3”, so following will be the output for above program:

This is how the array.slice() method works with the negative indices.

Conclusion

In JavaScript, array.slice() is a built-in function that returns a new array of selected/extracted elements from a given array. The array.slice() method doesn’t affect the original array, instead it returns a new array of extracted elements. This write-up explained various aspects of array.slice method using some suitable examples.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.