JavaScript Tutorial Series: Array Methods
Published: 2023-02-15 19:09:31

In a previous lesson we've talked about arrays. [JavaScript Tutorial Series: Array](https://dev.to/fullstackjo/javascript-tutorial-series-arrays-4d1b). If you need a refresher go and check that article out. 

## toString and join methods
The `toString()` and `join()` methods convert an array into a string. 

```JavaScript
let numbers = ["one", "two", "three"];
console.log(numbers.toString());
//"one,two,three"
```
```JavaScript
let numbers = ["four", "five", "six"];
console.log(numbers.join("-"));
//"four-five-six"
```
As you can see `numbers.toString()` and `numbers.join()` return a string of comma separated values. while `join()` is similar to `toString()`, `join()` accepts an argument which specifies a separator as seen in the example above.

##  Adding and removing elements from arrays
When working with arrays we can add new elements to an array and remove elements from it.

### pop and push methods
The method `pop()` removes the last element of the array and the `push()` method adds an element at the end of the array. 

```JavaScript
let languages = ["javascript", "python", "java"];
languages.pop();

console.log(languages); //["javascript","python"]

languages.push("php");

console.log(languages); //["javascript","python","php"]
```

`push()` takes one or more values as arguments which is then pushed to the end of the array.

```JavaScript
let languages = ["javascript", "python", "java"];
languages.push("php","java", "C#");
console.log(languages);
//["javascript","python","php","java","C#"]
```
### shift and unshift methods
`shift()` and `unshift()` are similar to `pop()` and `push()` the only difference is that `shift()` removes the first element in an array and `unshift()` adds elements to the beginning of an array.

```JavaScript
let languages = ["java","javascript", "python"];
languages.shift();

console.log(languages); //["javascript","python"]
languages.unshift("php","java", "C#");

console.log(languages);//["php","java","C#","javascript","python"]

```
You can use the `delete` operator to delete array elements, it is not recommended because this leaves blank spaces of type `undefined` in the array. This is not considered best practice. Here's an example.

```JavaScript
let languages = ["php","javascript", "python"];
delete languages[0];
console.log(languages); //[ ,"javascript","python"]
console.log(languages[0]); //undefined
```

## Length and concat methods 
We've previously seen these methods in the [JavaScript Tutorial Series: String methods](https://dev.to/fullstackjo/javascript-tutorial-series-string-methods-2o3f). these methods works the same with arrays, meaning `length` returns the length of an array and `concat()` returns a new array after concatenating arrays. 

```JavaScript
let languages = ["php","javascript", "python"];

console.log(languages.length);//3
```

```JavaScript
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = arr1.concat(arr2);
console.log(arr3);
//[1,2,3,4,5,6]
```
## Splice and Slice methods
The `splice()` method can be used to add a new element to an array and it takes 3 or more arguments.

- The first argument is the position we'd like to add an element.

- The second argument is how many element should be removed.

- The third argument is the element we'd like to add


```JavaScript
let animals =["penguin", "duck"];
animals.splice(1,0, "dog", "cat");
console.log(animals);
//["penguin","dog","cat","duck"]
```
The `splice()` method can also remove array elements without leaving blank spaces in the array.

```JavaScript
let animals =["penguin", "duck"];
animals.splice(0, 1);
console.log(animals); // ["duck"]
```
In the example above, we're removing 1 item which is at position 0.

The `slice()` method removes elements from an array and can take 2 arguments. This method returns a new array and leaves the new array untouched.

- The first argument is the starting position (inclusive)

- The second argument is the ending position (not inclusive)

```JavaScript
let animals =["penguin", "duck", "cat", "dog"];
let newAnimals = animals.slice(1, 3);
console.log(newAnimals); //["duck", "cat"]
```
If the second argument is omitted this method will splice out the element from the starting position until the end.

```JavaScript
let animals =["penguin", "duck", "cat", "dog"];
let newAnimals = animals.slice(1);
console.log(newAnimals); //["duck","cat","dog"]
```