# JavaScript Inbuilt Arrays Methods

# What is an array? 

Well, In programming it is just a collection of some similar or non-similar data. In Javascript, there is no restriction on array type. For example

```c++
int arr[] = { 10, 20, 30, 40};
```

the above array contains only numbers and is in the syntax of C++ language, as you can see the type `int` has been mentioned. 

```js
let arr = [ 'Cars', 4, true, ['this' ,'is' ,'subarray']]
```

However, In Javascript, we don't need the type declaration, which is a good or bad thing depending on the situation. The above example demonstrates the declaration of an array.
In Programming **arrays** play a vital role. Javascript has provided us with multiple functions to make our life easier in development. In this Article we will be discussing the various aspects of the array functions in Javascript.

## Declaration Using Constructor

We can declare array via above method called literal notation or constructor

```js
const numbers = [1,2,3,4,5]
```

Another method to declare the array using the constructor 

```js
const  numbers = new Array(1,2,3,4,5)
```

We can also declare array length like

```js
const numbers = new Array(5)
```


## Static Array Methods

### Array.from()
We can use static array methods to create a new arrays from some data we have. The syntax is `Array.from()`

Array from a String:
```js
const name = 'mango'
console.log(Array.from(name))
```

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

Array after performing some operation:
The Syntax is `Array.from(array, function)`

```js
const arr = [1,2,3]
console.log(Array.from(arr, x => x*x))
```

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


### Array.isArray()

This Array function checks if the given parameter is an array or not. It returns `true` if it is an array otherwise it returns `false`

```js
const arr = [1,2,3];
const name = 'mango';
console.log(Array.isArray(arr));
console.log(Array.isArray(name));
```

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


### Array.of()

The `Array.of()` method creates a new Array from the arguments given regardless of type.

```js
console.log(Array.of('travel'));
console.log(Array.of(1,2,3));
```

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1661598870207/BKHqU1tz5.png align="left")
## Instance properties

### Array.length

This is a widely used property that gives us the length of the array, `array.length`

```js
const numbers = [1,2,3,4,5,6,7,'q','w','4',3]
console.log(numbers.length);
```

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

## Instance Methods

### Array.at()

This method returns array item `at` a given `index`, It also accepts negative integers as arguments and counts back from the last element.
`Array.at()`, This is a fairly new method so it might not be available for you in your environment.

```js
const numbers = [1,2,3,4,5,6,7,'q','w','4',3]
console.log(numbers.at(5));
console.log(numbers.at(-8));
```

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

### Array.concat

This is a method which concatenates two different arrays into one array.
`array1.concat(array2)`

```js
const numbers = [1,2,3,4,5,6,7]
const numbers2 = ['q','w','4',3]
console.log(numbers.concat(numbers2))
```


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

### Array.copyWithin()

The `copyWithin()` method copies part of an array to another location in the same array and returns it without modifying its length. It can take 3 arguments but atleast one argument must be present

`array.copyWithin(target,start,end)`

```js
const numbers = [1,2,3,4,5,6,7,'q','w','4',3]
console.log(numbers.copyWithin(0,3,4))
console.log(numbers.copyWithin(0,3,7))
```

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1661598771593/r-c3GEauw.png align="left")

### Array.entries()

This method gives us the index/value of the array elements. We can 

```js
const num = ['a','b','c','d']
for(const [index,element] of num.entries()){
    console.log(index,element)
}
```
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1661598713481/qH6wDz86W.png align="left")

### Array.every()

This method checks if all the elements of the given array satisfies the condition. It returns true if all elements meet the condition otherwise false.
We have taken a simple even number example

```js
const isEven = (value) => value%2===0
const arr1 = [2,4,6,8]
const arr2 = [2,4,6,7]
console.log(arr1.every(isEven))
console.log(arr2.every(isEven))
```

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1661599244895/SWm56-pc2.png align="left")


### Array.fill()

This is a method used to change array elements to a static value, it modifies the original array. General syntax

`fill(value,startIndex,endIndex)`

Here start Index and end index are optional, without these all elements will be replaced by the value. Also just like the `.at()` method we can use negative integers to start from the end of Array

```js
console.log([1,2,3,5].fill(4));
console.log([1,2,3,5].fill(4,1))
console.log([1,2,3,5].fill(4,1,2))
console.log([1,2,3,5].fill(4,-3,-2))
console.log(Array(4).fill(4))
```

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

### Array.filter()

This returns new array containing all the elements of the calling array for which the filter condition is `true`. It takes a callback function to check the condition.

```js
const num = [1,2,3,4,5,6,7,8,9]
console.log(num.filter(ele => ele%2!==0))
```

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

### Array.find() and Array.findLast()

The `find()` method returns the first element in array which satisfies the given condition. If no values found it returns `undefined`

The `findLast()`  method returns the last element in array which satisfies the given condition instead of the first like in `find(). If no values found it also returns `undefined`
```js
//example contains only find() 
// findLast() also works same but returns last element.
const num = [1,2,3,4,5,6,7,8,9]
console.log(num.find(ele => ele>7))// check for number greater than 7
```
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1661600219237/TmW9LX_wm.png align="left")

###  Array.findIndex() and Array.findLastIndex()

The `findIndex()` method returns the index of the first element in the array which satisfies the given condition. If no elements are found, it returns -1.


The `findLastIndex()` method returns the index of the last element in the array which satisfies the given condition. If no elements are found, it returns -1.

```js
// example only contains of findIndex()
// findLastIndex() works the same but will return last element index.
const num = [1,2,3,4,5,8,6,7,9]
console.log(num.findIndex(ele => ele>7))//8 is at index 5
console.log(num.findIndex(ele => ele>10))// no element greater than 10
```
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1661600398480/8fQzuxHvZ.png align="left")


### Array.flat()

This method creates a new array with all the sub-array elements added in order into it recursively up to the specified depth

```js
const num = [1,2,3,4,[5,6,7],8,9]
console.log(num.flat())
const num2 = [1,2,3,4,[5,[[6]],7],8,9]
console.log(num2.flat(2))
```
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1661601395058/4pPyuQl41.png align="left")


### Array.flatMap()

This method returns a new array which is formed according to the condition given in the callback function to each element of the array, and then flattens the result by one level. 

```js
const num = [1,2,3,4,[5,6,7],8,9]
console.log(num.flatMap((ele) => ele*2))
console.log(num.flatMap((ele) => ele))
```

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

### Array.forEach()

This is a method for the array which works with each element and applies the function to each element.

```js
const num = [1,2,3,4]
num.forEach(ele => console.log(ele*ele))
```

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

### Array.includes()

This method checks for a certain value among the entries of the array and returns `true` if value is found else `false`

```js
const num = [1,2,3,4]
console.log(num.includes(4))
```
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1661602082756/oglLglnX6.png align="left")

### Array.indexOf() and Array.lastIndexOf()

These two method returns the  first and last index of the given element much like `Array.findIndex()` and `Array.findLastIndex()` method we saw earlier but unlike previous method, `indexOf()` allows us to decide which index to start the search from.

`array.indexOf(searchElement)`

`array.indexOf(searchElement, fromIndex)`

`array.lastIndexOf(searchElement)`

`array.lastIndexOf(searchElement, fromIndex)`


```js
const num = [1,2,3,4,5,6,7,8,9,5,6,4,4,5,4]
console.log(num.indexOf(4,5))
console.log(num.lastIndexOf(4,num.length-2))
```

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


As you can see we started from the `index 5` which holds the value `6` so we got the first `4` after `6` which was at the last index of `11`. And for the `lastIndexOf()` we got `num.length` which is `15` and we started with `13th` index and going reverse we got `4` at 12th index

### Array.join()

This is a method used to join elements of array with a specific separated which is optional. The `join()` method creates and returns a new String by concatenating all the elements in an array. By default the separator is commas. If array has only one item it will remain unaffected.

`arr.join()`
`arr.join('-')

```js

const name = ['m','a','n','g','o']
console.log(name.join())
console.log(name.join('-'))
console.log(name.join('_'))

```

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

### Array.map()

The `map()` method is another of the popular method people use. It creates new array and populates it with the results of calling the function on every element in the array

```js

const numbers = [1,2,3,4,5,6,7]
const squaredNum = numbers.map(ele => ele*ele)
console.log(squaredNum)
```

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

### Array.pop()

The `pop()` method removes the last element from an array and returns that element. This changes the original array's length

```js
const numbers = [1,2,3,4,5,6,7]
console.log(`The Length before pop() is : ${numbers.length}`)
const popped = numbers.pop()
console.log(`The removed element : ${popped}`)
console.log(`The Array after Change ${numbers}`)
console.log(`The Length after pop() is : ${numbers.length}`)
```

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

### Array.push()

The `push()` method adds one or more elements to end the array and returns the new length of the array

`array.push(element1, element2,...,elementN)`

```js
const numbers = [1,2,3,4,5]
console.log(`The Length before push() is : ${numbers.length}`)
numbers.push(6,7,8)
console.log(`The Array after Change ${numbers}`)
console.log(`The Length after push() is : ${numbers.length}`)

```
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1661604365232/clnf6QG-c.png align="left")


### Array.reduce()

The `reduce()` method executes a user-supplied "reducer" callback function on every element of the array. It works on each element step by step and in order. It does not change the original array

`reduce((previousValue, currentValue, currentIndex, array) => { /* … */ } )`

```js

const numbers = [1,2,3,4,5]
console.log(numbers.reduce((ele, sum) => sum + ele))

```

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

### Array.reverse()

The reverse() method reverse an array and returns the reference to same array, i.e it modifies the original array.

```js
const numbers = [1,2,3,4,5]
console.log(numbers)
numbers.reverse()
console.log(numbers)
```
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1661604837683/HF-8Rw1Bj.png align="left")

### Array.shift()

This method removes the first element from the array and returns that element.

```js
const numbers = [1,2,3,4,5,6,7]
console.log(`The Length before shift() is : ${numbers.length}`)
const shifted = numbers.shift()
console.log(`The removed element : ${shifted}`)
console.log(`The Array after Change ${numbers}`)
console.log(`The Length after shift() is : ${numbers.length}`)
```

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

### Array.unshift()

The `unshift()` method adds one or more elements to the beginning the array instead at the last like `push()` and like `push()` it also changes the length.

```js
const numbers = [1,2,3,4,5]
console.log(`The Length before unshift() is : ${numbers.length}`)
numbers.unshift(6,7,8)
console.log(`The Array after Change: ${numbers}`)
console.log(`The Length after unshift() is : ${numbers.length}`)
```
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1661605155963/Qf3_0S_bg.png align="left")


### Array.slice()

The `slice()` method returns a copy of the portion of an array into new array object selected from `start` to `end`, where `start` and `end` are index of the items of the array. This method does not modified the original array

`slice()`
`slice(start)`
`slcie(start,end)`

```js
const numbers = [1,2,3,4,5,6,7,8]
const sliced = numbers.slice(2,4)
console.log(numbers)
console.log(sliced)
```

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

### Array.some()

The `some()` method tests a condition just like `every()` method but instead of matching the condition to all elements like it did in `every()`, in `some()` we just check if some elements match the condition, if some elements match then we return `true` If no element matches we return `false`

```js

const isEven = (value) => value%2===0
const arr1 = [2,4,6,8]
const arr2 = [2,4,6,7]
const arr3 = [1,3,5,7]
console.log(arr1.some(isEven))
console.log(arr2.some(isEven))
console.log(arr3.some(isEven))

```

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

### Array.sort()

This method sorts the array like the name suggests, it can sort both numbers and alphabets. We can also given a sorting condition. The default sorting condition is ascending.

```js
const numbers = [1,2,6,7,8,34,5,21,5,2,1,0,12,45]
const alpha = ['r','t','v','f','a','b']
console.log(numbers.sort((a,b) => a-b))
console.log(alpha.sort())
```

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

### Array.splice()

This method is used to change chunks of array and resize the array while changing the original array completely. We can delete the items or change their value using splice. 

General Syntax

`splice(start, deleteCount, item1, item2, itemN)`


```js
const numbers = [1,2,3,4,5,6,7]
const numbers1 = [1,2,3,4,5,6,7]
numbers.splice(2,3)
numbers1.splice(2,2,'a','4')
console.log(numbers)
console.log(numbers1)
```

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