Javascript Array Slice Method

Array.slice()

1const animals = ["dog", "cat", "fish", "fox", "bird"];
2console.log(animals.slice(0,2));
3// Output: ["dog', "cat"]

In the previous snippet of code, we use **Array.slice()** to create a sub-array from the array assigned to animals. In this article we will be exploring how to use the slice method, different solutions, the syntax, parameters that can be used and returned values.

What Does Javascript Array Slice Method Do?

The .slice() method creates a shallow copy of some or all of the elements from the original array starting at a specific index and ending at another index. The original array remains unmodified. The slice function requires two inputs: a starting and an ending index.

The slice method is a useful tool that creates a new array out of the existing one. It contains elements from the start index to the end, though not including this last item. If you don't pass in an end index, it will grab all elements up until the end of the array.

The syntax of the slice() method is as follows:

1slice()
2slice(start)
3slice(start, end)

Parameters:

• start (Optional) - The index where the extraction of the elements begins. If start is omited, is 0 by default. Negative values count back from the end of the array.
• end (Optional) - The index where the extraction of the elements ends. The element at this index is not included.

How to Use Javascript Array Slice?

Using the slice method in Javascript is simple. Let's explore different use cases:

Slicing an array specifying start and end indexes

1const courses = ["JavaScript", "Python", "Java", "C#", "Ruby"];
2const myCourses = courses.slice(1, 3);
3console.log(myCourses); // Output: `["Python", "Java"]`

We built an array of strings and named it courses. By using the slice method, we were able to slice the original array from index 1 up to (but not including) index 3. The myCourses returned array from the slice method contains the elements 1 and 2. It is important to note that arrays are zero indexed, ****which means the first element of an array is at index 0.

Slicing an array from a start index till the end

Finding all the items from a selected index in an array till its end is simple. We just omit the second argument and the task is complete:

1const courses = ["JavaScript", "Python", "Java", "C#", "Ruby"];
2const myCourses = courses.slice(3);
3console.log(myCourses); // Output: `["C#", "Ruby"]`

By using the slice method with one argument, a brand-new array was created which containes the section from index 3 till the original array's end.

If we console.log() the original array courses, we can note that the original array remains unchanged.

1console.log(courses); // Output: `["JavaScript", "Python", "Java", "C#", "Ruby"]`

Using a negative parameter to slice an array counting back from the end

The slice method also supports negative numbers as parameters to counts back from the end:

1const courses = ["JavaScript", "Python", "Java", "C#", "Ruby"];
2const myCourses = courses.slice(-2);
3console.log(myCourses); // Output: `["C#", "Ruby"]`

In this solution the slice method returned an array with the last two elements from the original array.

Slicing an array using negative parameters

Also, we can use two negative parameters to extract a portion of the array counting from the back:

1const courses = ["JavaScript", "Python", "Java", "C#", "Ruby"];
2const myCourses = courses.slice(-3,-1);
3console.log(myCourses); // Output: `["Java", "C#"]`

In the previous snippet of code the slice method returned a sub-array from the original array counting from the back.

Advantages of the Slice Method in JavaScript

The slice method in JavaScript is a great tool for writing organized, reader-friendly, and maintainable code. Its advantages make it really valuable to use, including:

• The slice method is a non-destructive way of creating a new array from the original one. It slices off a part of the referenced object without leaving any changes to it.
• The slice method is incredibly easy to use as it only takes two arguments, streamlining the process for extracting desired elements from an array.
• The slice method of an array enables us to get any part of the array conveniently. We can indicate a starting and ending index or simply just extract everything till the end. Negative indexing is also allowed, which further widens its potentials. This technique can be incorporated with other array methods to implement various scenarios.
• The slice method is a great way to create new arrays efficiently and quickly. It helps simplify complex code, making it easier to read and manage, also, you'll save time as you won't have to write as much.

Conclusion

Array manipulation is highly fundamental to any programming language, including JavaScript. Arrays are extremely helpful in managing a large amount of data as they are highly versatile. Moreover, JavaScript comes with various useful functions which make it easier to work with these arrays, you can learn more about arrays in Javascript at 4Geeks.

The .slice() method is a useful tool for creating a duplicate of an array or to select parts of it. This powerful technique offers immense flexibility when dealing with arrays without affecting it. Utilizing arrays with this method makes working a lot smoother and more straightforward, improving efficiency. To get a deep insight about how to call JavaScript functions and methods, check how to call a function in Javascript. You can learn more about this topic and others at the blog of 4Geeks.