## DEV Community π©βπ»π¨βπ» is a community of 968,873 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

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]
``````

## 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]
``````

## 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
``````

## 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
``````

## 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]
``````

## every

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

``````[2,2,2].every( n => n == 2 ) // true
``````

## 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
``````

Matija Novosel • Edited on

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

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!

Matija Novosel

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

Monday David S.

Alright super!!

Fredy Sandoval

Thanks for pointing out.

TGJ 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.

Jackson Kasi

I like teach with animation!

Mfon.

Very engaging. I love the gifs

Tabassum Khanum

Hasobi

excellent content! love it!

Said Mounaim

Usefull! Thanks for sharing

Serge van den Oever

Nice way of explaining!

Rabeeh Ebrahim

Thanks for creating this. Nice content.

Miss Pooja Anilkumar Patel

Cool

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

Alfonso Carrasco

ruleenugroho

very usefull, Thanks

JBS

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

## Visualizing Promises and Async/Await π€―

βοΈ Check out this all-time classic DEV post