JavaScript slice() | Slice an Array

The JavaScript slice() method is used to slice an array. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p id="xyz"></p>
   
   <script>
      const myArray = ["Boston", "Austin", "Seattle", "Oakland", "Denver"];
      const newArray = myArray.slice(1, 4);
      
      document.getElementById("xyz").innerHTML = newArray;
   </script>
   
</body>
</html>

Output

In above example, the following statement:

const newArray = myArray.slice(1, 4);

states that the elements from index number 1 (included) to 4 (excluded), that are Austin (at index number 1), Seattle (at index number 2), Oakland (at index number 3) gets sliced and initialized to newArray as a new array.

JavaScript slice() Syntax

The syntax of slice() method in JavaScript is:

array.slice(startingIndex, endingIndex)

Note - The default value of startingIndex is 0, whereas the default value of endingIndex is the index of last element that will be array.length - 1.

Note - The startingIndex is included, whereas the endingIndex is excluded. That means, slice(3, 7) indicates that the elements from index number 3 to index number 6 will be sliced, where both 3 and 6 indexed element is included while slicing.

Note - Use negative value/number to slice elements from end of the specified array. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p id="xyz"></p>
   
   <script>
      const arr = ["Boston", "Austin", "Seattle", "Oakland", "Denver"];
      const narr = arr.slice(-4, -1);
      
      document.getElementById("xyz").innerHTML = narr;
   </script>
   
</body>
</html>

Output

JavaScript slice() Example

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p>Original Array: <b><span id="original"></span></b></p>
   <p>New Array (after using slice(2, 3)): <b><span id="slice"></span></b></p>
   
   <script>
      const a = ["Boston", "Austin", "Seattle", "Oakland", "Denver"];
      document.getElementById("original").innerHTML = a;

      const na = a.slice(2, 3);
      document.getElementById("slice").innerHTML = na;
   </script>
   
</body>
</html>

Output

Original Array:

New Array (after using slice(2, 3)):

JavaScript Online Test

« Previous Tutorial Next Tutorial »