Alternative Add and Remove JavaScript Array Methods
Tags: javascript, webdev, tutorial, codenewbie
Published: 2021-03-01 20:21:45

We've used methods to add/remove items from the beginning (`unshift(...items)/shift()`) and end (`push(...items)/pop()`). We've also used the `toString()` method on an array to convert it to a string. 

In this article, we will use more methods.

Below are the methods:

---
### *splice* method
Below is the syntax:

```
array.splice(start[, deleteCount, elem1, ..., elemN])
```

See the example below:

```js
const fruits = [ "Apple", "Orange", "Melon", "Banana", "Avocado" ]

console.log( fruits.splice(2, 2) ); // [ "Melon", "Banana" ]
console.log(fruits); // [ "Apple", "Orange", "Avocado" ]
```

`start` => index `0` is `Apple`, `1` is `Orange` and `2` is `Melon`.

`deleteCount` => delete count starts from where the `start` ends (`2`) which is `Melon`. This means the delete count is at `Melon` (`1`) and `Banana` (`2`).

See another example below:

```js
const fruits = [ "Apple", "Orange", "Melon", "Banana", "Avocado" ]

console.log( fruits.splice(2, 2, "Mango", "Grape") ); 
// [ "Melon", "Banana" ]
console.log(fruits); 
// [ "Apple", "Orange", "Mango", "Grape", "Avocado" ]
```

`elem1, ..., elemN` => `Melon` and `Banana` are replaced with `Mango` and `Grape`.

See another example below:

```js
const fruits = [ "Apple", "Orange", "Melon", "Banana", "Avocado" ]

console.log( fruits.splice(2, 0, "Cherry") ); // []
console.log(fruits); 
// [ "Apple", "Orange", "Cherry", "Melon", "Banana", "Avocado" ]
```

`deleteCount` => If the delete count is `0, < 0`, more items (`elem1, ..., elemN`) are added before where the `start` ends.

See another example below:

```js
const fruits = [ "Apple", "Orange", "Melon", "Banana", "Avocado" ]

console.log( fruits.splice(-2, 1, "Cherry") ); // [ "Banana" ]
console.log(fruits); 
// [ "Apple", "Orange", "Cherry", "Melon", "Cherry", "Avocado" ]
```

> Notice that `fruits` is destructive as it returns the new items in the array. The `splice` is a destructive method.

`-start` => negative `start` means the `start` counts from the last index (where `length - 1`). In the example above, `-1` is `Avocado`, `-2` is `Banana`. This means `Banana` is replaced with `Cherry`.

---
### *slice* Method
Below is the syntax:

```
array.slice(start, end)
```

`start` => `start` counts from index `0`
`end` => `end` counts from index `0` to `end - 1`
 
See the example below:

```js
const fruits = [ "Apple", "Orange", "Melon", "Banana", "Avocado" ]

console.log( fruits.slice(1, 3) ); // [ "Orange", "Melon" ]
console.log(fruits); 
// [ 'Apple', 'Orange', 'Melon', 'Banana', 'Avocado' ]
```

> Notice that `fruits` is non-destructive as it still returns the original items in the array. The `slice` is a destructive method.

`start` => index `0` is `Apple`, `1` is `Orange`.

`end` => index `0` is `Apple`, `1` is `Orange`, `2` is `Melon`, `3` is `Banana` but excluded

Since the `slice` method is a non-destructive method, we need to store the removed items in a new variable.

See the example below:

```js
const fruits = [ "Apple", "Orange", "Melon", "Banana", "Avocado" ]

const newFruits = fruits.slice(1, 3); 
console.log(newFruits); // [ "Orange", "Melon" ]
``` 

---
### *concat* method

Below is the syntax:

```
array.concat(arg1, arg2, ..., argN)
```

Arguments (` arg1, arg2, ..., argN`) can be added to an `array` when the `concat` method is used.

See the example below:

```js
const fruits = [ "Apple", "Orange", "Melon" ];

console.log( fruits.concat(Banana", "Avocado") );
// [ 'Apple', 'Orange', 'Melon', 'Banana', 'Advocado' ]
console.log(fruits); // [ 'Apple', 'Orange', 'Melon' ]
```

> Notice that `fruits` is non-destructive as it still returns the original items in the array. The `concat` is a non-destructive method.

Since the `concat` method is a non-destructive method, we need to store the added items in a new variable.

See the example below:

```js
const fruits = [ "Apple", "Orange", "Melon" ];
const newFruits = fruits.concat(Banana", "Avocado");

console.log(newFruits); 
// [ 'Apple', 'Orange', 'Melon', 'Banana', 'Avocado' ]
```

> The `shift` `unshift` `push` `pop` are all destructive methods.

Check the previous article to learn about the methods.

---
[![Buy me a Coffee](https://res.cloudinary.com/bizstak/image/upload/v1610317510/ko-fi-trans_fr3su4.png)](https://www.buymeacoffee.com/techstackmedia)

---