• JavaScript Video Tutorials

JavaScript - Array slice() Method

In JavaScript, the Array.slice() method is used to select a portion of elements from an array and return a new array with those selected elements. It accepts two parameters: "start" index and the "end" index. It selects from a given "start", up to a given "end". If we do not provide the end index, the method extracts to the end of the array.

This method does not modify the existing array instead; it returns a new array containing the shallow copy of the selected elements.

Syntax

Following is the syntax of JavaScript Array slice() method −

array.slice(start, end);

Parameters

This method accepts two parameters. The same is described below −

  • start − This is the start position in the array from which we want to select elements. By default, this value is 0.
  • end − This is the position in the array before which we want to stop selecting elements. Default value is the last element.

Return value

This method returns a new array containing the extracted elements. It does not modify the original array.

Examples

Example 1

In the following example, we are passing "2" as the start index to the JavaScript Array slice() method.

<html>
<body>
   <p id="demo"></p>
   <script>
      const animals = ["Lion", "Cheetah", "Tiger", "Elephant", "Dinosaur"];
      let result = animals.slice(2);
      document.getElementById("demo").innerHTML = result;
   </script>
</body>
</html>

After executing the above program, the slice() method selects and returns all the elements from index position 2 to the end of the array.

Output

Tiger,Elephant,Dinosaur

Example 2

Here, we are selecting and returning the elements from the element at index 2 till the element at index 4 −

<html>
<body>
   <p id="demo"></p>
   <script>
      const animals = ["Lion", "Cheetah", "Tiger", "Elephant", "Dinosaur"];
      let result = animals.slice(2, 4);
      document.getElementById("demo").innerHTML = result;
   </script>
</body>
</html>

Output

Tiger,Elephant

Example 3

Here, we are passing a negative value “-2” as an argument to the start index of slice() method. So, the method starts selecting the elements from the end of the array.

<html>
<body>
   <p id="demo"></p>
   <script>
      const animals = ["Lion", "Cheetah", "Tiger", "Elephant", "Dinosaur"];
      let result = animals.slice(-2);
      document.getElementById("demo").innerHTML = result;
   </script>
</body>
</html>

Output

Elephant,Dinosaur

Example 4

In this example, we are passing “-4” as start postion and “−1” as end position. So, it selects and returns elements from the fourth-to-last to the second-to-last in the array.

<html>
<body>
   <p id="demo"></p>
   <script>
      const animals = ["Lion", "Cheetah", "Tiger", "Elephant", "Dinosaur"];
      let result = animals.slice(-4, -1);
      document.getElementById("demo").innerHTML = result;
   </script>
</body>
</html>

Output

Cheetah,Tiger,Elephant

Example 5

If no arguments are passed, the slice() method returns the result array contains the same elements as the original animals array.

<html>
<body>
   <p id="demo"></p>
   <script>
      const animals = ["Lion", "Cheetah", "Tiger", "Elephant", "Dinosaur"];
      let result = animals.slice();
      document.getElementById("demo").innerHTML = result;
   </script>
</body>
</html>

Output

As we can see the output, result array contains same elements as animals array.

Lion,Cheetah,Tiger,Elephant,Dinosaur
Advertisements