DEV Community

Cover image for Array Methods in JS
Chase
Chase

Posted on

Array Methods in JS

My name is Chase and I am new Software Engineering student this blog is going to be about the interesting utilities of the forEach(), map(), reduce(), filter() methods that javascript offers. Starting with, the forEach() method for those who are new to Javascript the forEach() method is used to iterate through array and for each element of the array it executes a provided function. The forEach method once started looping through can not be broken unless it runs into an error. Another interesting fact about the method is that the forEach() method is the fastest method out of the main 4, which is (reduce(), filter(), forEach(), map()). Also, the forEach() will always return undefined.

let arr = [2,4,6,8];
arr.forEach(num, i] => ({
  if(num === 2){
    return i; >>> undefined
})
Enter fullscreen mode Exit fullscreen mode

the next method I want to speak about is the map() method now like the forEach() method the map method is very similar in what they do. They both will loop through an array and execute the passed in function but the difference lays within the results. the map() method will return the results as a completely new array. Which would look something like this...

let arr = [1,2,3,4,5];
let map = arr.map(x => x + 1);

console.log(arr); >>> [1,2,3,4,5]
console.log(map); >>> [2,3,4,5,6]
Enter fullscreen mode Exit fullscreen mode

Continuing on the next method example I want to speak about is the reduce() method. In my opinion the reduce() method has been the most difficult method to fully grasp. Even now as I am typing this I still don't fully understand everything there is to know about reduce(). What I do know is that the reduce() method is used to reduce an array down to just a single value. Weird I know, but this can be useful in instances like wanting to find the average within a given array or to remove duplicates in an array. The reduce() method will take in an accumulator and an initial value as its parameters.

filter() method is next on the list. The filter() method does exactly what is sounds like. It filters through an array and grabs whichever elements within pass the test of the provided functions parameters. the filter() method takes in a callBackFn as a parameter which will contain which ever test you are wanting the array to pass.
filter(callBackFn)
The filter array method works especially well whenever you need to search through a list of data such as, a company directory and find something specific, the filter method will loop through and find the items that match the data you presented.

My opinion on my most used vs least used
Throughout my learning so far as a student. The method that I find myself using the most would be the forEach() as it makes making repetitive processes within building websites much easier to do. Like, when you want to make multiple cards that display the same information on a page the forEach() method is perfect. The method I never find myself using so far would be the reduce() method. As I have still not made myself very confident it implementing it within my code. That doesn't mean there isn't a use for it, as I stated before 2 very good examples of when it would be best to use it, I just haven't found myself in the position of needing it yet is all. another method that I don't find myself using very often is the map() method. I haven't done many projects yet that are in need for me to use this method although it does have its uses I just have not found them at this time either. The filter method however, is very useful whenever making a search bar for your application I find having it search through API data for usernames comes in very handy.

I hope you enjoyed this little read about my thought process on array methods that I have worked with thus far in my learning journey. I will keep this blog updated with future learning that I will go through.

Top comments (0)