DEV Community

Cover image for Slicing in Javascript
Shubham Tiwari
Shubham Tiwari

Posted on • Edited on

Slicing in Javascript

Hello guys today i will be discussing slicing using slice() method of array in javascript.

Let's get started...

What is slicing?

slicing is used to slice and returns a particular part of the array using index number for start and end position of slicing.

Syntax -

slice(start,end)

  • Start is the index number from where the slicing will start.
  • End is the index number at which the slicing will end but this end index won't be included in that sliced array
  • Slice method returns a shallow copy of the array and won't change or modify the original array
  • Let's understand this with examples.

Slicing Code Example-

const array = [1,2,3,4,5,6,7,8,9]

const objectArray = [
  {
    name:"shubham",
    age:21
  },
  {
    name:"shivam",
    age:25
  },
  {
    name:"abhishek",
    age:22
  },
]

// only start index and it will slice the array from index 2
// upto last element of the array
const sliceStart = array.slice(2)

// start and end index
const sliceStartEnd = array.slice(2,4)

// negative index
const negativeSlice = array.slice(-2)

// negtive end index with positive start index
const negativeSliceStartEnd = array.slice(1,-2)

//slice chaining
const sliceChaining = array.slice(2,4).slice(0,4)

// slicing object array
const objectArraySlicing = objectArray.slice(1,3)

// slicing the first half of the array excluding the middle element
const lengthSlicing = array.slice(Math.floor(array.length/2),array.length)

// slice then sort in descending order
const sliceSort = array.slice(2,5).sort((a,b) => b-a)

// slice then filter
const sliceFilter = array.slice(2,6).filter(i => i > 4)

// slice then map
const sliceMap = array.slice(2,5).map(i => i*4)


// returning an array after slicing  
const restParameters = (args) => {
  return args.slice(2,6)
}



console.log("Slicing with only start index - ",sliceStart)
console.log("Slicing with start and end index - ",sliceStartEnd)
console.log("Slicing with negative index - ",negativeSlice)
console.log("Slicing with negative end index - 
 ",negativeSliceStartEnd)
console.log("Slicing with chaining - ",sliceChaining)
console.log("Slicing with array of objects - ",objectArraySlicing)
console.log("Slicing the second half of the array - ",lengthSlicing)
console.log("Slicing with sort - ",sliceSort)
console.log("Slicing with filter - ",sliceFilter)
console.log("Slicing with map - ",sliceMap)
console.log("Slicing array inside function - ",restParameters(array))
Enter fullscreen mode Exit fullscreen mode

Output-

Slicing with only start index  [
  3, 4, 5, 6,
  7, 8, 9
]
Slicing with start and end index - [ 3, 4 ]
Slicing with negative index - [ 8, 9 ]
Slicing with negative end index - [ 2, 3, 4, 5, 6, 7 ]
Slicing with chaining - [ 3, 4 ]
Slicing with array of objects -
[ { name: 'shivam', age: 25 }, { name: 'abhishek', age: 22 } ]
Slicing the second half of the array - [ 5, 6, 7, 8, 9 ]
Slicing with sort - [ 5, 4, 3 ]
Slicing with filter - [ 5, 6 ]
Slicing with map - [ 12, 16, 20 ]
Slicing array inside function - [ 3, 4, 5, 6 ]
Enter fullscreen mode Exit fullscreen mode
  • As you can we can slice array within a range , from the last using negative indexing, from inside functions, also can slice array of objects and can use slice() method with other array methods.
  • Try some more exmaple by yourself with slice() method and tell the output in the comment section ๐Ÿ˜œ.

THANK YOU FOR CHECKING THIS POST โคโค

You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me by some donation at the link below Thank you๐Ÿ‘‡๐Ÿ‘‡ ^^
โ˜• --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/js-push-and-pop-with-arrays-33a2/edit

https://dev.to/shubhamtiwari909/tostring-in-js-27b

https://dev.to/shubhamtiwari909/join-in-javascript-4050

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90

Top comments (0)