Slicing in Javascript

#javascript #webdev #beginners #tutorial

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))

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 ]

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