I have an

array…
.find()

I want… Something in the array

The same number
.map()
of items

Something else

Fewer items .filter()

Another The new

I want…
array array has…
Only
More
adding to Yes .concat()
items
the end?

No
.flatMap()*
Sometimes more,
sometimes less

Join elements together

.join()
with something in-between

I want to…
JavaScript Array Methods

A string

Do something else R

Every item passes a test .every()

A Civilised Guide to

I want to
A boolean At least one item passes a test .some()
check…

The array includes an item .includes()

Some other type R

Something else R

No value Are you Really

Yes Yes .forEach()
at all sure? sure?

No No

Back to start R .reduce()

https://jrsinclair.com
S A M P LE D ATA .find() .map()
This data is used across all the examples for each array method.
The .find() method will return The .map() method will apply a
const heroes = [ the first element in the array given function to every item in
{name: 'Hulk', strength: 90000}, that matches a test you provide. your array and give you a new
{name: 'Spider-Man', strength: 25000}, array with those values.
{name: 'Hawk Eye', strength: 136},
EXA MPLE:
{name: 'Thor', strength: 100000},
{name: 'Black Widow', strength: 136}, EXAMPLE:
function isHulk(hero) {
{name: 'Vision', strength: 5000}, return hero.name === 'Hulk'; function getName(hero) {
{name: 'Scarlet Witch', strength: 60}, } return hero.name;
{name: 'Mystique', strength: 120}, const hulk = heroes.find(isHulk); }
{name: 'Namora', strength: 75000},
const names = heroes.map(getName);
{name: 'Captain America', strength: 362},
{name: 'Deadpool', strength: 1814},
{name: 'Black Panther', strength: 1814},
];

.filter() .concat() .flatMap() .join()

The .filter() method takes
your array and removes items
that don't pass a test you give it.
E XA M P L E :
The .concat() method adds This method is only a proposal,
new items to the end of your so it's not available everywhere.
array. You pass it a function that
returns an array and it will
E X A MPLE: squish all the results together
The .join() method will insert
a given string between each item,
and return a joined-up string.
EXAMPLE:

function strong(hero) { const extras = [ into a flat array. function getName(hero) {

return hero.strength >= 200; {name: 'Cyclops', strength: 136}, return hero.name;
} {name: 'Gambit', strength: 136}, }
EXA MPLE:
const tuff = heroes.filter(strong); ]; const list = heroes
const more = heroes.concat(extras); function space(hero, i) { .map(getName)
return ((i > 0) && (i % 5 === 0)) .join('\n');
? ['<hr/>', hero.name]
: [hero.name];
}
const list = heroes.flatMap(space);

.every() .some() .includes() .reduce()

The .every() method checks
that every single item in your
array matches some criteria.
E XA M P L E :
function strong(hero) {
return hero.strength >= 200;
} }
const tuff = heroes.every(strong);
The .some() method checks that
at least one item in your array
matches some criteria.
E X A MPLE:
function isHulk(hero) {
return hero.name === 'Hulk';
const hulkIn = heroes.some(isHulk);
The .includes() method The .reduce() method is the
checks that at least one item most flexible array iterator. It
in your array matches some processes each item of the array
criteria. and lets you modify a value as
you go.
EXA MPLE:
EXAMPLE:
function getName(hero) {
return hero.name; function sumStrength(total, hero) {
} return total + hero.stength;
const hulkIn = heroes }
.map(getName) const totalStength = heroes.reduce(
.includes('Hulk'); sumStrength,
0
);

.forEach()

The .forEach() method applies

a given function to every element
in the array. It doesn't return a
value though. So, by definition,
it's only useful for side effects.

E XA M P L E :

function logHero(h) { © James Sinclair 2018, https://jrsinclair.com

A Civilised Guide to
console.log(
'Name: ' + h.name
+ '\nStrength: ' + h.strength
);
}
heroes.forEach(logHero);
JavaScript Array Methods