# Let's explore JavaScript Array Methods

### Hello there, in this article I'm going to share JavaScript Array Methods.

Not only I will share the methods and usage, but you will find it very useful in practical usage as well. So let's explore them one by one. 

One last thing to say before we start exploring, I recently started Newsletter 📰, you can join the list to get an email notification 📧 when I Publish any Article. 

# 1) .length

Using this property, return the number of total elements stored in the array. 

## Example

```javascript
const vegetables = [
    "Carrots 🥕",
    "Potatoes 🥔",
    "Chilli 🌶"
];

console.log(vegetables.length); 
// returns 3
```

# 2) .push()

push method adds provided elements at the end of an Array. you can pass multiple parameters in push() method. let's see an example.

## Example 
```javascript
const vegetables = [
    "Carrots 🥕",
    "Potatoes 🥔",
    "Chilli 🌶"
];

vegetables.push("Broccoli 🥦")

console.log(vegetables);
// [ 'Carrots 🥕', 'Potatoes 🥔', 'Chilli 🌶', 'Broccoli 🥦' ]
```

see here, I pushed **Broccoli 🥦**, and it's added at the last index of array, this method will modify the original array and this method return number which is the new length of the array after pushing given elements.

# 3) .pop()

the pop method will remove the last element of an Array. Let's understand it by example.

## Example

```javascript
const vegetables = [
    "Carrots 🥕",
    "Potatoes 🥔",
    "Chilli 🌶"
];

let removedVegetable = vegetables.pop()

console.log(`${removedVegetable}  removed from Array.`);
console.log(vegetables);
// Chilli 🌶  removed from Array.
// [ 'Carrots 🥕', 'Potatoes 🥔' ]
```

see here, Chilli 🌶 is at the last index of an Array, so the pop method removed it, and it will modify the original Array. this method will return the removed item from an array.

# 4) .toString()

This method will return the String representation of an Array. let's see in the example.

## Example

```javascript
const fruits = [
    "Apple 🍎",
    "Orange 🍊",
    "Grapes 🍇",
    "Strawberry 🍓",
    "Cherry 🍒"
];

console.log(fruits.toString());
// Apple 🍎,Orange 🍊,Grapes 🍇,Strawberry 🍓,Cherry 🍒
```

# 5) .concat()
The contact method combines one or more than one array and returns the combined array, it doesn't modify the array, it returns the new array, in the below example, we've two arrays.

**Fruits** Array and then we've **Vegetables** Array, now I want both in the single array, so using the concat method we can combine them. and it will return a new array, see the output so you will get a better idea. 

I used `console.table()`, a different method to show results in the console, it will show the array in table form with index number so you can get a clear idea.

## Example
```javascript
const fruits = [
    "Apple 🍎",
    "Orange 🍊",
    "Grapes 🍇",
    "Strawberry 🍓",
    "Cherry 🍒",
    "Watermelon 🍉",
    "Lemon 🍋",
    "Pineapple 🍍",
    "Kiwi 🥝",
    "Mango 🥭"
];

const vegetables = [
    "Carrots 🥕",
    "Potatoes 🥔",
    "Chilli 🌶"
];

let vegetablesAndFruits = vegetables.concat(fruits)

console.table(vegetablesAndFruits);

/* Output:
┌─────────┬─────────────────┐
│ (index) │     Values      │
├─────────┼─────────────────┤
│    0    │  'Carrots 🥕'   │
│    1    │  'Potatoes 🥔'  │
│    2    │   'Chilli 🌶'   │
│    3    │   'Apple 🍎'    │
│    4    │   'Orange 🍊'   │
│    5    │   'Grapes 🍇'   │
│    6    │ 'Strawberry 🍓' │
│    7    │   'Cherry 🍒'   │
│    8    │ 'Watermelon 🍉' │
│    9    │   'Lemon 🍋'    │
│   10    │ 'Pineapple 🍍'  │
│   11    │    'Kiwi 🥝'    │
│   12    │   'Mango 🥭'    │
└─────────┴─────────────────┘
*/
```


# 6) copyWithin()

The syntax of this method is `copyWithin(target, start, end?)`. 

- `target`  where to paste the copied element.

- `start` from where to start copying

- `end` from where to end copying, this parameter is optional.

This method will copy and insert the element at the given target and modifies the original array.

## Example 
```javascript
const vegetables = [
    "Carrots 🥕",
    "Potatoes 🥔",
    "Chilli 🌶"
];

vegetables.copyWithin(0, 2)
console.log(vegetables);

// Output: [ 'Chilli 🌶', 'Potatoes 🥔', 'Chilli 🌶' ]
```

# 7) includes()
This method takes two parameters, one is `searchString` and another is `startIndex` which is optional. 
if the provided element is present in the array then it will return **True** else **false**

## Example
```javascript
const fruits = [
    "Apple 🍎",
    "Orange 🍊",
    "Grapes 🍇",
    "Mango 🥭"
];

let apple = fruits.includes("Apple 🍎");

console.log(apple);
// returns true
```

# 8) indexOf()

This method takes two parameters one is `searchString` and another is `startIndex` which is optional. 
if the provided element is present in the array then it will return the index of that element, and if the element is not present in the Array then it will return **-1**.

## Example

```javascript
const vegetables = [
    "Carrots 🥕",
    "Potatoes 🥔",
    "Chilli 🌶"
];

console.log(vegetables.indexOf("Chilli 🌶"));
// 2
```

# 9) lastIndexOf()
This function takes two parameters the required argument is `searchParam`. this function will return the index of the last occurred element. if the element is not present in the Array then -1 will be returned.

## Example

```javascript
let travelHistory = ["Italy", "India", "Egypt", "Indonesia", "India", "Egypt"];

console.log(travelHistory.lastIndexOf("Egypt")); // 5
console.log(travelHistory.lastIndexOf("India")); // 4
console.log(travelHistory.lastIndexOf("Indonesia")); // 3
console.log(travelHistory.lastIndexOf("UAE")); // -1
```

# 10) join()

The join method has one parameter `separator` which is optional, if not provided, the array elements are joined with a comma and return String. see the example below to understand it.

## Example

```javascript
const searchEngines = ["Google", "DuckDuckGo", "Yahoo"]

let searchEngineStr = searchEngines.join(" & ")
console.log(searchEngineStr);

// Output: Google & DuckDuckGo & Yahoo
```

here I provided '&' to join array elements.


# 11) find()
This method is very useful for finding elements from an array, if the condition is not satisfied then it will return undefined. see the example below.

## Example
```javascript
let users = ["abc", "xyz", "pqr", "iop", "mnb"];
let res1 = users.find(user => user === "pqr");
let res2 = users.find(user => user === "aaapqr");

console.log(res1); // pqr
console.log(res2); // undefined
```

# 12) findIndex()
This function takes callback fn as a parameter and it will run until the callback fn returns true, if it returns true the findIndex() will return the index of that element else it will return -1, see the example to understand it more.

## Example
```javascript
let users = ["abc", "xyz", "pqr", "iop", "mnb"];
let res1 = users.findIndex(user => user === "pqr");
let res2 = users.findIndex(user => user === "iii");

console.log(res1); // 2
console.log(res2); // -1
```

# 13) fill()
This method will replace array values with given static values in the fill function from start to end index if provided, else it will replace the entire array. see the example below.

## Example
```javascript
let score = ["o","o","o"];
score = score.fill("x");

console.log(score); 
// ['x','x','x']
```

# 14) filter()
This method as per the name filters out the Array, this will return a new array and removes the element where the condition from the callback function results in true. 
So for example, I removed one such element.

## Example
```javascript
let food = ["pizza", "sandwich", "burger", "water", "water", "noodles"];
let bill = food.filter(f => f !== "water")

console.log(bill); // [ 'pizza', 'sandwich', 'burger', 'noodles' ]
```

# 15) flat()

This function flattens the Array by given depth. see the example below.

## Example
```javascript
const arr = [
    0, 1, 2,
    [3, 4, 5],
    6, 7, 8
];

const narr = arr.flat()
console.log(narr);
```

# 16) forEach()
This function is used to iterate through the entire array. see the example below.

## Example
```javascript
const vegetables = [
    "Carrots 🥕",
    "Potatoes 🥔",
    "Chilli 🌶"
];

vegetables.forEach(vegetable => console.log(vegetable));
```

# 17) map()
This function is similar to forEach() but it will return the new modified array. See the example below.

## Example
```javascript
const vegetables = [
    "Carrots 🥕",
    "Potatoes 🥔",
    "Chilli 🌶"
];

let v = vegetables.map(vegetable => vegetable.toUpperCase())
console.log(v);
// [ 'CARROTS 🥕', 'POTATOES 🥔', 'CHILLI 🌶' ]
```

# 18) reverse()
This method will return a new reversed Array, see the Example below.

## Example
```javascript
const vegetables = [
    "Carrots 🥕",
    "Potatoes 🥔",
    "Chilli 🌶"
];

let v = vegetables.reverse()
console.log(v);
// [ 'Chilli 🌶', 'Potatoes 🥔', 'Carrots 🥕' ]
```

# 19) sort()
This method sorts the original Array.

## Example
```javascript
const vegetables = [
    "Carrots 🥕",
    "Potatoes 🥔",
    "Chilli 🌶"
];

vegetables.sort()
console.log(vegetables);
// [ 'Carrots 🥕', 'Chilli 🌶', 'Potatoes 🥔' ]
```

# 20) shift()

This method will remove the first element of the Array and returns the removed Item. if the array is empty then the returned value will be `undefined`.

## Example
```javascript
const vegetables = [
    "Carrots 🥕",
    "Potatoes 🥔",
    "Chilli 🌶"
];

let removedVal = vegetables.shift()
console.log(removedVal);
// Carrots 🥕
```

# 21) unshift()

This method inserts a new item at the Start of an Array and returns the new length. see the example below.

## Example
```javascript
const vegetables = [
    "Carrots 🥕",
    "Potatoes 🥔",
    "Chilli 🌶"
];

let newVal = vegetables.unshift("Corn 🌽");
console.log(vegetables);
// [ 'Corn 🌽', 'Carrots 🥕', 'Potatoes 🥔', 'Chilli 🌶' ]
```

# 22) slice()

This method will slice the Array by given start and end values. 
- `start` starting index to slice
- `end` it's the end index of the element

the function will only go to end index - 1 if provided. this function will not modify the original Array, this will return a sliced array.

see the example below.

## Example
```javascript
const fruits = [
    "Apple 🍎",
    "Orange 🍊",
    "Grapes 🍇",
    "Strawberry 🍓",
    "Cherry 🍒",
    "Watermelon 🍉",
    "Lemon 🍋",
    "Pineapple 🍍",
    "Kiwi 🥝",
    "Mango 🥭"
];

let newFruits = fruits.slice(4, 6)
console.log(newFruits);

// [ 'Cherry 🍒', 'Watermelon 🍉' ]
```

as you can see here I provided 6, so the function will slice it to index 4-5, resulting in two values to return.


# 23) splice()
This method will remove elements and inserts the given element. it takes the following parameters.

- `start` start index to start removing 
- `end` end index to end remove
- `values`: single value or multiple value to insert

this function will remove elements till the end-1 index. see the example below.

## Example
```javascript
const fruits = [
    "Apple 🍎",
    "Orange 🍊",
    "Grapes 🍇",
    "Strawberry 🍓",
    "Cherry 🍒",
    "Watermelon 🍉",
    "Lemon 🍋",
    "Pineapple 🍍",
    "Kiwi 🥝",
    "Mango 🥭"
];

fruits.splice(0, 3, "Coconut 🥥");
console.log(fruits);

/*
[
  'Coconut 🥥',
  'Strawberry 🍓',
  'Cherry 🍒',
  'Watermelon 🍉',
  'Lemon 🍋',
  'Pineapple 🍍',
  'Kiwi 🥝',
  'Mango 🥭'
]
*/
```

Oh 🥲, that's quite a long article, honestly, it took around 4-5 hours to prepare and write this article. if you enjoyed then do like and share, Thanks, see you in the next article. ✌️