How to Use JavaScript Array Slice

Atul Jindal

Updated:

Published:

In JavaScript, arrays are some of the most useful data structures that the programming language can offer.

person using javascript array slice on a laptop in a home office

Like other programming languages, JavaScript arrays can be used to store data. However, JavaScript arrays have one unique benefit. In other programming languages, only one type of data can be stored in an array. In JavaScript, you can store different types of data at the same time.

In this article, you’ll learn what slice function does, how to use it in different scenarios, and some of its properties as well as methods. Let’s get started.

Download Now: An Introduction to JavaScript  [Free Guide]

What does the JavaScript array slice do?

JavaScript array is the most widely used data structure among JavaScript developers with a large variety of array manipulation library functions. The slice() method in JavaScript has the ability to make a shallow copy of a portion of items in an array into a completely new array object.

This video explains everything that the JavaScript array slice method does, and it also reviews some of the examples that we've listed below. 

HubSpot Video

Once the function execution comes to an end, this function returns a completely new array without making any alterations to the original array.

Javascript array slice , The slice() method in JavaScript makes a shallow copy of a portion of items in an array, then creates a completely new array object. Once the function execution comes to an end, this function returns a completely new array without making any changes to the original array.

How to Create a JavaScript Array Slice

The array slice() method in JavaScript accepts up to two optional parameters, and both of these are zero-based indexes. Syntax for this function follows:

array.slice(start, end)

  • Start (optional). The first parameter is the start parameter. This is the starting index of an array from which items will be copied.
  • End (optional). The second parameter is the end of the index of the array.
  • Return value. This method returns a new array containing the selected elements.

JavaScript Array Slice in Action

As discussed above, slice() function takes two optional parameters. Let’s explore different examples on using these optional parameters.

slice method javascript; Start. This is the starting index of an array from which items will be copied; End. This is the end of the index of the array; Return value. This method returns a new array containing the selected elements.

Syntax Without Parameters

var array1 = ['mango', 'orange', 'pineapple', 'apple', 'grapes']; var array2 = array1.slice(); console.log(array2); // array2 contains mango, orange, pineapple, apple, grapes

The first parameter is optional and has 0 as a default value, which means if this parameter is not specified the array items will start copying from the beginning of the array.

The second parameter is the end of array index, up to which items will be copied. Note that the item present at this index value will not be copied to the returning array.

Like the first parameter, this is also optional and has default value as length of array on which slice method is applied. All the items up to the last index will be copied.

According to the example above, array1.slice() is equivalent to array1.slice(0,5). That concludes, slice() function without parameters copies all the array items from starting to the end into a new array.

Syntax with Parameters

Example 1

var array1 = ['mango', 'orange', 'pineapple', 'apple', 'grapes']; var array2 = array1.slice(0,2); console.log(array2); // now array2 contains mango and orange.

The slice() function has begin parameter 0 and end parameter 2, this means it returns 2 items starting from index 0 of array.

Example 2

var array1 = ['mango', 'orange', 'pineapple', 'apple', 'grapes']; var array2 = array1.slice(1,4); console.log(array2); // now array2 contains orange, pineapple, apple.

In this example, the slice function takes parameters 1 and 4. It will slice an array starting from the second item to the fourth item.

Example 3

var array1 = ['mango', 'orange', 'pineapple', 'apple', 'grapes']; var array2 = array1.slice(1,10); console.log(array2); // now array2 contains orange, pineapple, apple, grapes.

If the end parameter is greater than the length of the array, the slice will return an array with items equal to the length of the array.

Example 4

var array1 = ['mango', 'orange', 'pineapple', 'apple', 'grapes']; var array2 = array1.slice(1); console.log(array2); // now array2 contains orange, pineapple, apple, grapes.

In this case, the slice function has only a start parameter. The end parameter will default to the length of the array. This is similar to what we had in the previous example where the end parameter is greater than the length of the array.

Example 5

var array1 = ['mango', 'orange', 'pineapple', 'apple', 'grapes']; var array2 = array1.slice(-2); console.log(array2); // now array2 contains apple, grapes.

If we are using negative index values as parameters, the function will indicate the offset from the end of the array. The function will then return the last two elements from the array.

Getting started with JavaScript array slice.

When using javascript array slice, remember this function will not modify the original array. Programmers are then free from the burden of tracking the state of the original array. The new array will then be returned at the end of the execution of function.

Set up an example and start practicing. Soon, you’ll be able to use the array slice method in your code.

New Call-to-action

Topics: Javascript

Related Articles

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

Learn more about one of the world's most popular programming languages.