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 ✌

Blog

Stop Googling split, splice, and slice!

Ahmedammarr

split:

signature:

Splice:

signature:

Slice:

signature:

Join Our Newsletter. No Spam, Only the good stuff.

Related