Splice, Slice & Split.. What’s the difference?
Splice, slice and split are three very common JavaScript methods that can be often confused with each other due to the similarity of the word. I wanted to write about these three methods to clearly distinguish each purpose.
Let’s start with split —
Split is used to literally ‘split’ a string into an array of substrings. Though it returns an array, it cannot be called on arrays. A specified separator can be used to determine the point of separation and a limit can be used to determine how many splits to make. Using a ‘limit’ will eliminate the remaining string after the limit has been reached. The split method is nondestructive to the string and will return the new array.
Let’s see some examples -
let newString = "we are learning about the javascript method split"If a separator or limit is not defined, an array will still be returned. The string will be the only item in the array.
newString.split()
// returns ["we are learning about the javascript method split"]To split at each letter —
newString.split("")
// returns ["w", "e", " ", "a", "r", "e", " ", "l", "e", "a", "r", "n", "i", "n", "g", " ", "a", "b", "o", "u", "t", " ", "t", "h", "e", " ", "j", "a", "v", "a", "s", "c", "r", "i", "p", "t", " ", "m", "e", "t", "h", "o", "d", " ", "s", "p", "l", "i", "t"]To split at each space —
newString.split(" ")
// returns ["we", "are", "learning", "about", "the", "javascript", "method", "split"]To use a limit , in this example 3 items —
newString.split(“ “, 3)
// returns ["we", "are", "learning"]Now let’s talk about slice —
Like split, slice is also nondestructive. Slice is a method of both arrays and strings. For a string — the method extracts a portion of the string and returns it as a new string. Similarly, for an array — the method extracts a portion of an array and returns it as a new array. The method takes a beginning and ending argument. The return will include the item at the beginning index and everything between the beginning and end. However, the return will not include the ending index. Now let’s see some examples!
On a string — each character is considered an index
newString.slice(0, 15)
// returns "we are learning"newString.slice(7, 36)
// returns "learning about the javascript"
Let’s use slice on an array —
let newArray = ["red", "orange", "green", "blue"]newArray.slice(0, 1)
// returns ["red"]newArray.slice(0, 3)
// returns ["red", "orange", "green"]newArray.slice(1)
// returns ["orange", "green", "blue"]
// if you do not specify an ending index it will return the rest of the arraynewArray.slice(-1)
// returns ["blue"]
Now last but not least, splice —
Unlike split and slice, splice is destructive — meaning it alters the contents of the array. Splice can remove, replace existing elements, or add new elements to an array. Splice alters the existing array, but it will return the removed items in an array. If there are not any removed items the return will be an empty array. Splice takes 3 arguments — start, delete count and added items. Let’s check it out!
// Let's use this definition of newArray for each example
let newArray = ["red", "orange", "green", "blue"]
// ...start at index 0 and remove 1 item
newArray.splice(0, 1)
//returns ["red"]
// newArray is now ["orange", "green", "blue"]// ..start at index 1 and remove the rest of the array since delete count is not specified
newArray.splice(1)
// returns ["orange", "green", "blue"]
// newArray is now ["red"]// ..start at index 4, do not delete anything and add "pink"
newArray.splice(4, 0, "pink")
// returns []
// newArray is now ["red", "orange", "green", "blue", "pink"]//..start at index 2, remove 1 item (in this case "green")and replace it with "pink"
newArray.splice(2, 1, "pink")
// returns ["green"]
// newArray is now ["red", "orange", "pink", "blue"]
Overall split, slice and splice are important methods to know for manipulating string and arrays. One key difference is to know what they can be used for..
And to remember who is destructive and who isn’t…
Sources:
