# Array and its methods

# What is Array?

Arrays can be a collection of elements of any type i.e. you can create an array with elements of type string, Boolean, Number, Objects, and even other arrays. The array is represented by a pair of `square brackets [].` All the elements in the array are separated with commas `,`

```jsx
let array = [07, true, 'Architwrites', {}]
```

The position of an element in the array is known as its `index` and the array index starts with `0`, and it increases by one with each element. The element of `07` is at `index 0`, `true` is at `index 1`, and so on.

There are some array methods in JavaScript

<img src="https://media.giphy.com/media/9AaNbSShRHQQfosEOm/giphy.gif" alt="giph">

## Array methods

### 1\. Array Properties

*   **Length property:**  
    It determines the size of an array.
    

```jsx
let array = ['Archit', 07, false] ;
console.log(array.length); // 2
```

### 2\. Adding / removing elements

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

```jsx
let array = ['Archit', 07, false] ;
array.push('Age');
console.log(array); // ['Archit', 07, false, 'Age']
```

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

```jsx
let array = ['Archit', 07, false] ;
array.unshift('Age');
console.log(array); // [ 'Age', 'Archit', 07, false] \\ 'Age' added in the beginning
```

*   **pop():**  
    The `pop()` method removes an element from the end of the array. Then it returns the removed element and changes the original array.
    

```jsx
let array = ['Archit', 07, false, 'Age] ;
array.pop('Age');
console.log(array); // [ 'Archit', 07, false] \\ 'Age' removed from the array
```

*   **shift():**  
    The `shift()` method removes an element from the beginning of an array. Just like the `pop()` method, `shift()` returns the removed element and changes the original array.
    

```jsx
let array = ['Archit', 07, false, 'Age'] ;
array.shift();
console.log(array); // [07, false, 'Age'] \\ 'Archit' removed from the array
```

*   **splice():**  
    The `splice()` method helps you add, update, and remove elements in an array. The main purpose of the splice() method is to delete elements from an array. It returns an array of the elements deleted and modifies the original array. But you can add and replace elements using it as well. To add an element we need to pass the position where we want to add, how many elements to delete starting with the position, and the element to add.
    

```jsx
let array = ['Archit', 07, false, Age] ;
array.splice(1, 1, 'Male');
console.log(array); // ['Archit', Male, false, Age] \\ '07' removed & Add new element 'Male' in array
```

`Above we are removing one element from index 1 (the 2nd element) and adding a new element 'Male' & '07' removed from the array`

*   **slice()**  
    The `slice()` method helps you copy and clone an array to a new array. `Note:` slice()\` method doesn't change the original array. Instead, it creates a new shallow copy of the original array.
    

```jsx
let array = ['Archit', 07, false, 'Age'] ;
let copy = array.slice;
console.log(copy); // ['Archit', 07, false, 'Age'] \\ 'Archit' removed from the array
```

### 3\. Finding elements

*   **indexOf():**  
    The `indexOf()` method helps you to know the index position of an element in the array. If an element is not found, the `indexOf()` method returns `-1`.
    

```jsx
let array = ['Archit', 07, false, 'Age'] ;
console.log(array.indexOf(07)); \\ return 1
console.log(array.indexOf('Male')); \\ return -1
```

*   \*\*includes(): \*\* The `includes()` method helps you to check if an element is in an array. If the element is found, the method returns true, and false otherwise.
    

```jsx
let array = ['Archit', 07, false, 'Age'] ;
console.log(array.includes(07)); \\ return true
console.log(array.indexOf('Male')); \\ return false
```

*   **find():**  
    The `find()` method helps you to find an element in an array.  
    `Note: It returns the first matched element from the array that satisfies the condition in the function.`
    

```jsx
let array = ['Archit', 07, false, 'Age', 'Age'] ;
console.log(array.find('Age')); \\ 'Age'
```

*   **findIndex()**  
    The `findIndex()` method helps find the index of an element in an array.  
    `Note: If no elements match the condition, the findIndex() method returns -1.`
    

```jsx
let array = ['Archit', 07, false, 'Age', 'Age'] ;
console.log(array.findIndex('Age')); \\ return index 3
```

### 4\. High-order methods

*   **map():**  
    The `map()` method creates a new array by iterating through the elements and applying the logic that will transform each value in the array. We'll create a new array of `new array` of all the `arrays` in the `new array`.
    

```jsx
let array = [4 ,9 , 16, 25] ;
let newArray = array.map(Math.sqrt);
console.log(newArray); \\ [2, 3, 4, 5]
```

*   **filter():**  
    The `filter()` method creates a new array filled with elements that matches the condition mentioned in the function and it does not execute the function for empty elements. It does not change the original array.
    

```jsx
   function isPositive(value) {
   return value > 0;
   }
   
   var filtered = [112, 52, 0, -1, 944].filter(isPositive);
   console.log(filtered); \\[112, 52, 944]
```

*   **reduce():**  
    The `reduce()` method reduce element of an array to a value.
    

```jsx
let numbers = [1, 2, 3];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}
console.log(sum); \\ return 6
```

*   **every():**  
    The `every()` method detects if every element of the array matches the condition passed in the function.
    

```jsx
let numbers = [1, 3, 5];
let result = true;
for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] <= 0) {
        result = false;
        break;
    }
}
console.log(result); \\ true
```

*   **some():**  
    The `some()` method returns a boolean value (true/false) based on at least one element in the array passing the condition in the function.
    

```jsx
let marks = [ 4, 5, 7, 9, 10, 3 ];
let lessThanFive = false;
for (let index = 0; index < marks.length; index++) {
    if (marks[index] < 5) {
        lessThanFive = true;
        break;
    }
}
console.log(lessThanFive); \\ true
```

*   **sort():** The `sort()` method converts the element types into strings and then sorts them. The sorting order is ascending. The `sort()` method changes the original array.
    

```jsx
let array = \['Nikita' ,'Sonali' ,'Archit' ,'Deepak'\] ; 
console.log(array.sort()); \\ ['Archit' ,'Deepak' ,'Nikita' ,'Sonali']
```

*   **forEach():**  
    The `forEach()` method calls a function for each element in an array.
    

```jsx
let ranks = ['A', 'B', 'C'];
for (let i = 0; i < ranks.length; i++) {
    console.log(ranks[i]); \\ A B C
 }
```

### 4\. Arrays to Strings

*   **join():**  
    he `join()` method joins all the elements of the array using a separator and returns a string. The comma (,) is used for joining.
    

let arrayFirst = \[1, 2, 3\]; const arraySecond = \[4, 5, 6\];

const arrayMerged = arrayFirst.concat(arraySecond);

console.log(arrayMerged); // \[1, 2, 3, 4, 5, 6\] console.log(arrayFirst); // \[1, 2, 3\] console.log(arraySecond); // \[4, 5, 6\]

---

![Goodbye](https://media.giphy.com/media/3o7WICht89LQdQZa2A/giphy.gif align="left")