javascript
  1. javascript-slice
PreviousNext

JavaScript slice()

The slice() method is a built-in JavaScript function that extracts a portion of an array and returns it as a new array without modifying the original array.

Syntax

The syntax for slice() method is as follows:

array.slice(start, end)
  • start: An integer that specifies where to start the extraction (default: 0).
  • end: An integer that specifies where to end the extraction (default: array.length). The slice() method extracts up to, but not including the end position.

Example

Consider an array fruits showing different fruits:

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];

To extract a portion of the array from the index 1 to 3 (excluding the 3rd index), we can use the following code:

Original Array: Banana, Orange, Lemon, Apple, Mango
Sliced Array: Orange, Lemon


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Array Slice Example</title>
</head>
<body>

<!-- Placeholder for displaying the output -->
<p id="output"></p>

<script>
    // Array
    const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];

    // Use slice to create a new array with elements from index 1 to 3 (exclusive)
    const slicedFruits = fruits.slice(1, 3);

    // Display the original and sliced arrays
    document.getElementById("output").innerHTML += "Original Array: " + fruits.join(', ') + "<br>";
    document.getElementById("output").innerHTML += "Sliced Array: " + slicedFruits.join(', ');
</script>

</body>
</html>
Try Playground

Output

The slice() method returns a new array containing the extracted elements.

Explanation

The slice() method returns a new array that contains extracted elements. It accepts two arguments - the starting and ending index. If you omit both arguments, it will make a copy of the whole array. The start position is inclusive, whereas the end position is exclusive. That means the element at the start position is included in the new array, but the element at the end position (if specified) is not included.

Use

The slice() method can be used for various purposes:

  • Extracting a portion of an array without modifying the original array.
  • Taking a shallow copy of the original array without a reference to the original array.
  • Splitting an array into two.

Important Points

Here are some important points to keep in mind while using the slice() method:

  • The start and end parameters are optional. If you omit them, the method extracts the entire array.
  • slice() method does not change the original array. It returns a new array that contains the extracted elements.
  • The start and end parameters can be negative, which means they count from the end of the array.
  • The slice() method does not modify the original array. If you want to modify the original array, you can use the splice() method.

Summary

The slice() method is a powerful array method in JavaScript that helps extract a portion of an array and return a new array containing those extracted elements. It is simple, efficient, and easy to use. It is widely used for managing arrays and building complex applications. Keep in mind that using slice() does not change the original array but returns a new array containing the extracted elements. Use slice() to extract a portion of the array, do not change the original array.

join()splice()
Published on: