The Unusual of JavaScript Arrays and their length Property
Tags: javascript, codenewbie, webdev, tutorial
Published: 2021-03-01 00:13:33

<a href="https://www.whogohost.com/host/aff.php?aff=7390&page=hosting" target="_blank"><img src="https://www.whogohost.com/images/affiliates/728x90b.gif" /></a>

---
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", "Advocado" ]

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

`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", "Advocado" ]

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

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

See another example below:

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

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

`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", "Advocado" ]

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

> 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 `Advocado`, `-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", "Advocado" ]

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

> 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", "Advocado" ]

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", "Advocado") );
// [ '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", "Advocado");

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

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

Check the previous article to learn about the methods.

**Happy coding**

---

[![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614517560333/MdxvdcE-X.png)](https://www.buymeacoffee.com/techstackmedia)

---

[![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614517221619/rY3RLnJWC.png)](https://skillshare.eqcm.net/c/2680282/300216/4650)