Array methods can be the most confusing thing one can think of in the language of JS. They are so useful that almost every framework is based on array methods, eg: REACT.JS.
Why are they so useful?
The main reason why they are used is the clean syntax they can provide while using it in a complex code.
We will be covering forEach, map, filter, find, findIndex, reduce.
I'll be giving an example with arrow function, plain function and also with for loop.
forEach
This is probably the first method you can think of when you hear the word array methods.
- Suppose you want to print each element in a array, generally you would want to make a for loop from zero to length-1 and print right? But in case of forEach thats not how it works. Let's see some examples.
You might say this doesn't look so shabby but well imagine writing the same statement millions of times for iterating? It gets real boring lmaoo. Let's see an example using forEach.
Thats an example using plain function, let's see how it looks after changing it into arrow function.
Surprised? How small you can make your code?
Note: if you statement is more than one line you would want to use {}
map
If you have tried understanding what maps are previously you would question yourself what is the difference between a map and forEach method. But by base both map and forEach method are similar, they both iterate through every element in the array but the biggest difference is, maps return a brand new array while forEach doesn't. Lets look at some examples.
Why is it giving us undefined?
What is the definition of undefined? not defined? since the variable isn't initialized to something it's giving us undefined. By this we can conclude that forEach doesn't return anything to us
Let's look at maps
The same code I changed it to maps, look what the output is, we got an array since map returns an array.
AMAZING FACTS
When accessing the forEach and map method, there is actually a second parameter which is index, it not quite used but it's good to know
The screenshot can be confusing since I had to show both arrow function and also normal function, but observe how I was able to access the index value and print it. You can name it anything not only index
I think this should conclude the description about forEach and map. Let me remind you again, though forEach and map are similar, use the right one depending on the situation. forEach doesn't return a brand new array while map returns an array
Filter
Taking any framework in JS, you might see filter occurring as much as map or forEach.
- Suppose you have an array and you only want a fresh array that has only the values that are 0 or over 0, how do we do that with the old school for loop? lets see.
- Wanna be amazed by the filter method now?
Using arrow function or no is completely your choice, but I would say using arrow function would be better thanks to the clear syntax.
You can also do this filter methods on objects
Suppose you have an array of objects (books) and you only want the books that cost less than 10$, lets see how we can implement that.
- Well seriously its that simple.
find & findIndex
Find and FindIndex can be very similar, also similar to how you would normally use them with primitive data types. Lets find out how it works with objects.
Suppose you have a array of books(objects), You want to find a book with particular id, how do we do that? You can do them iterating through the entire array and compare each object's id? Yepp thats about it, so lets see how we do that using array methods and for loop
So that how we do it using for loop, we iterate through the entire loop, when we find object we return it back. Same goes for findIndex as well
Let's see how we do it using array methods
Not you can't do something like Array.find(object)
since objects are compared with hash code and not how the structure and values look like.
With this I think we can wrap up the topic:) .
I hope you got a better understanding about this topic.
Let me know what other article you want me to write in the comments below. Peace.
Top comments (0)