DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Javascript cheat sheet: .slice() and .splice()
ππšπ›π’ ✨
ππšπ›π’ ✨

Posted on • Updated on

Javascript cheat sheet: .slice() and .splice()

I recently came across a twitter post where the user challenged others if they knew the difference between the js methods .slice() and .splice() without googling them. A lot of people mixed them up.

So I've created this simplified cheat sheet of everything you need to know about the 2 methods.

What you should know

  • .slice() and splice() are both array methods.

  • both of them return arrays as outputs

  • the key is to pay attention to what they return as the output array and if they mutate the original array (they one on which the were applied to)

    1) .slice()

  • .slice() returns selected elements in an array, as a new array. Selection is done by index.

  • .slice() does not affect the original array

With splice() you can select one or more elements.

For example: This code snippet returns 3 (which is at index 2)

[1,2,3,4,5].slice(2) // returns 3 (which is at index 2)
Enter fullscreen mode Exit fullscreen mode

and this code snippet returns 2,3,4 (from index 1 to 4 exclusively)

[1,2,3,4,5].slice(1,4) // returns 2,3,4 (from index 1 to 4 exclusively)
Enter fullscreen mode Exit fullscreen mode

2) .splice()

  • .splice modifies the original array (adds and/or removes elements from the array)

  • The method returns the original array **modified**

With splice you can:

  • remove elements
[1,2,3,4,5].splice(3) // returns [1,2,3] (first 3 elements)
[1,2,3,4,5].splice(2,2) // at position 2 remove 2 elements (returns [1,2,5])
Enter fullscreen mode Exit fullscreen mode
  • add elements

[1,2,5].splice(2,0,3,4) // at postion 2 add 2 elements (returns [1,2,3,4,5])

Enter fullscreen mode Exit fullscreen mode
  • remove and add elements at the same time
// at position 2, remove 1 elements and add 2 new items
[1,2,3,4,5].splice(2,2,"HTML","CSS") // returns [1,2,"HTML","CSS",5]
Enter fullscreen mode Exit fullscreen mode

Remember: .splice() mutates the array, .slice() does not!

Hope this is helpful to someone πŸ’œ

Oldest comments (5)

Collapse
 
orliesaurus profile image
orliesaurus

Helpful, thank you!

Collapse
 
lukeshiru profile image
Luke Shiru

My way of remembering the difference between them is:

splice is what you type accidentally when you actually wanted to use slice

πŸ˜‚ jk jk, my actual way of remembering is:

"The short one is the good one"

Mainly because splice (the "long one") mutates the original array while slice doesn't.

Cheers!

Collapse
 
hirenvadher954 profile image
Hiren Vadher • Edited on

Sometimes I think Why JS has so many confusing terms. BTW Great info thanks for sharing.

Collapse
 
jackmellis profile image
Jack

Slice is underrated as a way to safely do normally-mutative calls.
Get last item:

const last = arr.slice().pop()
Enter fullscreen mode Exit fullscreen mode

First item:

const first = arr.slice.shift()
Enter fullscreen mode Exit fullscreen mode

Reverse a list without mutating the original:

const reversed = arr slice().reverse()
Enter fullscreen mode Exit fullscreen mode

Also

The method returns the original array modified

This isn't quite right. The splice function actually returns an array of elements that were deleted from the original array

Collapse
 
jackmellis profile image
Jack

Also also your slice(2) example would return [3,4,5]. With one argument, slice returns all elements starting from that index

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

β­οΈπŸŽ€ JavaScript Visualized: Promises & Async/Await

async await