Arrays in JavaScript: A Cheat sheet for a developer
Tags: javascript, webdev, tutorial, beginners
Published: 2023-02-27 11:18:53

In JavaScript, an array is a collection of values or elements, stored in a single variable. Arrays can hold values of any data type, including numbers, strings, booleans, and objects.

```javascript
const fruits = ["mango","orange","peach","apple"];
```
Here, `fruits` is an array which is storing 4 values.

## Create an Array

### Initializing the array explicitly

This involves manually specifying the elements of the array as a comma-separated list enclosed in square brackets.
```javascript
const cars = "mango","orange","peach","apple"] 
```

### Using the Array() constructor 

This involves creating an Array with built in Array() constructor
```javascript
const fruits = Array.of("mango","orange","peach","apple");
console.log(fruits); // ["mango","orange","peach","apple"];
```
### Array.of()

This involves using the Array.of() method. This method takes in a number of argument and create a new array instance.
```javascript
const fruits = Array.of("mango","orange","peach","apple");
console.log(fruits); // ["mango","orange","peach","apple"]
```
&nbsp;
## Array Length

We can find the length of an Array by accessing the `length` property

```javascript
const fruits = ["mango","orange","peach","apple"];
console.log(fruits.length); // 4
```
&nbsp;
## Accessing the value of an Array

We can access the value of Array by referring to the index number of the item in a square bracket

```javascript
const fruits = ["mango","orange","peach","apple"];

//first element
console.log(fruits[0]); // mango

//second element
console.log(fruits[1]); //orange
```
&nbsp;
## Adding an element to an Array

### Array.push()
The `push()` method adds one or more elements to the end of an array

```javascript
const fruits = ["mango","orange","peach","apple"];
fruits.push("banana","grape");
console.log(fruits); 
//["mango","orange","peach","apple","banana","grape"];
```
### Array.unshift()
The `unshift()` method adds one or more elements to the start of an array

```javascript
const fruits = ["mango","orange","peach","apple"];
fruits.unshift("banana","grape");
console.log(fruits); 
//["banana","grape","mango","orange","peach","apple"];
```
&nbsp;

## Removing an element from an Array

### Array.pop()
The `pop()` method removes the last element from an array
```javascript
const fruits = ["mango","orange","peach","apple"];
fruits.pop();
console.log(fruits); 
//["mango","orange","peach"];
```
### Array.unshift()
The `shift()` method removes the first element of an array

```javascript
const fruits = ["mango","orange","peach","apple"];
fruits.shift();
console.log(fruits); 
//["orange","peach","apple"];
```

&nbsp;

## Array Methods
There are various method provided by an array.Lets understand and learn how to use them.

### 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.

```javascript
const fruits1 = ["mango","orange"];
const fruits2 = ["peach","apple"];
const fruits3 = fruits1.concat(fruits2);
console.log(fruits3); 
//["mango","orange","peach","apple"];
```

### Array.map()

The `map()` method creates a new array populated with the results of calling a provided function on every element in the calling array. 

```javascript
const fruits = ["mango","orange","peach","apple"];
fruits.map((fruit) => fruit);
//["mango","orange","peach","apple"]

const numbers = [5,10,15,20];
numbers.map((number) => number * 2);
//[10,20,30,40]
```

### Array.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. 

```javascript
const fruits = ["mango","orange","mango","apple"];
fruits.filter((fruit) => fruit.length > 5);
//["orange"]
```
### Array.find()

The `find()` method is used to get the value of the first element in the array that satisfies the provided condition if the condition is not satisfied it returns `undefined`.

```javascript
const fruits = ["mango","orange","peach","apple"];
fruits.find((fruit) => fruit); //["mango"]

fruits.find((fruit) => "strawberry"); // undefined

const numbers = [5,10,15,20];
numbers.find((number) => number > 15); // 20
```
## Array.findIndex()

The `findIndex()` method returns the index of the first element in an array that satisfies the provided testing function. If no elements satisfy the testing function, -1 is returned.

```javascript
const fruits = ["mango","orange","peach","apple"];
fruits.findIndex((fruit) => fruit.length === 6); 
// 1
//Since the value returned is orange and the 
//position of orange is 1 in the fruits array
```

### Array.findLast()
The `findLast()` method iterates the array in reverse order and returns the value of the first element that satisfies the provided testing function. If no elements satisfy the testing function, `undefined` is returned.

```javascript
const fruits = ["mango","orange","peach","apple"];
fruits.findLast((fruit) => fruit.length === 5); 
// apple

const fruits = ["mango","orange","peach","apple"];
fruits.findLast((fruit) => fruit.length === 7); 
// undefined
```

### Array.findLastIndex()

The `findLastIndex()` method iterates the array in reverse order and returns the index of the first element that satisfies the provided testing function. If no elements satisfy the testing function, `-1` is returned.

```javascript
const fruits = ["mango","orange","peach","apple"];
fruits.findLastIndex((fruit) => fruit.length === 5); 
// 3
//Since the value returned is apple and the 
//position of orange is 1 in the fruits array

const fruits = ["mango","orange","peach","apple"];
fruits.findLastIndex((fruit) => fruit.length === 7); 
// -1
```
### Array.flat()
The `flat()` method is used to flatten a nested array into a single, one-dimensional array. This method returns a new array with all sub-array elements concatenated into it recursively up to the specified depth.

```javascript
const fruits = ["mango","orange",["peach","apple"]];
fruits.flat(); 
// ["mango","orange","peach","apple"]

const fruits = ["mango","orange",[[[["peach","apple"]]]]];
fruits.flat(2); 
//["mango","orange",[["peach","apple"]]];

const fruits = ["mango","orange",[[[["peach","apple"]]]]];
fruits.flat(4); 
//["mango","orange","peach","apple"];
```


### Array.flatMap()
The `flatMap()` method is used to both maps and flattens an array. It takes a callback function as an argument, which is applied to each element of the array, and returns a new array with the resulting values flattened into a single, one-dimensional array.

```javascript
const fruits = ["mango","orange",["peach","apple"]];
fruits.flatMap((fruit) => fruit);
//["mango","orange","peach","apple"]
```

Note: The difference between `flat()` and `flatMap()` is that 
`flat()` takes a depth parameter that specifies the depth to which the nested arrays should be flattened.
Whereas `flatMap()` flattens the result into a single, one-dimensional array.

### Array.includes()
The `includes()` method allows you to check if an array includes a specific value. It returns a boolean value `true` if the array contains the specified value, and `false` otherwise.

```javascript
const fruits = ["mango","orange","peach","apple"];
fruits.includes("orange");
//true

const fruits = ["mango","orange","peach","apple"];
fruits.includes("banana");
//false
```

### Array.every()
The `every()` method checks whether all the elements in an array pass a particular test implemented by a provided function. The method returns a boolean value true if all the elements pass the test, and false otherwise.

```javascript
const fruits = ["mango","orange","peach","apple"];
fruits.every((fruit) => fruit.length > 4);
//true

const fruits = ["mango","orange","peach","apple"];
fruits.every((fruit) => fruit.length > 8);
//false
```

### Array.some()
The `some()` method checks whether at least one element in an array passes a particular test implemented by a provided function. The method returns a boolean value true if at least one element passes the test, and false otherwise.

```javascript
const fruits = ["mango","orange","peach","apple"];
fruits.some((fruit) => fruit.length >= 6);
//true

const fruits = ["mango","orange","peach","apple"];
fruits.some((fruit) => fruit.length >= 7);
//false
```
### Array.splice()
The `splice()` method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

```javascript
//Removing Elements
const fruits = ["mango","orange","peach","apple"];
fruits.splice(1, 1); // Removes the element at index 1 (banana)
// ["mango", "peach", "apple"]

// Adding elements
const fruits = ["mango","orange","peach","apple"];
fruits.splice(1, 0, "blueberry", "kiwi"); // Adds "blueberry", "kiwi" at index 1
// ["mango","blueberry","kiwi","orange","peach","apple"];

// Replacing elements
const fruits = ["mango","orange","peach","apple"];
fruits.splice(2, 1, 'kiwi'); // Replaces the element at index 2 (peach) with 'kiwi'
// ["mango", "orange", "kiwi", "apple]
```

### Array.slice()
The `slice()` method returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included). The original array will not be modified.

```javascript
const fruits = ["mango","orange","peach","apple"];
fruits.slice(2);
// ["peach","apple"]

const fruits = ["mango","orange","peach","apple"];
fruits.slice(1,3);
// ["orange","peach"]
```

### Array.fill()
The `fill()` method fills the elements in an array with a static value.

```javascript
const fruits = ["mango","orange","peach","apple"];
fruits.fill("kiwi");
// ["kiwi","kiwi","kiwi","kiwi"]
```

### Array.reverse()
The `reverse()` method reverses an array in place and returns the reference to the same array, the first array element now becoming the last, and the last array element becoming the first. In other words, elements order in the array will be turned towards the direction opposite to that previously stated.

```javascript
const fruits = ["mango","orange","peach","apple"];
fruits.reverse();
// ["apple","peach","orange","mango"]
```

### Array.sort()
The `sort()` method sorts the elements of an array in place and returns the array. The default sort order is according to string Unicode code points.

```javascript
const fruits = ["mango","orange","peach","apple"];
fruits.sort();
// ["apple","mango","orange","peach"]
```

### Array.toString()
The `toString()` method returns a string representation of the array by converting each element to a string and joining them together with commas

```javascript
const fruits = ["mango","orange","peach","apple"];
fruits.toString();
// "apple, mango, orange, peach"
```