These functions are used to get a part of an array or a string, with little differences and we will discuss these differences in this post.
Substring
substring() is a function that can only be called on a string data type. This function is supposed to get a portion of a string from starting index to an end index.
substring() takes two parameters: a start index and an end index. But if we only give one parameter then it'll make a substring keeping that parameter as the start index and going till the end of the string like
let str = "hardik";
let newStr = str.substring(2);
console.log(newStr); // "rdik"
console.log(str); // "hardik"
The main thing to notice here is that it doesn't make any changes to the original string. It just returns a new string. Also, if we provide two parameters like
let str = "hardik";
let newStr = str.substring(2, 4);
console.log(newStr); // "rd"
Here it returns a sub-string starting from our start index: 2 till our end index: 4, but it excludes the character at end index.
This function does not support negative indices as arguments, if passed, the function does not execute.
Slice
slice() is similar to substring, but slice() can be used on both string and array. This also takes two parameters like substring() and behaves in a similar fashion. For example if we just provide a single parameter then it'll give us a sub-array or sub-string till the end of the array or string it is applied to.
let str = "hardik"
let arr = [1, 2, 3, 4, 5, 6, 7];
console.log(str.slice(4)); // "ik"
console.log(arr.slice(2, 5)); // [3, 4, 5]
Unlike substring(), slice() takes in negative parameters as well.
let arr = [1, 2, 3, 4, 5, 6, 7];
console.log(arr.slice(2, -1)); // [3, 4, 5, 6]
So, what's happening in the above example is that slice calculates negative indices from the end of the array and hence -1 is the last index, so we slice the array till the last index excluding the last index itself. This works for both array and string.
slice() doesn't change anything in the original array or string it is applied to, it just returns a new array or string.
Splice
splice() is a function that can be called only on arrays. This function modifies the contents of an array by removing or replacing existing elements from a certain index. This can be great for replacing elements in an array on a big scale.
This function takes three base parameters splice(start, deleteCount?, item?). The parameter start is where the deletion will begin, deleteCount is how many elements from start we want to delete and the item is what will be added to the array after start. We can add as many items as we want, just pass additional arguments to the function.
For example:
let arr = [1, 2, 3, 4, 5, 6, 7];
let brr = arr.splice(1, 3, 7,7,7);
console.log(arr); // [1, 7, 7, 7, 5, 6, 7]
console.log(brr); // [2, 3, 4]
As seen from the example above it changes the original array and returns us the spliced array ([2, 3, 4]).
What happens if we only pass one parameter:
let arr = [0,1,2,3,4,5];
let brr = arr.splice(2);
console.log(arr); // [0, 1]
console.log(brr); // [2, 3, 4, 5]
It behaves similarly as substring and slice in this case and gives us back an array from start index to the end of the array but it also edits the original one.
Now, what happens if we add more items as parameters than the deletecount we provide:
let arr = [1, 2, 3, 4, 5, 6, 7];
let brr = r.splice(1, 3, 7,7,7,7,7);
console.log(arr); // [1, 7, 7, 7, 7, 7, 5, 6, 7]
console.log(brr); // [2, 3, 4]
It returns us the array of elements that we deleted and adds all the items in the original array, no matter how many items we provide it'll add it to the original array. Here, we removed 3 elements and added 5 in its place.
Conclusion
These functions are quite useful in our day to day coding and can sometimes be a little confusing. I hope this article helped you clear some of your doubts regarding substring(), slice() and splice(). Connect with me if you still have any doubts regarding this.
You can also reach out to me on LinkedIn.
Thank you for reading.
Top comments (1)
Very well explained.