DEV Community

Cover image for Stop Googling split, splice, and slice!

Stop Googling split, splice, and slice!

ahmeddammarr profile image Ahmedammarr ・2 min read

Ok, Split, Splice, and Slice methods are getting me confused every single time I use one of them, and no matter how many times I use them each time feels like the first time so I decided to summarize how they work in this article and save it as a memo to be my reference in such a situation.
Let's start!


Split is a string method, It converts a string into an array of substrings


string.split(substring that separates our string, limit)

const str = "Good Morning Dev Community"

str.split("Morning Dev ")
//output:["Good ", "Community"]

str.split(" ") 
//output: ["Good", "Morning", "Dev", "Community"]

//output: ["G", "o", "o", "d", " ", "M", "o", "r", "n", "i", "n", "g", " ", "D", "e", "v", " ", "C", "o", "m", "m", "u", "n", "i", "t", "y"]

//output: ["G", "o", "o", "d"]

Enter fullscreen mode Exit fullscreen mode


Splice is an array method that adds, replaces, or removes items from the array and it returns the replaced/removed item


array.splice(start index, number of replaced/removed items, new items to be added or replacing the removed)

const colors = ["orange", "red", "blue", "black"]

/* output:["red"]
- "red" is removed and replaced by "black"
- splice methods returns the removed item ["red"]
- colors = ["orange", "black", "blue", "black"]

/* output:[]
- "white" is inserted at index 1 and there is no item removed
- splice method return an empty array
- colors = ["orange", "white", "black", "blue", "black"]

/* output:["blue", "black"]
- "orange","purple" are inserted from index 3 and "blue", "black" are removed
- splice method returns ["blue", "black"]
- colors = ["orange", "white", "black", "orange", "purple"]

/* output:["orange", "purple"]
- "orange","purple" are removed
- splice method returns ["orange", "purple"]
- colors = ["orange", "white", "black"]

Enter fullscreen mode Exit fullscreen mode


Slice is an array method that returns a new array with the selected items from the original array


array.slice(start index where the selection starts, end index where the selection ends)

const weekDays = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday","Saturday"]

const mondayTuesday = weekDays.slice(1,3)
//mondayTuesday= ["Monday", "Tuesday"]

const allExceptSundayMonday = weekDays.slice(2)
//allExceptSundayMonday = ["Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

const allExceptSaturday = weekDays.slice(0,weekDays.length - 1)
//allExceptSaturday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]

Enter fullscreen mode Exit fullscreen mode

Thank you, I hope we never google these three methods again ✌

Discussion (7)

Editor guide
magicd profile image

will probably Google for link with this article instead

dandoestech profile image
Dan D

This was a good article but didn't solve the question the author posed in the title

jamesthomson profile image
James Thomson

Too true. My solution has been to always keep MDN resources tabs open. Or if you use something like Alfred you can add them as custom searches.

ahmeddammarr profile image
Ahmedammarr Author

I was trying to simplify the three methods with examples to be more memorized

tnifey profile image
Hub • Edited

I'll still google for splice params order and what I can do with it. It's like all in one method.

nicm42 profile image

Thank you for this. I can never remember the difference between these. It doesn't help that the names are so similar.

matrixpearl profile image
Black Pearl Matrix

YES !!! Split, Splice, and Slice methods are very confusing and there is a learning curve till someone can use them properly. Thanks for your article. Cheers from :)