Must-Know JavaScript Array Methods
Tags: javascript, node, programming, typescript
Published: 2023-02-13 20:45:22

---
title: Must-Know JavaScript Array Methods
published: true
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zm9xeuxnh3xwa6msa6qk.jpg
date: 2023-02-13 21:00:36 UTC
tags: Javascript,NodeJS,Programming,Typescript
canonical_url: https://livecodestream.dev/post/must-know-javascript-array-methods/
---

Arrays are one of the most powerful data structures in JavaScript and are helpful for all sorts of tasks. This blog post will discuss 15 array methods in detail so you can start using them immediately!

If you are working with JavaScript, arrays are something you can’t avoid, so knowing these 15 JavaScript array methods is not only helpful, but it is a must, and they are often the subject of [interview questions](https://livecodestream.dev/post/20-common-javascript-interview-questions/).

* * *

## What Are JavaScript Arrays? [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#what-are-javascript-arrays)

A JavaScript array is a data structure that stores multiple values in a single variable. They are similar to other data structures, like lists and dictionaries, but they have some key differences. Arrays are ordered collections of items, so each item has an index. This index can be used to access or modify the items in the array.

* * *

## Create an Array [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#create-an-array)

You can create an array in JavaScript using any of the following syntaxes:

Create an array by encapsulating array elements in squared brackets:

```
const array_name = [item1, item2, ...];

```

Alternatively, you can start with an empty array and fill the array:

```
const array_name = [];
array_name[0]= item1;
array_name[1]= item2;
array_name[2]= ...;

```

Or you can use the keyword `new` with the array constructor:

```
const array_name = new Array(item1, item2, ...);

```

And there are more clever and fun ways of doing that, but that will have to be for another article.

* * *

## Why Are JavaScript Arrays So Good? [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#why-are-javascript-arrays-so-good)

JavaScript arrays are powerful because they provide a lot of methods to manipulate data. These methods make it easy to perform everyday tasks, such as:

- Adding and removing elements from an array
- Searching for an element in an array
- Sorting the elements in an array
- Looping through an array
- Filtering an array

And much more!

So, without further ado, let’s get started with the 15 must-know JavaScript array methods.

* * *

## Method #1: Some() [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#method-1-some)

The `some()` method tests whether at least one element in the array passes the test implemented by the provided function. It returns a Boolean value.

This is how you use it:

```
arr.some(callback(element[, index[, array]])[, thisArg])

```

The `some()` method executes the callback function once for each element present in the array until it finds one where `callback` returns a truthy value (a value that coerces to `true`). It returns’ false’ if it doesn’t find such an array element.

Example:

```
const a = [1, 2, 3, 5, 8].some(item => item > 5)
const b = [1, 2, 3, 4, 5].some(item => item > 5)

console.log(a)
console.log(b)

---------
Output
---------
> true
> false

```

* * *

## Method #2: Every() [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#method-2-every)

The `every()` method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.

This is how you use it:

```
arr.every(callback(element[, index[, array]])[, thisArg])

```

The `every()` method executes the callback function once for each array element until it finds one where `callback()` returns a falsy value (a value that coerces to false). It returns `true` if it doesn’t find such an array element.

Example:

```
const a = [10, 9, 8, 7, 6].every(item => item > 5)
const b = [7, 6, 5].every(item => item > 5)

console.log(a)
console.log(b)

---------
Output
---------
> true
> false

```

* * *

## Method #3: Reduce() [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#method-3-reduce)

The `reduce()` method executes a reducer function (that you provide) on each array element, resulting in a single output value.

The reducer function takes four arguments:

1. accumulator
2. currentValue
3. currentIndex
4. array

The first time the `callback` is called, `accumulator` and `currentValue` can be either the `initialValue` if provided or the first array element if not.

Definition:

```
arr.reduce(callback( accumulator, currentValue[, index[, array]] )[, initialValue])

```

### How reduce() works [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#how-reduce-works)

Let’s see with an example how `reduce()` works:

```
[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => accumulator + currentValue)

```

If we go step by step and put in a table all the parameters plus the resulting value of the `callback`, we would get the following:

| # | accumulator | currentValue | currentIndex | array | return value |
| --- | --- | --- | --- | --- | --- |
| 1 | 0 | 1 | 0 | [0, 1, 2, 3, 4] | 1 |
| 2 | 1 | 2 | 1 | [0, 1, 2, 3, 4] | 3 |
| 3 | 3 | 3 | 2 | [0, 1, 2, 3, 4] | 6 |
| 4 | 6 | 4 | 3 | [0, 1, 2, 3, 4] | 10 |

And the final result would be `10`. In our particular case, I did not provide an initial value. Let’s try that next.

```
const initialValue = 10
[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => accumulator + currentValue, initialValue)

```

With this new scenario, our table would like:

| # | accumulator | currentValue | currentIndex | array | return value |
| --- | --- | --- | --- | --- | --- |
| 1 | 10 | 0 | 0 | [0, 1, 2, 3, 4] | 10 |
| 2 | 10 | 1 | 1 | [0, 1, 2, 3, 4] | 11 |
| 3 | 11 | 2 | 2 | [0, 1, 2, 3, 4] | 13 |
| 4 | 13 | 3 | 3 | [0, 1, 2, 3, 4] | 16 |
| 5 | 16 | 4 | 4 | [0, 1, 2, 3, 4] | 20 |

And the final resulting value is `20`.

The `reduce()` function is great. It has several uses, like summing all the values of an array or in an object array, counting for particular items in the array, grouping objects, merging arrays contained in an array of objects, removing duplicates, etc.

If you want to know more about `reduce()` check our guide on [JavaScript reducer, a simple, yet powerful array method](https://livecodestream.dev/post/javascript-reducer-a-simple-yet-powerful-array-method/)

* * *

## Method #4: Map() [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#method-4-map)

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

The function takes three arguments:

- currentValue
- index (optional)
- array (optional)

In order, the `map()` method calls the provided function once for each element in an array. It does not execute the `callback` on elements without values. The return value of the callback function is stored in the new array.

Definition:

```
arr.map(callback( currentValue[, index[, array]])[, thisArg])

```

> Always be careful when using `map()`. Remember that for each element, JavaScript creates an array. If you don’t need the resulting array and want to iterate the array elements, use `forEach()` or `for-of` instead.

Example:

```
const numbers = [1, 2, 3, 4, 5]
const doubled = numbers.map(value => value * 2)

console.log(doubled)

---------
Output
---------
> (5) [2, 4, 6, 8, 10]

```

As we mentioned, `map()` will create a new array, so the following is a consequence of that:

```
const numbers = [1, 2, 3, 4, 5]
const numbers2 = numbers.map(value => value)
console.log('numbers', numbers)
console.log('numbers2', numbers2)
console.log(numbers === numbers2)

---------
Output
---------
numbers (5) [1, 2, 3, 4, 5]
numbers2 (5) [1, 2, 3, 4, 5]
false

```

Even though each array contains the same elements, they are not the same reference. Thus the `numbers === numbers2` resolves to false.

* * *

## Method #5: Flat() [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#method-5-flat)

The `flat()` method creates a new array with all sub-array elements concatenated recursively up to the specified depth. The default depth is one.

Examples:

```
const arr1 = [1, 2, [3, 4]]
console.log(arr1.flat())

const arr2 = [1, 2, [3, 4, [5, 6]]]
console.log(arr2.flat())

const arr3 = [1, 2, [3, 4, [5, 6]]]
console.log(arr3.flat(2))

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]
console.log(arr4.flat(Infinity))

---------
Output
---------
> (4) [1, 2, 3, 4]
> (5) [1, 2, 3, 4, Array(2)]
> (6) [1, 2, 3, 4, 5, 6]
> (10) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

```

> Note that if we want to flatten all levels recursively, we can pass `Infinity` as the function’s argument.

* * *

## Method #6: Filter() [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#method-6-filter)

The `filter()` method creates a new array with all elements that pass the given test implemented by the provided function.

The `filter() ` method does not mutate the original array but returns a new one.

Definition:

```
arr.filter(callback(element[, index, [array]])[, thisArg])

```

Examples:

```
const array = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]

function isPrime(num) {
 for (let i = 2; num > i; i++) {
  if (num % i == 0) {
   return false
  }
 }
 return num > 1
}

console.log(array.filter(isPrime))

---------
Output
---------
> (6) [2, 3, 5, 7, 11, 13]

```

From the example above, we use a `filter()` method with a callback function to test whether each element of an array is a prime number or not. The resulting new array only contains the elements of an array that are prime numbers.

* * *

## Method #7: ForEach() [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#method-7-foreach)

The `forEach()` method executes the provided function once for all the elements in the array. It differs from the `map()` method because it does not create a new array.

```
arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

```

Definition:

```
arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

```

Example:

```
const array = [1, 2, 3, 4, 5]
array.forEach((item) => console.log(item))

---------
Output
---------
1
2
3
4
5

```

There are two critical considerations when using `forEach()`:

- There is no way to stop or break a `forEach()` loop other than throwing an exception.
- `forEach()` expects a synchronous `callback`, it won’t wait for promises to be resolved.

Let’s see an example of the latter:

```
let ratings = [5, 4, 5]
let sum = 0

let sumFunction = async function (a, b)
{
 return a + b
}

ratings.forEach(async function(rating) {
 sum = await sumFunction(sum, rating)
})

console.log(sum)

---------
Output
---------
0

```

The expected outcome for the above example would have been `14`, but we got `0` instead. The `forEach()` array method did not await the promise, and the `console.log()` statement was executed before the variable `sum` was updated.

If you want to know more about `forEach()` check our guide on [looping arrays with JavaScript forEach](https://livecodestream.dev/post/javascript-foreach-powered-array-for-loop/)

* * *

## Method #8: FindIndex() [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#method-8-findindex)

The `findIndex()` method returns the index of the first element in an array that satisfies a given test function. Otherwise, it returns `-1`. Unlike other methods, `findIndex()` will execute the given function even for indexes with unassigned values.

Definition:

```
arr.findIndex(callback( element[, index[, array]] )[, thisArg])

```

Example:

```
function isPrime(num) {
 for (let i = 2; num > i; i++) {
  if (num % i == 0) {
   return false
  }
 }
 return num > 1
}

console.log([4, 6, 8, 9, 12].findIndex(isPrime))
console.log([4, 6, 7, 9, 12].findIndex(isPrime))

---------
Output
---------
-1
2

```

As we can see from the example above, `findIndex()` returns `-1` if an array does not contain any prime numbers and the index of the first element that’s a prime number.

* * *

## Method #9: Find() [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#method-9-find)

The `find()` method returns the value of the first element in an array that satisfies a given test function. Otherwise, it returns `undefined`. Note the difference with `findIndex()`, where the element’s index is returned instead of the value.

Definition:

```
arr.find(callback(element[, index[, array]])[, thisArg])

```

Example:

```
const inventory = [
 {name: 'apples', quantity: 2},
 {name: 'bananas', quantity: 0},
 {name: 'cherries', quantity: 5}
]

const result = inventory.find( ({ name }) => name === 'cherries' )

console.log(result)

---------
Output
---------
> {name: "cherries", quantity: 5}

```

* * *

## Method #10: Sort() [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#method-10-sort)

The `sort()` method returns a new sorted array with the elements sorted in ascending order. When called with no arguments, the array is sorted alphabetically by converting each element to a string and comparing these strings using Unicode code point value.

Sorting is among the most popular js array methods, yet it is sometimes misused, as it has a [few particularities](https://philna.sh/blog/2019/08/26/how-not-to-sort-an-array-in-javascript/).

Examples:

```
const numbers = [4, 2, 5, 1, 3]
numbers.sort((a, b) => a - b)
console.log(numbers)

---------
Output
---------
> (5) [1, 2, 3, 4, 5]

```

Always remember that the sorting happens in place, so:

```
const numbers = [4, 2, 5, 1, 3]
const numbers2 = numbers.sort((a, b) => a - b)

console.log('numbers', numbers)
console.log('numbers2', numbers2)
console.log(numbers === numbers2)

---------
Output
---------
numbers > (5) [1, 2, 3, 4, 5]
numbers2 > (5) [1, 2, 3, 4, 5]
true

```

The sort function will modify the original array and return a reference to itself. Thus, the initial array and the returned array are the same.

* * *

## Method #11: Concat() [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#method-11-concat)

The `concat()` method merges two or more arrays into a single javascript array. This method does not alter the original but returns a new array instance containing all the elements from both arrays.

Definition:

```
const new_array = old_array.concat([value1[, value2[, ...[, valueN]]]])

```

Examples:

```
const letters = ['a', 'b', 'c']
const numbers = [1, 2, 3]

console.log(letters.concat(numbers))

---------
Output
---------
> (6) ["a", "b", "c", 1, 2, 3]

```

* * *

## Method #12: Fill() [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#method-12-fill)

The `fill()` method sets all the elements in an array, from a start index to an end index, with a static value. It returns a new array object without altering the original one.

Definition:

```
arr.fill(value[, start[, end]])

```

Examples:

```
const original = [1, 2, 3]
const result = original.fill(4)
console.log('original', original)
console.log('result', result)
console.log(original === result)

---------
Output
---------
original > (3) [4, 4, 4]
result > (3) [4, 4, 4]
true

```

* * *

## Method #13: Includes() [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#method-13-includes)

The `includes()` method returns `true` or `false` depending on whether a given value is present among the array elements. It is similar to the `indexOf()` method, but instead of returning the index, it returns just a boolean indicating its presence in the array.

Definition:

```
arr.includes(valueToFind[, fromIndex])

```

Examples:

```
console.log([1, 2, 3].includes(2))
console.log([1, 2, 3].includes(4))

---------
Output
---------
true
false

```

> Note that includes is case-sensitive when dealing with strings.

* * *

## Method #14: Reverse() [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#method-14-reverse)

The `reverse()` method reverses an array **in place**. By reversing, we mean that the function will transpose the elements of the array. The first element will become the last, and the last the first element.

This operation will mutate the original array and return a reference to the same.

Definition:

```
a.reverse()

```

Examples:

```
console.log([1, 2, 3].reverse())

---------
Output
---------
> (3) [3, 2, 1]

```

A typical use case for `reverse()` is, for example, if you have an array of comments and want to display them in reverse chronological order.

* * *

## Method #15: FlatMap() [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#method-15-flatmap)

The `flatMap()` method applies a function to each array element and then flattens the result into an array. It combines `flat()` and `map()` in one function.

Definition:

```
arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])

```

Example:

```
const array = [[1], [2], [3], [4], [5]]

const a = array.flatMap(arr => arr * 10)

// With .flat() and .map()
const b = array.flat().map(arr => arr * 10)

console.log('flatMap', a)
console.log('flat&map', b)

---------
Output
---------
flatMap (5) [10, 20, 30, 40, 50]
flatMap (5) [10, 20, 30, 40, 50]

```

* * *

## Bonus: Add and Remove Array Elements with Push() and Pop() and Shift() [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#bonus-add-and-remove-array-elements-with-push-and-pop-and-shift)

### push() [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#push)

The `push()` method adds one or more elements to the end of an array and returns the new length of the new array. It mutates the array in place. The elements are added one by one after the last array element, in the order in which they appear in the arguments list.

Example:

```
const fruits = ["🍌", "🍊", "🍎"];
fruits.push("🥝", "🍋");
console.log(fruits); // output: ['🍌', '🍊', '🍎', '🥝', '🍋']

```

### pop() [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#pop)

The `pop()` method removes the last array element and returns that removed element. It mutates the array in place.

Example:

```
const fruits = ["🍌", "🍊", "🍎"];
const popped = fruits.pop(); // remove last element

console.log(fruits); // output: ['🍌', '🍊']
console.log(popped); // output: 🍎

```

### shift() [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#shift)

The `shift()` method removes the first element from an array and returns that removed element. It mutates the array in place.

Example:

```
const fruits = ["🍌", "🍊", "🍎"];
const shifted = fruits.shift(); // remove first array element

console.log(fruits); // output: ['🍊', '🍎']
console.log(shifted); // output: 🍌

```

These methods are particularly useful when dealing with stacks or queues. A stack is a data structure that allows you to store and retrieve data in a last-in, first-out (LIFO) order. A queue is a data structure that allows you to store and retrieve data in a first-in, first-out (FIFO) order.

* * *

## Summary [<svg height="22" viewbox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>](#summary)

In this article, we have gone over the most important JavaScript array methods. Knowing them can save us some time and in some cases even boost the performance of our code.

I hope that today you learned some new arr y methods, or refresh old concepts which you can use for your next project.

Do you know any other interesting JavaScript array methods? Let me know in the comments below.

Happy coding!

**Newsletter**  
  
[Subscribe to my weekly newsletter](https://livecodestream.dev/newsletter/) for developers and builders and get a weekly email with relevant content.