Weekly JSByte: JavaScript Array Slice vs Splice: the Difference Explained with Cake
This title could have been "how not to get confused between JavaScript's splice and slice," because I can never remember the difference between the two. So I am hoping this trick will help both me and you in the future:
S (p) lice = Slice + (p) => Slice + in (p) lace
What is the difference between .slice() and .splice()?
Slice, the name suggests, is used to slice elements out of an array. But unlike slicing a cake, slicing an array does not cut the actual array, but keeps it unmodified (infinite cake!).
Splice does operations in place, which means it modifies the existing array. In addition to removing elements, splice is also used to add elements. Splice is the real world cake "slice".
const infiniteCake = ['🍰','🍰','🍰','🍰','🍰','🍰']
let myPieceOfCake = infiniteCake.slice(0) // ['🍰']
console.log(infiniteCake) //['🍰','🍰','🍰','🍰','🍰','🍰']
const cake = ['🍰','🍰','🍰','🍰','🍰','🍰'];
let myPieceOfCake = cake.splice(0, 1) // ["🍰"]
console.log(cake) // (5) ["🍰", "🍰", "🍰", "🍰", "🍰"]
TL;DR
Use slice for removing elements if the original array should not be modified.
Use splice if the original array needs to be modified, or elements need to be added.