JavaScript Array Methods ( Map, Filter, ForEach)

Array Methods. What are they? How do they work? How do I use them? I will cover all of it in this post.

Before we start I would like to give you a brief summary of methods in JS

What is a method in Javascript?

A method is a function which is a property of an object, which basically means it sits inside an object

In this example you can see there is a function inside the object x. The function is just console logging x object itself.

How to use a function inside an object?

You can use a method (we call function a method when it's inside an object) by adding a dot after the object variable. Like in the example below.

Now that you know how methods work let's dive into the main topic

Array Methods

What is an Array Method?

An array method can be used to do lots of cool things with an array. In this post, I am going to cover 3 Important array methods you will most probably use in your everyday coding sessions.

forEach() Array Method

So how the forEach array method basically works is that it calls a function once for each value in an array.

Here is our array :

So normally, if you want to loop over these array items you would use a for loop . But forEach makes things much easier for us.

Now let's say you want to know the index of all the items in the array mentioned above

You simply have to do this :

The forEach method takes in 3 parameters ( item, index, array )

Now let's say you want to capitalize a particular item in ourArr.

You could do something like this :

Now let's move on to the next array method

map() Array Method

The map array method is similar to forEach but this method doesn't edit the original array instead it returns a new one. This means your original array is not mutated. Also unlike forEach, you need to have a return statement when you use map().

Here is an example of map()

As you can see it's really similar to ForEach but remember map() doesn't change the original array so when you return a value you have to store it in a new variable. in this example let = newArr.

Alright to the next one!

filter() Array Method

Like the name, array filter method creates a new array with all elements that pass the test implemented by the provided function.

Note: filter & map both are similar on how they work but filter just returns the elements which pass the evaluation

Here is an example of filter():

As you can see all the numbers above 30 are filtered out to a new array. we are console logging the new filter variable which contains the new filtered array

That's all for this post I will try to cover more array methods in the future posts 😁 If you gained any knowledge from this post please leave like and do share it with your programming buddies 💜💛 Cya!

Bolaji Ayodeji's photo

This is insightful, thanks for sharing!

A quick tip: You should add your code using code snippets rather than adding images. It's a better experience with syntax highlighting and great for SEO.

let filter = [10,10,20,30,50];


Append three backticks to achieve this like so:

Screenshot 2020-08-17 at 5.59.45 AM.png

Show +1 replies
Bolaji Ayodeji's photo

You can actually edit this article and make the change if you want. Rohil

Rohil's photo

Yes i know but it will take some time & I am a bit too lazy haha😅 Bolaji Ayodeji

Aman Tyagi's photo

It was a nice read about JavaScript Array methods pretty informative, Well done man awesome, Keep going doing well

Rohil's photo

Thanks a lot, aman. I'll be waiting for yours as well :D

Usman Sabuwala's photo

Awesome! Looking forward for some nice posts like this one! 👍

Rohil's photo

Thank you max 💛

Preetika Taneja's photo

Great job! keep going! 👍💥

Rohil's photo

Thank you preetika 💛

Chris Bongers's photo

Well written, always nice to see people using these methods.

Do keep in mind, depending on the array a native for loop can actually be the quicker/faster solutions. Especially filter and map can be pretty heavy according to some tests i've seen.

Rohil's photo

Thank you. Also, i didn't know that thanks for letting me know :)