substring() vs slice() vs splice()
Tags: webdev, javascript, beginners, programming
Published: 2023-08-07 08:59:56

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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mvyx4p95z36m91refxa1.png)

## 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 

```javascript
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 

```javascript
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.

```javascript
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. 

```javascript
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:

```javascript
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: 

```javascript
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: 

```javascript
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](https://www.linkedin.com/in/hardik-sharma-1011/).

Thank you for reading.