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 the above example, the following statement:

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

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

JavaScript slice() syntax

The syntax of the 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 the 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 elements are included while slicing.

Use a negative value or number to slice elements from the 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

Consider the following code as another example demonstrating the slice() method in JavaScript:

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 »


Liked this post? Share it!