JavaScript Array.slice() method slices out or extracts a sequence out of an Array. It returns a slice, or sub-array, of the specified array.

Using slice() method, we can copy a portion of an array and assign it to a new variable name.

The slice() method works on the copy of an array. It does not modify the original array on which it is called.

JavaScript slice() Method Syntax

The slice() method of Array object comes into two flavors that are as:

array.slice(index);
array.slice(start, end);

The slice() method returns a shallow copy of elements from the original array. A new array that contains the sliced out or extracted elements.

slice() Method Parameters

If only one parameter (index value) is specified, the slice() method creates a sequence of elements that begins from index and ends on the last array element.

In other words, the returned array contains all elements from the starting to ending of the array.

If both start and end indexes are specified, the slice() method creates a sequence of elements that begins from the start index up till the end index – 1.

In other words, the returned array contains the element specified by the first parameter start and all subsequent elements up to, but not including element the specified by the second parameter end.

If either argument start or end is a negative value, it specifies an array element relative to the last element in the array.

JavaScript Array slice() Method Example

1. Suppose we have an array of names shown in the following table:

Suppose we want to create a new array with elements 1, Ivaan, and 2, Adam. We would call slice() method and specify a start index of 1 and an end index of 3. The code would be something like this:

Program code 1:

Output:
      Original array: Paul,Ivaan,Adam,Bob,Deep (Original array unaffected)
      Sliced array: Ivaan,Adam

When Javascript copies a portion of an array, it copies the new elements to an array in which indexes start from 0, 1, 2…. JavaScript does not use their old indexes to place their new elements in the array.

After slicing out elements of an array, the slicedArray looks like the following table:

As you observe in the output, the first array, “names” is unaffected by slicing.

2. Let’s create a JavaScript program to slice out a portion of elements of an array with different indexes. Look at the following script code to understand better.

Program code 2:

Output:
      Python,JavaScript,C,C++,Java,Go
      JavaScript,C,C++,Java,Go
      JavaScript,C,C++,Java

JavaScript slice() With Negative index

In the JavaScript slice() method, we can also use negative start and end indices. The index of the last element will be -1, the index of the second last element will be -2, and so on. Let’s take an example program based on it.

Program code 3:

Output:
      Green,Black,White
      Yellow,Green,Black
      Red,Yellow,Green,Black
      Green,Black,White

JavaScript slice() Method with Objects as Array Elements

Array.slice() method does not alter the original array. It returns a shallow copy of elements from the original array.

JavaScript copies elements of the original array into the returned array in the following ways:

1. For objects, Array.slice() method copies object references into the new array. Both the original and new array refer to the same object.

Therefore, if we modify or update an object, the changes are visible to both new and original arrays.

2. For booleans, strings, and numbers (not Boolean, String, and Number objects), Array.slice() method copies values into the new array.

Changes to the boolean, string, or number in the new array do not affect the original array. If we add a new element to either array, the other array is not affected.

Let’s create a JavaScript program in which we will make a change to the object in the new array and see changes are visible in the returned new array and original array or not. Look at the following script code.

Program code 4:

Output:
      { name: 'Bob', age: 23 }
      { name: 'David', age: 23 }

Browser Support

Copying a part of an array using slice() method is a significant feature of ECMAScript1 (ES1). The following browsers support fully ES1 (JavaScript 1997).

• Chrome
• IE
• Edge
• Firefox
• Safari
• Opera

In this tutorial, you learned JavaScript Array slice() method with example programs. Hope that you will have understood the basic concept of Array.slice() in JavaScript and practiced all programs.
Thanks for reading!!!

The post JavaScript Array Slice() Method with Example appeared first on Scientech Easy.