Slice() & Splice() in JavaScript
Tags: javascript, webdev, beginners, codenewbie
Published: 2020-07-06 15:31:30

There is often a confusion between slice() and splice() JavaScript array methods. It is a commonly asked question in Javascript interview for freshers.

Let's discuss how they work with examples and what's the core difference between them.

##__Slice():__

1. Takes two optional parameters `start index` and `end index`.
2. Doesn't change the original array instead returns the copied part of array from {start index} to {end index - 1} in a new array, like the example below.

```javascript
let fruits = ['apple', 'mango', 'banana', 'orange'];

fruits.slice(1,3); 
['mango', 'banana'] 
// it returns the elements in index 1(start index) and 2(end index - 1)

fruits: ['apple', 'mango', 'banana', 'orange'] 
// no change in original arary
```

> But it only does shallow copying.[Example below]

```javascript
let oldArray = [
  {id: 1, name: 'js'}, 
  {id: 2, name: 'react'}, 
  {id: 3, name: 'angular'}, 
  {id: 4, name: 'vue'}
];

let newArray = oldArray.slice(1,3);

// output: [  {id: 2, name: 'react'}, {id: 3, name: 'angular'}]


newArray[0].name = 'jquery';

console.log('new array id: 2 value', newArray[0].name); //jquery
console.log('old array id: 2 value', oldArray[1].name); // jquery

```
> if you change the object value (reference type) in newArray it affects the value in oldArray i.e. Shallow copying.


####Great Usecase: if you want a shallow copy of an array: you can use slice() method with no parameters and it will return the new copied array.

```javascript
let originalArr = [1, 2, 3, 4];

let copiedArr = originalArr.slice(); // new copied [1, 2, 3, 4]
```

##__Splice():__

1. Takes two optional parameters `start index` and `length of elements to be deleted`.
2. returns part of array from {start index} to the {start index + length of elements to be deleted} in a new array.
 - But It changes the original array i.e. remove the elements from original array. [Example below]

```javascript
let oldArray = [
  {id: 1, name: 'js'}, 
  {id: 2, name: 'react'}, 
  {id: 3, name: 'angular'}, 
  {id: 4, name: 'vue'}
];

let newArray = oldArray.splice(0, 2);

// newArray: [
  {id: 1, name: 'js'}, 
  {id: 2, name: 'react'}
] 

// oldArray: [
   {id: 3, name: 'angular'}, 
   {id: 4, name: 'vue'}
]
```

- **Usecase 1**: It can also be used to replace items in the original array.
  - splice() can take three parameters start index, length of 
  items to be deleted and items to be replaced.[Example below]
 
```javascript
let fruits = ['apple', 'mango', 'banana', 'orange'];

fruits.splice(0, 1, 'grape'); // ['apple']

// original array: 
['grape', 'mango', 'banana', 'orange'];

// grape has replaced the apple in the original array.
```

- **Usecase 2**: You can add an item in particular index.[Example below] 
```javascript
let fruits = ['apple', 'mango', 'banana', 'orange'];

fruits.splice(2, 0, 'grape'); // []

// original array: 
['apple', 'mango', 'grape', 'banana', 'orange'];

// grape has been added to the index = 2 in the original array.
```


- **Usecase I came across several times**: deleting an element by finding an index.
```javascript
let fruits = [
  {id: 1, value: 'apple'}, 
  {id: 2, value: 'mango'},
  {id: 3, value: 'orange'}
];

let index = fruits.findIndex(el => el.id === 2) // 1

fruits.splice(index, 1); // [{id: 2, value: 'mango'}]

// original array: 
let fruits = [
  {id: 1, value: 'apple'},
  {id: 3, value: 'orange'}
];
```

##Conclusion:
Both these methods can be used for deleting elements in an array.
The core differences are below in table.

slice | splice
--- | ---
return the copied version of deleted elements in new array | return the deleted elements in new array
doesn't change the original array | changes the original array, deleted elements are removed from the original array
no parameters, it will return the shallow copy of original array | no parameters, it will return empty array

Read more on MDN: [splice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice), [slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)


Thanks for reading!
Let's connect on twitter [My Profile](https://twitter.com/geekrk)