JS Array methods: Which method to use to...?
Published: 2021-11-06 13:47:01

Arrays are list-like objects whose prototype provides various methods to perform many operations. Did you ever thought what are the different use-cases where these methods can be used?

The answer to this question can be found using: **I WANT TO...**
## 1. Mutate the original array
### Add an element
* **push()**: Adds one or more elements to the end of an array and returns the new length of the array.
* **unshift()**: Adds one or more elements to the beginning of an array and returns the new length of the array.

### Remove an element
* **pop()**: Removes the last element from an array and returns that element.
* **shift()**: Removes the first element from an array and returns that element.
* **splice()**: Changes the contents of an array by removing or replacing existing elements and/or adding new elements.

### Others:
* **fill()**: Changes all elements in an array to a static value.
* **sort()**: Sorts an array.
* **reverse()**: Reverses an array.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/njf2xvunh9z3tfsz7jr6.png)

## 2. Create a new array from original array

### Portion of array
* **slice()**: Returns a shallow copy of a portion of an array into a new array.

### Computed from array.
* **map()**:  Creates a new array from an existing one by applying a function to each one of the elements of the existing array.
* **reduce()**: Reduces an array of values down to just one value.
* **filter()**: Takes each element in an array and applies a conditional statement against it. If this conditional returns true, the element gets pushed to the new array.

### Merge into array
* **concat()**: Merges two or more arrays.

### Flatten the array:
* **flat()**: Creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.
* **flatMap()**: Returns a new array formed by applying a given callback function to each element of the existing array, and then flattening the result by one level.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/95upvj6vcac0eeswz7vk.png)

## 3. Find the
### Index of element
* **findIndex()**: Returns the index of the first element in the array that satisfies the given condition. Otherwise, it returns -1.

### Array element
* **find()**: Returns the first element in the array that satisfies the given condition. Otherwise, it returns undefined.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ek6htl38ycwf2fsfp35.png)

## 4. Check if array contains an element
### Using a condition
* **some()**: Returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false.
* **every()**: Returns true if, in the array, it finds all the element returns true for the provided function; otherwise it returns false.

### Using a value
* **includes()**: Checks whether an array includes a certain value, returning true or false as appropriate.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ahffyj6vd7bp1aisom7o.png)

## 5. Loop the array
* **forEach()**: Executes a provided function once for each array element.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0umqw0qqcqpmxoztrkm.png)

## 6. Join the array elements
* **join()**: Creates and returns a new string by concatenating all of the elements in an array
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ysb2qd57g96wxc5v4cls.png)