DEV Community

Cover image for I'll teach you 7 Array methods. (with animations!)
Fredy Sandoval
Fredy Sandoval

Posted on • Updated on • Originally published at fredy.dev

I'll teach you 7 Array methods. (with animations!)

map

Creates a new array populated with the results of a provided function on every element.

[1, 2, 3].map( n => n * 2 ); // [2, 4, 6]
Enter fullscreen mode Exit fullscreen mode

11

filter

Creates a Copy of a portion of a given array, filtered down to just the elements from the given array that pass the test, keep in mind that changes of your first array will affect your copy.

[1,2,3].filter( n => n !== 2 ); // [1,3]
Enter fullscreen mode Exit fullscreen mode

22

find

Stops and returns the first element in the provided array that satisfies the provided testing function, otherwise returns undefined.

[1,2,3].find( n => n == 2 ) // 2
Enter fullscreen mode Exit fullscreen mode

33

findIndex

Returns the index of the first element that satisfies the provided testing function. Otherwise -1 is returned.

[1,2,3].findIndex( n => n == 2) // 1
Enter fullscreen mode Exit fullscreen mode

44

fill

Changes all elements in an array to a static value, from a start index (default 0) to an end index (default array.length). It returns the modified array.

[1,2,3].fill('Txt', 1,2) // [1,'Txt', 3]
Enter fullscreen mode Exit fullscreen mode

77

every

Tests all elements in the array. After finished returns a Boolean value

[2,2,2].every( n => n == 2 ) // true
Enter fullscreen mode Exit fullscreen mode

88

some

Tests whether at least one element in the array passes the test implemented by the provided function.

[1,2,3].some( n => n == 2) // true
Enter fullscreen mode Exit fullscreen mode

99

👇 Follow me on Twitter

Twitter

Top comments (18)

Collapse
 
matijanovosel profile image
Matija Novosel • Edited

The code for every has the wrong array I think. Otherwise, a great way of explaining things!

Image description

Collapse
 
davido242 profile image
Monday David S.

I don't really get the point here pls!
I was thinking this is another version of the example for the every method and atleast the result should be false since not every item is equal to 2.

Got confused with the result of this.answer though!

Collapse
 
matijanovosel profile image
Matija Novosel

It had the wrong code initially but the author was diligent enough to change it afterwards.

Thread Thread
 
davido242 profile image
Monday David S.

Alright super!!

Collapse
 
fredysandoval profile image
Fredy Sandoval

Thanks for pointing out.

Collapse
 
tracygjg profile image
Tracy Gilmore

Fredy,
Nice article - love the animation but I think it could do with two examples for the every and some methods to demonstrate complete and early exit.

Collapse
 
jacksonkasi profile image
Jackson Kasi

I like teach with animation!

Collapse
 
svdoever profile image
Serge van den Oever

Nice way of explaining!

Collapse
 
themfon profile image
Mfon.

Very engaging. I love the gifs

Collapse
 
chiki1601 profile image
Miss Pooja Anilkumar Patel

Cool

Collapse
 
jmfayard profile image
Jean-Michel 🕵🏻‍♂️ Fayard

How did you produce those animations ?
Such a great teaching tool

Collapse
 
codewithtee profile image
Tabassum Khanum

Very Helpful!

Collapse
 
hasobi profile image
Hasobi

excellent content! love it!

Collapse
 
codewithrabeeh profile image
Rabeeh Ebrahim

Thanks for creating this. Nice content.

Collapse
 
said_mounaim profile image
Said Mounaim

Usefull! Thanks for sharing

Collapse
 
simmbiote profile image
JBS

Pretty neat. The gif for .fill is not quite right.

Collapse
 
acarrasco profile image
Alfonso Carrasco

Felicidades, increíble explicación!!!

Collapse
 
ruleenugroho profile image
ruleenugroho

very usefull, Thanks