All the JS Array methods you need to know
Tags: javascript, webdev, beginners, tutorial
Published: 2022-10-09 15:22:24

### A method can be referred to as a shortcut for achieving results that you would otherwise have to write extensive code for.

#### Arrays have a set of methods as well which can manipulate the array or the data inside it to cater to your needs.

---

#### Below are the methods this article covers:

- [Array Length](#Array-Length)
- [Changing Elements in the Array](#Changing-Elements-in-the-Array)
- [Merging Arrays](#Merging-Arrays)
- [Array to String Conversion](#Array-to-String-Conversion)
- [Popping out & pushing in values](#Popping-out-&-pushing-in-values)
- [Shifting & Unshifting](#Shifting-&-Unshifting)
- [Splice & Slice](#Splice-&-Slice)

###Array Length
This method returns the length of an array.

```
const pets = ["cat", "hamster", "dog", "rabbit"];
print(pets.length); // 4
console.log(pets[pets.length]); // rabbit
```
the array.length can be also used to get the last element in the array
###Changing Elements in the Array
Index number of an array can be used to address an element in the array and can be used to change elements as well.

```
const cats = ["molly", "polly", "kolly", "jolly"];
cats[0] = "perry";
console.log(cats); // ["perry", "polly", "kolly", "jolly"]
```

###Merging Arrays
The concat() method creates a new array by merging other arrays.

```
const list_1 = ["one", "two"];
const list_2 = ["three", "four", "five"];

const lists = list_1.concat(list_2);
console.log(lists); // ["one", "two", "three", "four", "five"]
```
###Array to String Conversion
If you want to convert an array to string, there are two methods that can achieve this:

```
const numbers = [1,2,3,4,5];
console.log(numbers.toString()); // 1,2,3,4,5
console.log(numbers.join()); // 1,2,3,4,5
```
The array.join() method can modify the separator as well, such as: if you want the separator to be something else instead of ",", you can pass that symbol as the argument.

```
const numbers = [1,2,3,4,5];
console.log(numbers.join("-")); // 1-2-3-4-5
```
###Popping out & pushing in values
If you wish to add new elements to the end of the array or remove the last element of the array - using the push and pop methods are the most useful.
To push an element to the end of an array:

```
const list = [1,2,3,4];
list.push(5); // here 5 is the value
```
You should also know that `array.push(value)` also returns the length of the newly updated array, so you can store it in a variable if you wish to use it later.

If you wish to remove the last element from an array:
```
const list = [1,2,3,4];
list.pop(); // 4 removed from the array
```
You should also know that `array.pop()` also returns the element that has been removed, you can store it in a variable if you wish to use it later.
###Shifting & Unshifting
Shifting and Unshifting is similar push and pop but mirrored out. 

```
const list = [1,2,3,4];
list.shift(); // [2,3,4]
```
You should know that `array.shift()` also returns the element that has been removed, you can store it in a variable if you wish to use it later.

```
const list = [1,2,3,4];
list.unshift(0); // [0,1,2,3,4] 
```
You should know that `array.unshift()` also returns the updated array length, you can store it in a variable if you wish to use it later.

###Splice & Slice
####_Splice_
Splice is one of the methods of array which can be used to add, remove, replace elements. 

```
const list = [1,2,3,4];
list.splice(x, y, value_1, value_2,....,..);
```
**x** defines the position where new elements should be added
**y** defines how many elements should be removed - to remove an element using `array.splice(index of element to remove, number of elements to remove)`

####_Slice_

Slice creates a new array with the elements from an existing array starting from a target index

```
const list = [1,2,3,4];
const newList = list.slice(2);
console.log(newList); // [3,4]
```
###That brings us to the end of the few methods most commonly used in JavaScript