# Array and Array Methods In JavaScript

# **What is Array?**

The array is a variable that stores the collection of similar or dis-similar elements. It is used when we want to store a list of elements and access them by a single variable. In most languages where the array is a reference to the multiple variables, in JavaScript, an array is a single variable that stores multiple elements.

## **Declaration of an Array**

There are basically two ways to declare an array. Syntax is

```xml
let arrayName = [element_1, element_2 ..., element_n]; // method 1
let arrayName = new Array(element_1, element_2, ..., element_n); // method 2
```

Generally, method 1 is mostly used and we are going to use method 1 in this article.

## Initialization of an Array

```xml
let fruits = ["Mango","Apple","Orange","Banana"];
```

## Accessing Array Elements

If you want to access the array element, you need to use the index number of that element. For example, if I want to access the `"Orange"` from array `fruits` i need the index number of `"Orange"` which is 2.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671284969497/dv0JoYvCF.png?auto=compress,format&format=webp align="left")

```xml
let fruits = ["Mango","Apple","Orange","Banana"];
console.log(fruits[2]);
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671285473987/HLEcE9krl.png?auto=compress,format&format=webp align="left")

# Different Array Methods in JavaScript

There are lots of array methods in javascript, we are going to see all of them. All these methods have their functionality. So let's begin-

## Array.push()

The `push()` method is used to add one or more elements to the end of an array and returns the new length of the array.

```xml
let fruits = ["Mango", "Apple", "Orange", "Banana"];
console.log(fruits.push("Pineapple","Watermelon"));
console.log(fruits);
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671286634121/Mydf-HiJe.png?auto=compress,format&format=webp align="left")

## Array.pop()

We can remove an element from an array with the help of `pop()` method. It removes the last element from an array and returns that element. This method changes the length of the array.

```xml
let fruits = ["Mango", "Apple", "Orange", "Banana"];
console.log(fruits.pop());
console.log(fruits);
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671287048149/IR70ZDLZf.png?auto=compress,format&format=webp align="left")

## Array.shift()

The `shift()` method is very similar to the pop() method except it removes the first element of the array instead of the final element. It returns that removed element and this method changes the length of the array.

```xml
let fruits = ["Mango", "Apple", "Orange", "Banana"];
console.log(fruits.shift());
console.log(fruits);
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671287370881/Z7A_SGXFk.png?auto=compress,format&format=webp align="left")

## Array.unshift()

The `unshift()` method is similar to the push() array method while push() adds one or more elements to the end of the Array, the `unshift()` method adds at the beginning of the array and returns the new length of an array.

```xml
let fruits = ["Mango", "Apple", "Orange", "Banana"];
console.log(fruits.unshift("Kiwi","Watermelon"));
console.log(fruits);
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671288028824/JG0wJYDd8.png?auto=compress,format&format=webp align="left")

## Array.indexOf()

The `indexOf()` method returns the first index at which a given element can be found in the array, or `-1` if it is not present in the array.

```xml
let fruits = ["Mango", "Apple", "Orange", "Banana"];
console.log(fruits.indexOf("Orange")); // present at index 2
console.log(fruits.indexOf("Kiwi"));  // not present
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671288368929/myFsafpHF.png?auto=compress,format&format=webp align="left")

## Array.lastIndexOf()

The `lastIndexOf()` method returns the last index at which a given element can be found in the array, or -1 if it is not present.

```xml
let fruits = ["Mango", "Apple", "Banana","Mango","Watermelon", "Grapes"];
console.log(fruits.lastIndexOf("Mango"));
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671295944587/vEOJlRDnE.png?auto=compress,format&format=webp align="left")

## Array.includes()

This method is used to check whether the array contains the specified element or not. It gives true if the element is present in the array otherwise it gives false if the element is not present in the array.

```xml
let fruits = ["Mango", "Apple", "Orange", "Banana"];
console.log(fruits.includes("Orange")); // present in array
console.log(fruits.includes("Kiwi")); // not present in array
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671288953970/deGMwjSlS.png?auto=compress,format&format=webp align="left")

## Array.concat()

The `concat()` method is used to merge two or more arrays. This method does not change the existing arrays but instead returns a new array.

```xml
let fruits = ["Mango", "Apple", "Orange", "Banana"];
let veggies = ["Tomato","Onion","Carrot"]
let iceCream = ['Chocolate','Vanilla']

let combo = fruits.concat(veggies,iceCream);

console.log(combo);
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671289462012/qOHokSuwo.png?auto=compress,format&format=webp align="left")

## Array.slice()

The `slice()` method selects the specified number of elements without affecting the original array elements.

```xml
let fruits = ["Mango", "Apple", "Orange", "Banana","Pineapple"];

console.log(fruits.slice()); // All elements included
console.log(fruits.slice(2)); // All elements included from index 2
console.log(fruits.slice(1,3)); // All elements included from index 1 to 3(3 not included)

console.log(fruits);
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671290191177/uyLFRI8PW.png?auto=compress,format&format=webp align="left")

## Array.splice()

The `splice()` method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

```xml
let fruits = ["Mango","Apple"];
console.log(fruits.splice(1,0,"Kiwi","Watermelon")); // inserting "KiWi", "Watermelon" from index 1 without removing(0) any elements
console.log("Updated Fruits : ", fruits);

fruits = ["Mango", "Apple","Banana"];
console.log(fruits.splice(1,1,"Cherry")); // replacing index 1 element "Apple" to "Cherry"
console.log("Updated Fruits : ", fruits);

fruits = ["Mango", "Apple", "Banana","Watermelon","Grapes"];
console.log(fruits.splice(1,3));    // removing 3 elements from index 1
console.log("Updated Fruits : ", fruits);
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671292535136/hfjxU9BdX.png?auto=compress,format&format=webp align="left")

## Array.sort()

The sort() method is used to arrange the array elements in some order. By default, sort() method follows the ascending order.

```xml
let fruits = ["Mango", "Apple", "Banana", "Watermelon", "Grapes"];
let nums = [2,1,3,5,4,6];


console.log("Fruits :",fruits.sort());
console.log("Nums :",nums.sort());
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671293147891/sBJu09-IX.png?auto=compress,format&format=webp align="left")

## Array.reverse()

The reverse() method changes the sequence of elements of the given array and returns the reverse sequence. This method also made the changes in the original array.

```xml
let fruits = ["Mango", "Apple", "Banana", "Watermelon", "Grapes"];
let nums = [2,1,3,5,4,6];

console.log("Fruits :",fruits.reverse());
console.log("Nums :",nums.reverse());
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671293406437/mNZqLNu2L.png?auto=compress,format&format=webp align="left")

## [Array.map](http://Array.map)()

The JavaScript array map() method calls the specified function for every array element and returns the new array. This method doesn't change the original array.

```xml
let nums = [1,4,9,16,25,36,49,64,81,100];

let sqrtOfNums = nums.map(Math.sqrt);

console.log("Nums :",sqrtOfNums);
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671294240100/-tNBe5N7j.png?auto=compress,format&format=webp align="left")

## Array.fill()

The `fill()` method changes all elements in an array to a static value, from a start index (default 0) to an end index (default array.length). It returns the modified array.

```xml
let nums = [1,2,3,4,5,6];
console.log(nums.fill(1));  // fill 1 in place of all element place

nums = [1, 2, 3, 4, 5, 6];
console.log(nums.fill("React",2))   // filling "React" from index 2 to end

nums = [1, 2, 3, 4, 5, 6];
console.log(nums.fill("JS",1,4));   // filling "JS" from index 1 to 4(excluding 4)
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671296793459/XzTsG_wiz.png?auto=compress,format&format=webp align="left")

## Array.split()

The `split()` method takes a pattern and divides a String into an ordered list of substrings by searching for the pattern, puts these substrings into an array, and returns the array.

```xml
let quote = "It always seems impossible until it's done";

console.log(quote.split(" "));
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671297831155/L6k-86f-4.png?auto=compress,format&format=webp align="left")

## Array.join()

The JavaScript Array join() Method is used to join the elements of an array into a string. The elements of the string will be separated by a specified separator and its default value is a comma(,). It doesn't change the original array.

```xml
let nums = [1,2,3,4,5];

console.log(nums.join());    // joining the elements with default comma(,)
console.log(nums.join("And"));  // joining the elements with "And"

console.log(nums);
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671298357056/oZj-m5qWP.png?auto=compress,format&format=webp align="left")

## for of Method

For of method simply iterate over the array one by one, that's all.

**Example:**

```xml
// for of Method
let upperName = ["atul", "singh"];
let pus = [];
for (const iterator of upperName) {
  pus.push(iterator.toUpperCase());
}
console.log(pus); //[ 'ATUL', 'SINGH' ]
```

## Break and continue

Break simply means to get out of the flow.

**Example:**

```xml

for (let i = 0; i < 10; i++) {
   if (i == 3) {
     // console.log(i);
     break; // simply break  out of the block
   }
   console.log(i);
  }
```

## **continue**

Simply continue means to skip at that point where will check the condition and continue to looping.

**Example:**

```xml

for (let i = 0; i < 6; i++) {
  if (i == 3) {
    // console.log(i);
    continue; // skip
  }
  console.log(i);
}
```

### isArray Method `arrayName.isArray( )`

### Is the array method checking whether the inside pass value is an array or not, in the output it gives the boolean value(true or false)?

**isArray() Syntax**

The syntax of the isArray() method is: `Array.isArray(array variable name)`

**Example:**

```xml

// isArray() Method 
let num = [1, 2, 3, 4]; console.log(Array.isArray(num)); // true 
// passing an simple variable 
let num1 = 2; console.log(Array.isArray(num1)); // false 
// passing an empty array 
console.log(Array.isArray([])); // true

// we created an array with element 5 and passed that value to isArray() 
console.log(Array.isArray(new Array(5))); // true 
//passing undefined value to isArray() 
console.log(Array.isArray(undefined)); // false
```