split() methods. Perhaps because their naming is so similar they are often confused, even among experienced developers.
I advise students and junior developers to read this article carefully because these three methods can also be asked in JOB INTERVIEWS.
You can find a summary of each method in the end. If you prefer, you can also watch the video version below:
So let’s start…
let arrayDefinition = ; // Array declaration in JS
Now let’s declare another array with different data types. I will use it below in examples:
let array = [1, 2, 3, "hello world", 4.12, true];
Slice ( )
The slice( ) method copies a given part of an array and returns that copied part as a new array. It doesn’t change the original array.
- From: Slice the array starting from an element index
- Until: Slice the array until another element index
For example, I want to slice the first three elements from the array above. Since the first element of an array is always indexed at 0, I start slicing “from”0.
Now here is the tricky part. When I want to slice the first three elements, I must give the until parameter as 3. The slice( ) method doesn’t include the last given element.
array --> 1 // included array --> 2 // included array --> 3 // included array --> "hello world" // not included
This can create some confusion. That’s why I call the second parameter “until”.
let newArray = array.slice(0, 3); // Return value is also an array
Finally, I assign the sliced Array to the newArray variable. Now let’s see the result:
Important Note: the Slice( ) method can also be used for strings.
Splice ( )
The name of this function is very similar to slice( ). This naming similarity often confuses developers. The splice( ) method changes an array, by adding or removing elements from it. Let’s see how to add and remove elements with splice( ):
For removing elements, we need to give the index parameter, and the number of elements to be removed:
array.splice(index, number of elements);
Index is the starting point for removing elements. Elements which have a smaller index number from the given index won’t be removed:
array.splice(2); // Every element starting from index 2, will be removed
If we don’t define the second parameter, every element starting from the given index will be removed from the array:
As a second example, I give the second parameter as 1, so elements starting from index 2 will be removed one by one each time we call the splice ( )method:
After 1st call:
After 2nd call:
This can continue until there is no index 2 anymore.
For adding elements, we need to give them as the 3rd, 4th, 5th parameter (depends on how many to add) to the splice ( ) method:
array.splice(index, number of elements, element, element);
As an example, I’m adding a and b in the very beginning of the array and I remove nothing:
array.splice(0, 0, 'a', 'b');
Split ( )
Slice( ) and splice( ) methods are for arrays. The split( ) method is used for strings. It divides a string into substrings and returns them as an array. It takes 2 parameters, and both are optional.
- Separator: Defines how to split a string… by a comma, character etc.
- Limit: Limits the number of splits with a given number
The split( ) method doesn’t work directly for arrays. However, we can first convert the elements of our array to a string, then we can use the split( ) method.
Let’s see how it works.
Firstly, we convert our array to a string with toString( ) method:
let myString = array.toString();
Now let’s split myString by commas, limit them to three substrings, and return them as an array:
let newArray = myString.split(",", 3);
As we can see, myString is split by commas. Since we limit split to 3, only the first 3 elements are returned.
NOTE: If we have a usage like this:
array.split("");then each character of the string will be divided as substrings:
Slice ( )
- Copies elements from an array
- Returns them as a new array
- Doesn’t change the original array
- Starts slicing from … until given index: array.slice (from, until)
- Slice doesn’t include “until” index parameter
- Can be used both for arrays and strings
Splice ( )
- Used for adding/removing elements from array
- Returns an array of removed elements
- Changes the array
- For adding elements: array.splice (index, number of elements, element)
- For removing elements: array.splice (index, number of elements)
- Can only be used for arrays
Split ( )
- Divides a string into substrings
- Returns them in an array
- Takes 2 parameters, both are optional: string.split(separator, limit)
- Doesn’t change the original string
- Can only be used for strings
If you want to learn more about web development, feel free to follow me on Youtube!
Thank you for reading!