The Use-Case-Driven Guide to Essential JavaScript Array Methods
Tags: javascript, beginners, tutorial, webdev
Published: 2021-11-17 13:08:24


When working with arrays, it can be easy to reinvent the wheel.

Once you know how to iterate over an array with a `for` loop, you can sink into the trap of using it every time you're working with arrays. 

Any why shouldn't you? After all, it's a versatile, easily understood concept.

### The importance of logical shorthands

When a pattern occurs frequently across many different types of programs, developers create utility functions for handling those patterns.

Not only does this cut down on duplicate code, but the semantics helps other developers understand your intent more easily.

You can write a loop that filters an array, but when I see `Array.filter` I immediately know what you're trying to do.

### How does this guide work?

I've gone through the instance methods of JavaScript arrays and organized them by category, leaving out the ones that I consider to be less commonly used.

*Did I leave out your favorite array method? Let me know in the comments!*

## Sample Data

The below sample data is used throughout this post. To maintain consistency, each example starts with the assumption that this data has not been modified.

```javascript
// Some Hosts of Great British Bake Off
const hosts = [
	{ id: 1, name: 'Paul Hollywood', isBaker: true },
	{ id: 2, name: 'Prue Leith', isBaker: true },
	{ id: 3, name: 'Noel Fielding', isBaker: false },
	{ id: 4, name: 'Matt Lucas', isBaker: false },
];

// Some Winners of Great British Bake Off
const winners = [
	'Edd Kimber',
	'Joanne Wheatley',
	'John Whaite',
	'Frances Quinn',
];
```

## Testing or looking for existing elements

### Find the first element that satisfies a condition

[Array.prototype.find()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)

`find` accepts a function and returns the first element for which that function returns a truthy value.

```javascript
const paul = hosts.find(host => host.name === 'Paul Hollywood');
// { id: 1, name: 'Paul Hollywood', isBaker: true }

const firstNonBaker = hosts.find(host => !host.isBaker);
// { id: 3, name: 'Noel Fielding', isBaker: false }
```

### Find the index of the first element that satisfies a condition

[Array.prototype.findIndex()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)

This method works the same way as `find`, except it returns the element's index instead of the elements itself.

```javascript
const paulIndex = hosts.findIndex(host => host.name === 'Paul Hollywood');
// 0
```

### Find the index of an element

[Array.prototype.indexOf()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)

`indexOf` differs slightly from `findIndex` in that it accepts an exact value as its parameter rather than function. Because of this, it's more useful for primitive values since objects are compared by reference.

If the element occurs more than once in the array, the index of the first occurrence is returned.

If the element is not in the array, then `-1` is returned.

```javascript
const indexOfJohn = winners.indexOf('John Whaite');
// 2

const indexOfMe = winners.indexOf('Adam Davis');
// -1
```

```javascript
// This methods compares objects by reference rather than by value, so it's 
// more useful with primitive types than with objects.
const originalPaul = hosts[0];
const paulClone = { id: 1, name: 'Paul Hollywood', isBaker: true };

const indexOfOriginalPaul = hosts.indexOf(originalPaul);
// 0

const indexOfPaulClone = hosts.indexOf(paulClone);
// -1
```

### Find the last index of an element

[Array.prototype.lastIndexOf()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf)

This is the same as `indexOf` except it returns the index of the last occurrence of an element except the first occurrence of an element.

### Find every element that satisfies a condition

[Array.prototype.filter()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)

```javascript
const bakers = hosts.filter(host => host.isBaker);
// [ { id: 1, name: 'Paul Hollywood', isBaker: true }, { id: 2, name: 'Prue Leith', isBaker: true } ]
```

### Test whether every element satisfies a condition

[Array.prototype.every()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every)

```javascript
const isAllBakers = hosts.every(host => host.isBaker);
// false
```

### Test whether at least one element satisfies a condition

[Array.prototype.some()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some)

```javascript
const hasAtLeastOneBaker = hosts.some(host => host.isBaker);
// true

const hasAtLeastOneIdGreaterThanTen = hosts.some(host => host.id > 10);
// false
```

### Test whether an element is included in an array

[Array.prototype.includes()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)

```javascript
// This methods compares objects by reference rather than by value, so it's 
// more useful with primitive types than with objects.
const originalPaul = hosts[0];
const paulClone = { id: 1, name: 'Paul Hollywood', isBaker: true };

const containsOriginalPaul = hosts.includes(originalPaul);
// true

const containsPaulClone = hosts.includes(paulClone);
// false
```

## Manipulating arrays

Note: Each of these examples assumes the array is in the original state and has not been changed by another example

### Add an element to the end of an array

[Array.prototype.push()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push)

```javascript
hosts.length;
// 4

hosts.push({id: 5, name: 'Sue Perkins'});

hosts.length;
// 5

// This method accepts an arbitrary number of arguments, meaning you can add as
// many elements as you want with a single call

winners.length;
// 4

winners.push('Nancy Birtwistle', 'Nadiya Hussain', 'Candice Brown');

winners.length;
// 7
```

[Array.prototype.concat()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)

While this is not the only use case for `concat`, it can be used in the same way as push. The difference, however, is that concat is non-destructive. This means that it returns a new array instead of the overwriting the existing array.

```javascript
winners.length;
// 4

const moreWinners = winners.concat('Nancy Birtwistle', 'Nadiya Hussain', 'Candice Brown');

winners.length;
// 4

moreWinners.length;
// 7
```

### Remove the last element from an array

[Array.prototype.pop()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop)

This method is the inverse of `push`, removing the last element from an array. Using these two functions, you can treat an array like a [stack](https://en.wikipedia.org/wiki/Stack_(abstract_data_type)).

```javascript
hosts.length;
// 4

const lastElement = hosts.pop();
// { id: 4, name: 'Matt Lucas', isBaker: false }

hosts.length;
// 3
```

### Combine two arrays

[Array.prototype.concat()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)

```javascript
winners.length;
// 4

otherWinners = ['Sophie Faldo', 'Rahul Mandal'];

combinedWinners = winners.concat(otherWinners);
```

### Set all (or just some) elements to the same value

[Array.prototype.fill()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill)

```javascript
winners.fill('everyone');
// [ 'everyone', 'everyone', 'everyone', 'everyone' ]

winners.fill('you', 0, 2);
// [ 'you', 'you', 'everyone', 'everyone' ]
```

### Sort an array

[Array.prototype.sort()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)

```javascript
winners.sort();
// [ 'Edd Kimber', 'Frances Quinn', 'Joanne Wheatley', 'John Whaite' ]
```

### Reverse the order of an array

[Array.prototype.reverse()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse)

```javascript
winners;
// [ 'Edd Kimber', 'Joanne Wheatley', 'John Whaite', 'Frances Quinn' ]

winners.reverse();
// [ 'Frances Quinn', 'John Whaite', 'Joanne Wheatley', 'Edd Kimber' ]
```

### Reduce the depth of an array (unnest an array of arrays)

[Array.prototype.flat()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat)

```javascript
let bothArrays = [hosts, winners];
// [
//   [
//     { id: 1, name: 'Paul Hollywood', isBaker: true },
//     { id: 2, name: 'Prue Leith', isBaker: true },
//     { id: 3, name: 'Noel Fielding', isBaker: false },
//     { id: 4, name: 'Matt Lucas', isBaker: false }
//   ],
//   [ 'Edd Kimber', 'Joanne Wheatley', 'John Whaite', 'Frances Quinn' ]
// ]

bothArrays.flat();
// [
//   { id: 1, name: 'Paul Hollywood', isBaker: true },
//   { id: 2, name: 'Prue Leith', isBaker: true },
//   { id: 3, name: 'Noel Fielding', isBaker: false },
//   { id: 4, name: 'Matt Lucas', isBaker: false },
//   'Edd Kimber',
//   'Joanne Wheatley',
//   'John Whaite',
//   'Frances Quinn'
// ]
```

## Iterating over or performing functions on elements of an array

### Get the results of passing each element into a function

[Array.prototype.map()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)

```javascript
const hostNames = hosts.map(host => host.name);
// [ 'Paul Hollywood', 'Prue Leith', 'Noel Fielding', 'Matt Lucas' ]
```

[Array.prototype.flatMap()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap)

`flatMap` works the same way as `map`, but flattens the array afterwards.

```javascript
const hostNamesSeparated = hosts.flatMap(host => host.split(' '));
// [
//   'Paul', 'Hollywood',
//   'Prue', 'Leith',
//   'Noel', 'Fielding',
//   'Matt', 'Lucas'
// ]
```

### Iterating over every element

[Array.prototype.forEach()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)

```javascript
hosts.forEach(host => console.log(host.name));
// Paul Hollywood
// Prue Leith
// Noel Fielding
// Matt Lucas
```

### Reduce an array into a single value

[Array.prototype.reduce()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)

I think `reduce` is usually a good candidate for replacing a `for` loop when there's a variable declared right before the loop, and the main purpose of the loop is to accumulate some value in that variable.

```javascript
// The for loop you might want to replace
let numberOfBakers = 0;
for (let i = 0; i < hosts.length; i++) {
	numberOfBakers = numberOfBakers + ~~hosts[i].isBaker;
	// ~~ is used to convert values to numbers without allowing for NaN
}
```

```javascript
let numberOfBakers = hosts.reduce((accumulator, host) => accumulator + ~~host.isBaker, 0);
// 2
```

## Creating string representations

[Array.prototype.join()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join)

`join` creates a string representation of the array, delimiting each item using the given string argument.

```javascript
winners.join(', ');
// 'Edd Kimber, Joanne Wheatley, John Whaite, Frances Quinn'
```

[Array.prototype.toString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toString)

```javascript
winners.toString();
// 'Edd Kimber,Joanne Wheatley,John Whaite,Frances Quinn'
```

## More Content

If you liked this, you might also like some of my other posts. If you want to be notified of my new posts, [follow me on Dev](https://dev.to/brewinstallbuzzwords) or subscribe to my [brief monthly newsletter](https://mailchi.mp/89dc077154c7/brewinstallbuzzwords).

* [What's the best questions you've been asked in a job interview?](https://dev.to/brewinstallbuzzwords/whats-the-best-question-youve-been-asked-in-a-job-interview-4a1j)
* [What was the first program you wrote?](https://dev.to/brewinstallbuzzwords/what-was-the-first-program-you-wrote-1gjp)
* [The weird quirk of JavaScript arrays (that you should never use)](https://dev.to/brewinstallbuzzwords/the-weird-quirk-of-javascript-arrays-that-you-should-never-use-4l3b)
* [Does Elixir have for loops?](https://www.brewinstallbuzzwords.com/posts/does-elixir-have-for-loops/)
* [Learn Elixir with me!](https://www.brewinstallbuzzwords.com/posts/learn-elixir-with-me/)
* [Project Tours: Bread Ratio Calculator](https://www.brewinstallbuzzwords.com/posts/bread-ratio-calculator/)
* [Changing Emoji Skin Tones Programmatically](https://www.brewinstallbuzzwords.com/posts/emoji-skin-tone/)
* [I made my first svg animation!](https://dev.to/brewinstallbuzzwords/i-made-my-first-svg-animation-29j3)
* [5 tips for publishing your first npm package](https://www.brewinstallbuzzwords.com/posts/tips-for-first-npm-package/)
* [4 Hugo Beginner Mistakes](https://www.brewinstallbuzzwords.com/posts/hugo-beginner-mistakes/)