# Array methods in JavaScript !

## Method

**Methods** are built-in functions in the language in this case javascript that are used to ease out certain tasks.

## Array

**Arrays** are collections of multiple elements of different datatypes that are grouped inside the opening and closing square brackets \[\]. They come under Non-Primitive Datatypes meaning they can store a large number of data at the same time.

### Let's learn about different methods in Array.

**push():** This method adds an element at the end of the array.

*Example:*

```javascript
let arr1 = [1, 4, 9, 16, 25]
console.log('Before Push: ', arr1)
arr1.push(100) 
console.log('After Push: ', arr1)
```

*Output:*

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671302787032/SJS3V2vld.png align="left")

**pop():** This method removes an element from the end.

*Example:*

```javascript
let arr1 = [1, 4, 9, 16, 25]
console.log('Before Pop: ', arr1)
console.log('Pop: ', arr1.pop())  
console.log('After Pop: ', arr1)
```

*Output:*

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671302895840/sDj5158zF.png align="left")

**unshift ():** This method adds an element at the beginning of an array.

*Example:*

```javascript
let arr = [1, 2, 3, 4, 5]
console.log('Before Unshift: ', arr)
arr.unshift(7)
console.log('After Unshift: ', arr)
```

*Output:*

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671303168590/B3M_PdlzQ.png align="left")

**shift():** This method removes an element from the beginning of an array.

*Example:*

```javascript
let arr = [1, 2, 3, 4, 5]
console.log('Before Shift: ', arr)
arr.shift()
console.log('After Shift: ', arr)
```

*Output:*

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671303201332/BLGlGu_QB.png align="left")

**slice():** This method is used when you want to select elements from a certain point to a certain point. It takes two parameters starting index point and an ending index point. Note here the ending index point is not included.

*Example:*

```javascript
let fruits = ['apple', 'mango', 'orange', 'chiku', 'blueberry']
console.log('Fruits: ', fruits)
console.log('Sliced Fruits: ', fruits.slice(0, 3))
```

*Output:*

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671303306262/OGudircWk.png align="left")

**splice():** This method will replace/remove the element with the new element specified. It takes three parameters starting index point, the number of elements to be removed and the element.

*Example:*

```javascript
let games = ['football', 'cricket', 'badminton', 'volleyball', 'boxing', 'shotput']
console.log('Games: ', games)
games.splice(2, 2, 'swimming')
console.log('Spliced Games: ', games)
```

*Output:*

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671303407073/PhcndXZUJ.png align="left")

**concat():** It is a concatenation method used to concatenate the two arrays.

*Example:*

```javascript
let arr1 = [1, 2, 3, 4, 5]
let arr2 = [6, 7, 8, 9, 10]
let arr3 = [6, 7, 6, 7, 8]
console.log('Before Concat: ', arr1)
console.log('After Concat: ', arr1.concat(arr2))
```

*Output:*

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671303579834/wOSFwliFs.png align="left")

**fill():** This method fills the array elements with the new elements specified by replacing or removing the elements on that particular index. It takes 3 parameters element, starting index point and an ending index point which is excluded.

*Example:*

```javascript
let arr4 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log('Before Fill: ', arr4)
arr4.fill('onkar', 2, 4) 
console.log('After Fill: ', arr4)
```

*Output:*

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671303665589/fIAgRlpgd.png align="left")

**include():** This method is used to check if an element exists in the array and returns true if exists else returns false. It takes single and two parameters. A single parameter is used if you want to check elements in the entire array from start to end. Two parameters are used if you want to check an element from a certain point onwards, it includes parameters like search element and index number from which you want to begin the search.

*Example:*

```javascript
let numbers = [1, 2, 3, 4, 5, 6, 7, 8]
console.log('Numbers: ', numbers)
console.log('Include 7 from 6th index ?: ', numbers.includes(7,6)) 
console.log('Include 9 ?: ', numbers.includes(9)) 
```

*Output:*

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671303826759/GoHMYWOwR.png align="left")

**indexOf():** This method is used to check the index of an element. It returns the index number of an element if the element exists else returns -1.

*Example:*

```javascript
let numbers = [1, 2, 3, 4, 5, 3, 6, 7, 8]
console.log('Numbers: ', numbers)
console.log('Index of 4: ', numbers.indexOf(4))
console.log('Index of 9: ', numbers.indexOf(9))
console.log('Index of 3: ', numbers.indexOf(3))
```

*Output:*

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671303956279/Y923z5taW.png align="left")

**isArray():** This method checks if the variable is an array or not. It returns boolean values like true if it is an array else returns false.

*Example:*

```javascript
let number = 10
let numbers = [1, 2, 3, 4, 5, 3, 6, 7, 8]
let numbers2 = { 1: 1, 2: 2 }
console.log('isArray: ', Array.isArray(number))
console.log('isArray: ', Array.isArray(numbers))
console.log('isArray: ', Array.isArray(numbers2))
```

*Output:*

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671304025259/ZuH7aDAe2.png align="left")

**join():** This method is used to join an element next to every element in the array.

*Example:*

```javascript
let arr1 = [1, 2, 3, 4, 5]
let arr2 = [6, 7, 8, 9]
console.log('arr1 before join: ', arr1)
console.log('after join: ', arr1.join(' and '))
console.log('arr2 before join: ', arr2)
console.log('after join: ', arr2.join(1))
```

*Output:*

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671304160119/apploFFYd.png align="left")

**lastIndexOf():** This method returns the last index of a particular element in the array. If there are duplicate elements in the array it will return the last index of the duplicate element which is at the end of the array. It takes a parameter as an element name.

*Example:*

```javascript
let arr1 = [1, 2, 3, 4, 5, 3, 6, 7, 8, 'onkar']
console.log('Array : ', arr1)
console.log(`Last index of onkar : ${arr1.lastIndexOf('onkar')}`)
console.log(`Last index of 3 : ${arr1.lastIndexOf(3)}`)
```

*Output:*

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671304253432/H9zFNExbw.png align="left")

**reverse():** This method is used to reverse the order of an array.

*Example:*

```javascript
let arr = [1, 2, 3, 4, 5]
console.log('Before reverse array: ', arr)
console.log('After reverse array: ', arr.reverse())
```

*Output:*

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671304341094/wrb_bgxAX.png align="left")

**sort():** This method is used to sort the array in ascending order by default.

*Example:*

```javascript
let arr = [1, 2, 3, 8, 7, 6]
let arrNames = ['onkar', 'anurag', 'bibek', 'manali']
console.log('Before sort arr: ', arr)
console.log('After sort: ', arr.sort())
console.log('Before sort names: ', arrNames)
console.log('After sort: ', arrNames.sort())
```

*Output:*

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671304466383/tZmxtPBbP.png align="left")

**split():** This method is used to convert a non-array to an array. It takes a single parameter.

*Example:*

```javascript
let name = 'onkar'
console.log('Before split: ', name)
let arr1 = name.split('')
console.log('After split: ', arr1)
```

*Output:*

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671304624227/cQLeqV7i8.png align="left")

**map():** This method is used to iterate over every element in an array and perform operations accordingly in the below exam we are iterating over each element in the array and returning the square root of it.

*Example:*

```javascript
let arr1 = [1, 4, 9, 16, 25]
console.log('Array: ', arr1)
console.log('After Map: ', arr1.map(Math.sqrt))
```

*Output:*

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671304746701/ZPbNDlye5.png align="left")