JavaScript Array .slice() Method

The array .slice() method is used to get or copy one or more items from a reference array. It works by providing a two indices where they mark the start and end of the copy. This method does not alter the reference array.

Array .slice() Method

  array.slice(start, end)

Array .slice() Method Parameters and Return Value

• If the start and end are omitted, it will return a copy of the whole array.
• If the start and is a negative index and end is omitted, it will start the selection from the end then count-off the number of selection based on given number.

The return value of .slice() is a shallow copy of the array which contains the selected items from start to end.

Array .slice() Method Examples

1. So, let's do some example on how the .slice() works in JavaScript. Say we have an array of cars that contains 7 items. Let's try to get the second to fifth car.

  const cars = [
    { name: "Zenvo ST1", price: "$1.2M" },
    { name: "Ferrari LaFerrari", price: "$1.4M" },
    { name: "Pagani Huayra", price: "$1.4M" },
    { name: "Aston Martin One-77", price: "$1.4M" },
    { name: "Koenigsegg One", price: "$2.4M" },
    { name: "Lamborghini Veneno", price: "$4.2M" },
    { name: "Tesla Model S", price: "$131,000" },
  ]

  const myCars = cars.slice(1, 5);
  console.log(myCars);

  // output would be:
  // [
  //  { name: "Ferrari LaFerrari", price: "$1.4M" },
  //  { name: "Pagani Huayra", price: "$1.4M" },
  //  { name: "Aston Martin One-77", price: "$1.4M" },
  //  { name: "Koenigsegg One", price: "$2.4M" },
  // ] 

2. Let's do another example. Say we have an array of fruits. Now, we want to get the last 4 fruits. We can do that by passing in a negative number to the slice method. Since we want the last four, lets just enter -4 as sole parameter.

  const fruits = [
    { name: "Watermelon", emoji: "🍉" },
    { name: "Banana", emoji: "🍌" },
    { name: "Pineapple", emoji: "🍍" },
    { name: "Mango", emoji: "🥭" },
    { name: "Apple", emoji: "🍎" },
    { name: "Grapes", emoji: "🍇" },
  ]

  const lastFour = fruits.slice(-4);
  console.log(lastFour);

  // output would be:
  // [ 
  //  { "name": "Pineapple", "emoji": "🍍" }, 
  //  { "name": "Mango", "emoji": "🥭" },
  //  { "name": "Apple", "emoji": "🍎" },
  //  { "name": "Grapes", "emoji": "🍇" } 
  // ]

3. Let's run last example. To elaborate that the end or second parameter is being excluded in the selection. Let's get the "pineapple 🍍" and "mango 🥭".

  
    const fruits = [ "🍉", "🍌", "🍍", "🥭", "🍎", "🍇"]

    const pineappleMango = fruits.slice(2, 4);
    console.log(pineappleMango);

    // output would be:
    // [ "🍍", "🥭" ]
  

The "pineapple 🍍" is in index 2, so we added on the start parameter 2. Then, we know that the end parameter is excluded in the selection, that's why we added the index 4 "apple 🍎" so that we can just get the index before it which is what we want, the "mango 🥭".

Watch: Array .slice() Method Tutorial

For a more clearer examples and details about Javascript array .slice() and check out this video on YouTube.