.slice()

The method slice() returns a new array by copying the specified range of elements from the original array. The start and end of the range are determined by the indices of the elements. The original array is not modified.

Let's copy elements from the array animals, starting from the element at index 2, into a new array:

        
          
          const animals = [  'echidna', 'dingo', 'koala', 'kangaroo', 'wombat', 'platypus']const newAnimals = animals.slice(2)console.log(newAnimals)// ['koala', 'kangaroo', 'wombat', 'platypus']
          const animals = [
  'echidna', 'dingo', 'koala', 'kangaroo', 'wombat', 'platypus'
]
const newAnimals = animals.slice(2)

console.log(newAnimals)
// ['koala', 'kangaroo', 'wombat', 'platypus']

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Let's copy the last 3 elements of the array animals into a new array:

        
          
          const animals = [  'echidna', 'dingo', 'koala', 'kangaroo', 'wombat', 'platypus']const newAnimals = animals.slice(-3)console.log(newAnimals)// ['kangaroo', 'wombat', 'platypus']
          const animals = [
  'echidna', 'dingo', 'koala', 'kangaroo', 'wombat', 'platypus'
]
const newAnimals = animals.slice(-3)

console.log(newAnimals)
// ['kangaroo', 'wombat', 'platypus']

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Let's copy elements from the array months, starting from the element at index 2 and up to the element at index 5 (the element at index 5 is not included):

        
          
          const months = [  'jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul']const springMonths = months.slice(2, 5)console.log(springMonths)// ['mar', 'apr', 'may']
          const months = [
  'jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul'
]
const springMonths = months.slice(2, 5)

console.log(springMonths)
// ['mar', 'apr', 'may']

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Array.slice takes two optional arguments:

• start index, the position of the element from which the elements will be copied;
• end index, the position of the element following the last copied element in the original array.

If the index is negative, the counting from the end of the array starts.

If the start index is not specified or is defined as start <= -array.length, the start of the copying range will be the 0th element.

If the start index is greater than or equal to the length of the array, slice() will return an empty array.

If the end index is not specified or is defined as end >= array.length, the end of the copying range will be the last element.

If the slice() method is called without arguments, a copy of the entire original array will be created.

Array.slice returns a new array.

The slice() method can be used when you need to copy part of the elements of the original array into a new array.

The slice() method is a copying method; it does not modify the original array for which it was called.

Thanks to the support of negative indices, you can get a copy of a certain part of the original array without calculating the length of the array.

Let's write a function to create an array that contains all elements of the original, except for the first and last:

        
          
          const getShrinkArray = array => array.slice(1, -1)const numbers = [0, 1, 2, 3, 4, 5]const newNumbers = getShrinkArray(numbers)console.log(newNumbers)// [1, 2, 3, 4]console.log(getShrinkArray(newNumbers))// [2, 3]
          const getShrinkArray = array => array.slice(1, -1)
const numbers = [0, 1, 2, 3, 4, 5]
const newNumbers = getShrinkArray(numbers)

console.log(newNumbers)
// [1, 2, 3, 4]

console.log(getShrinkArray(newNumbers))
// [2, 3]

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

💡 If the array has unfilled elements, when executing slice(), the array will preserve the absence of value for such elements and will not change them to undefined.

Let's create an array that has unfilled elements:

        
          
          const elements = ['Ti', 'V', , , 'Fe', 'Co']console.log(elements)// ['Ti', 'V', <2 empty items>, 'Fe', 'Co']console.log(elements.slice(1, -1))// ['V', <2 empty items>, 'Fe']
          const elements = ['Ti', 'V', , , 'Fe', 'Co']
console.log(elements)
// ['Ti', 'V', <2 empty items>, 'Fe', 'Co']

console.log(elements.slice(1, -1))
// ['V', <2 empty items>, 'Fe']

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

💡 If the original array has an element that is an object, then the array returned as a result of the slice() method will contain a reference for such an element (shallow copy of the element), not a new object. Thus, changes to the object in the original array will be visible in the created array and vice versa:

        
          
          const cities = [  {city: 'Glasgow'}, {city: 'Liverpool'}, {city: 'London'}]// Let's copy all elements except the first into a new arrayconst newCities = cities.slice(1)console.log(newCities)// [{city: 'Liverpool'}, {city: 'London'}]// Let's change the element in the original arraycities[1].established = 1207console.log(cities)// [//  {city: 'Glasgow'}, {city: 'Liverpool', established: 1207}, {city: 'London'}// ]// Changes are also visible in the created arrayconsole.log(newCities)// [{city: 'Liverpool', established: 1207}, {city: 'London'}]
          const cities = [
  {city: 'Glasgow'}, {city: 'Liverpool'}, {city: 'London'}
]

// Let's copy all elements except the first into a new array
const newCities = cities.slice(1)
console.log(newCities)
// [{city: 'Liverpool'}, {city: 'London'}]

// Let's change the element in the original array
cities[1].established = 1207

console.log(cities)
// [
//  {city: 'Glasgow'}, {city: 'Liverpool', established: 1207}, {city: 'London'}
// ]

// Changes are also visible in the created array
console.log(newCities)
// [{city: 'Liverpool', established: 1207}, {city: 'London'}]

        
        
          
            
            Copy
            Copied
            Failed to copy