Stop Googling split, splice, and slice!

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:

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

signature:

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"]

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

str.split("",4) 
//output: ["G", "o", "o", "d"]

Splice:

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

signature:

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

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

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

colors.splice(1,0,"white")
/* 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"]
*/

colors.splice(3,2,"orange","purple")
/* 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"]
*/

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

Slice:

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

signature:

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"]

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

Comments

[MagicD]

will probably Google for link with this article instead

[Dan D]

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

[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.

[Ahmedammarr]

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

[Hub]

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

[Nic]

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

[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 blackpearlmatrix.com :)