# JavaScript Array and its Methods

# Why do we need an array in javaScript

Let’s consider the situation where we need to store 50 numbers or need to store the name of 50 students. If we use simple variable or data type concept then we need 50 variables to store the data. something like below.

```javascript
let num1;
let num2;
let num3;
.
.
let num50;
```

To handle such situations, almost all the programming languages provide a concept called **array**.

# Array

JavaScript array is a single variable or object that is used to store multiple values.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671295271149/NDeEc1b8w.png align="center")

## How to create array in javaScript

We can create array in javascript using square bracket ( <mark>[ ]</mark> )

**Syntax :-**

*data\_type arrayName = \[value1, value2, value3 ...\];*

**Example :-**

```javascript
let myArr = ["krishna","ray", 10, 5.6];
console.log(myArr)

o/p - ['krishna', 'ray', 10, 5.6]
```

## Characteristics of javaScript array

1.  It can hold values of mixed types. For example, you can have an array that stores elements with the types number, string, boolean, and null.
    
2.  The size of an array is dynamic and auto-growing. In other words, you don’t need to specify the array size.
    
3.  arrays are Zero-indexed means the first element of an array is at index `0`, the second is at index `1`, the third is at index 2 and so on — and the last element is at the value of the array's `length` property minus `1`.
    

## Accessing and modifying the array

You can access individual items in the array using bracket notation and supplying the item's index in that bracket.

Example :-

```javascript
let myArr = ["krishna","nand","ray",1000,9.0,true];
console.log(myArr[0]);
console.log(myArr[1]);
console.log(myArr[2]);
console.log(myArr[3]);

OUTPUT:- 
krishna
nand   
ray    
1000
```

**Modifying the array**

you can modify array using index number.

Example:-

```javascript
let myArr = ["krishna","nand","ray",1000,9.0,true];
myArr[0] = 1;
myArr[2] = "mukund";
console.log(myArr[0]);
console.log(myArr[2]);
console.log(myArr[3]);

OUTPUT:- 
1
mukund
ray    
1000
```

## How to find length of array

We can find length of array using built-in ***length*** property.

Example :-

```javascript
let myArr = ["krishna","nand","ray",1000,9.0,true];
console.log(myArr.length);

OUTPUT:-
6
```

# Methods in array

## concat()

The *concat( )* method is used to merge two arrays or more than two arrays. This method does not change the existing arrays. After concat it returns a new array.

Example:-

```javascript
let arr1 = ['krishna', 'ray', 'nand'];
let arr2 = [1, 2, 3];
let arr3 = arr1.concat(arr2);
console.log(arr3)

OUTPUT:- 
[ 'krishna', 'ray', 'nand', 1, 2, 3 ]
```

## indexOf()

The *indexOf()* method return the index of a given element, if multiple element is present then it return indexOf first element. if the given element is not present in array then it return -1.

Syntax :-

`Array.indexOf(search_Element)`

Example :-

```javascript
let myArr = [10,20,20,30,40,50,"krishna","krishna"]
console.log(myArr.indexOf(40));
console.log(myArr.indexOf(20));
console.log(myArr.indexOf("krish"));

OUTPUT:- 
4 
1   // returns the first occurance of element(20)_
-1 //here element is not present so it retuirn -1
```

We can also provide index/position from where we want to search/check for index

Syntax:-

`Array.indexOf(searchElement, fromIndex)`

## lastIndexOf()

The *lastIndexOf()* method returns the last index of the given element. If the element is not present in array then it return -1.

*If we pass -(negative) index then it count/search from last index i.e array.length-1.*

Syntax:-

*lastIndexOf(array\_eleemt)*

*lastIndexOf(array\_eleemt, fromIndex)*

***fromIndex :- it start searching from backwards direction from the fromIndex.***

Example: -

```javascript
let numbers = [10,50,90,20,20,30,100];
console.log(numbers.lastIndexOf(20));
console.log(numbers.lastIndexOf(90));
console.log(numbers.lastIndexOf(30,2));
console.log(numbers.lastIndexOf(10,-1));
console.log(numbers.lastIndexOf(5));

OUTPUT:-
4 
2 
-1 ///here -1 ibeacuse 30 in not found in backward direction from index 2
0  //here search start from last
-1
```

## push()

The *push()* method is used adds one or more elements in the given array. it add elements at the end the array , after add it rerun a new length array.

Syntax: -

`Array.push(ele1);`

`Array.push(ele1,ele2,eel3,.....);`

Example:-

```javascript
let list_of_eleemnt = [10,50,90,100];
 console.log("original array:- ", list_of_eleemnt)
 list_of_eleemnt.push(60)
 list_of_eleemnt.push("krishna")
 list_of_eleemnt.push('a')
 list_of_eleemnt.push(10.10)
 console.log("After push operation new array is :- ")
 console.log(list_of_eleemnt)

OUTPUT:- 

original array:-  [ 10, 50, 90, 100 ]

After push operation new array is :- 
[ 10, 50, 90, 100, 60, 'krishna', 'a', 10.1 ]
```

## pop()

The *pop()* method removes the **last** element from an array and returns that element. This method changes(reduce) the length of the array.

Syntax:-

`Array.pop()`

Example:-

```javascript
let arr = [ 10, 50, 90, 100, 60, 'krishna', 'a', 10.1 ];
arr.pop();
console.log(arr)

let poped_element = arr.pop()
console.log(poped_element);

OUTPUT:-
[ 10, 50, 90, 100, 60, 'krishna', 'a' ]
a
```

## reverse()

The *reverse() method is used to reverse the elemnt of an array.*

Syntax:-

`array.reverse()`

Example:-

```javascript
let arr1 = [1,2,3,4,5];
console.log(arr1.reverse());

let arr2 = ["Krishna","is","Name","My"];
console.log(arr2.reverse());

OUTPUT:- 
[ 5, 4, 3, 2, 1 ]
[ 'My', 'Name', 'is', 'Krishna' ]
```

## shift()

The *shift()* method removes the **first** element from an array(at the zeroth index) and shifts the values at consecutive indexes down.It also returns that removed element. This method changes the length of the array.

Syntax:- `Array.shift()`

Example:-

```javascript
let arr1 = [1,2,3,4,5];
arr1.shift();
console.log(arr1); 

OUTPUT:- 
[ 2, 3, 4, 5 ] // HERE 1 is removed from array

let shifted_ele = arr1.shift();
console.log(shifted_ele);
console.log(arr1); 

OUTPUT:- 
2   //this is the removed element from the last array
[ 3, 4, 5 ]    // this is remaining array after 3 shift operation

```

## unshift()

The *unshift()* method adds one or more elements at the beginning of an array, After adding elements it returns the new length of the array.

Syntax:- `array.unshift(ele1) , array.unshift(ele1,ele2,ele3.....)`

Example:-

```javascript
let myArr = [2,3,4,5];
myArr.unshift(1);
console.log(myArr);

OUTPUT:- 
[ 1, 2, 3, 4, 5 ]

let myArr2 = ["is","krishna"];
myArr2.unshift("my","name");
console.log(myArr2);

OUTPUT:- 
[ 'my', 'name', 'is', 'krishna' ]
```

## sort()

The *sort()* method is used to sorts the elements of an array element, by default it the elements in ascending order.

Syntax:- `sort()`

Example:-

```javascript
let myArr = [5,4,3,2,1];
console.log(myArr.sort())
OUTPUT:- 
[ 1, 2, 3, 4, 5 ]

let list  = ["dog","cat","ball","apple"];
list.sort();
console.log(list);
   OUTPUT:- 
[ 'apple', 'ball', 'cat', 'dog' ]
```

## splice()

The *splice()* method is used to changes the contents of an array by removing or replacing existing elements and adding new elements. it also return the removed element.

Syntax:-

```javascript
array.splice(start _index)

array.splice(start_index, deleteCount)

array.splice(start_index, deleteCount, elemets-to-be-added)

array.splice(start_index, deleteCount, elemet1,element2,element3.....)
```

Example:-

**Remove 0 element brefoe index 2**

```javascript
const months = ['Jan', 'March', 'April','august'];
let removed = months.splice(2,0) // it does not remove anything from aray
console.log(months);
console.log(removed);

OUTPUT:
[ 'Jan', 'March', 'April', 'august' ] 
[]
```

**Remove 0 element brefoe index 2 and insert one element**

```javascript
const months = ['Jan', 'March', 'April','august'];
let removed = months.splice(2,0,'may');  
console.log(months);
console.log(removed);

OUTPUT:- 
[ 'Jan', 'March', 'may', 'April', 'august' ] // may is added in array after 2
[] // nothing removed
```

**Remove 1 elemet at index** 1

```javascript
const months = ['Jan', 'March', 'April','august'];
let removed = months.splice(1,1);  
console.log(months);
console.log(removed);

OUTPUT:- 
[ 'Jan', 'April', 'august' ] // march is removed from index 1
[ 'March' ] /// removed element
```

**Remove 2 elements from index 1 and insert 2 element**

```javascript
const months = ['Jan', 'March', 'April','august'];
let removed = months.splice(1,2,'june','july');  
console.log(months);
console.log(removed);

OUTPUT:-
[ 'Jan', 'june', 'july', 'august' ] //two element removed and added
[ 'March', 'April' ] // removed element
```

**Remove all element from index 1**

```javascript
const months = ['Jan', 'March', 'April','august'];
let removed = months.splice(1);  
console.log(months);
console.log(removed);

OUTPUT:- 
[ 'Jan' ] //All elements removed accest one lement(0th element)
[ 'March', 'April', 'august' ] // removed element
```

## slice()

The *slice()* method returns a particular portion of an array(means a shallow copy of array). It return a new array from ***start*** to ***end*** (end is excluded).

Syntax:-

```javascript
slice() //it return whole array
slice(start_index)// it return array from give index
slice(start_index, end_index) // it return element between given index(end index is not included)
```

Example:-

```javascript
let ar =[1,2,3,4,5,6];
console.log(ar.slice())
console.log(ar.slice(2))
console.log(ar.slice(1,4))

OUTPUT:- 
[ 1, 2, 3, 4, 5, 6 ] //Whole array
[ 3, 4, 5, 6 ] // array from index two
[ 2, 3, 4 ]   //array between index 1 and 4
```

## map()

The *map()* method is used to create new array on the basis some given syntax or formula, from the existing array. it does not change the original array.

*   creates a new array from calling a function for every array element.
    
*   calls a function once for each element in an array.
    
*   does not execute the function for empty elements.
    

Syntax:- `array.map()`

Example:-

```javascript
let nums = [4, 9, 16, 25];
let newArr = nums.map(Math.sqrt)
console.log(newArr)
OUTPUT:- 
[ 2, 3, 4, 5 ]

let numbers = [6, 4, 1, 4];
let newArr = numbers.map(myFunction)
function myFunction(num) {
  return num * 10;
}
console.log(newArr)

OUTPUT:- 
[ 60, 40, 10, 40 ]
```

## filter()

The *filter()* method is used to create a new array from a given array consisting of only those elements from the given array which satisfy a condition set by the argument method.

*   It calls a provided `callbackFn` function once for each element in an array.
    
*   method does not execute the function for empty elements.
    
*   method does not change the original array.
    

Syntax:- `array.filter(callback(element, index, arr))`

Example:-

```javascript
let ages = [20, 25, 16, 39,44,14];
let valid_age = ages.filter(checkForAdult);

function checkForAdult(age) {
  return age >= 18;
}
console.log(valid_age)

OUTPUT:- 
[ 20, 25, 39, 44 ]
```

## fill()

The fill() method is used to fill the elemnets inside an array. it return modified array.

Syntax:-

```javascript
fill(value)
fill(value, start_index)
fill(value, start_index, end_index)
```

Example:-

```javascript
let myArr = [10,20,30,40,50];
myArr.fill(0);// it fill entire array with 0
console.log(myArr);

OUTPUT:- 
[ 0, 0, 0, 0, 0 ]

let arr2 = [10,20,30,40,50];
arr2.fill(10,2) // it fill 10 in entire array from index 2
console.log(arr2)

OUTPUT:-
[ 10, 20, 10, 10, 10 ]

let arr2 = [10,20,30,40,50];
arr2.fill(0,1,4) // it fill 0 between index 1 to 4
console.log(arr2)

OUTPUT:- 
[ 10, 0, 0, 0, 50 ]
```

## includes()

The *includes()* method determines whether that particular element is present in array or not. After checking it return `true` or `false` value.

```javascript
let array1 = [1, 2, 3];
console.log(array1.includes(2));
OUTPUT:-
true
const pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat'));
OUTPUT:- 
true
console.log(pets.includes('at'));
OUTPUT:- 
false
```

## join()

The *join()* method creates and returns a new string by concatenating all of the elements in an array , separated by a specified separator string.

Syntax:-

```javascript
join()
join(separator)
```

Example:-

```javascript
let elements = ['apple', 'bal', 'cat'];

console.log(elements.join());
console.log(elements.join(''));
console.log(elements.join('-'));

OUTPUT:- 
apple,bal,cat
applebalcat  
apple-bal-cat
```

## forEach()

The *forEach(*) method is used to execute some given function once for each array element.

Syntax:-

```javascript
array.forEach(function() {
    // code
});
```

Example:-

```javascript
let arr= ["apple", "bal", "cat","dog"];
let copyItems = [];

                      // before for each loop 
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i])
}
OUTPUT:- 
apple
bal
cat
dog

                          // after for each loop 
arr.forEach((item) => {
  console.log(item)
});

OUTPUT:- 
apple
bal
cat
dog
```