Array methods in JavaScript

JavaScript
1

Dear Campers:
I came across these array methods in a YouTube tutorial. The Creator of the video was explaining the usage of the following methods.

filter , map, reduce, forEach, every, any, find et cetera.

According to him, these are the must-know array methods for any developer (sic).
However, what caught my attention was his usage of this symbol:

=>

as I illustrate below:

     var myArray = [ 2, 4, 6, 3, 7, 10, 20 ]
     var newArray = myArray.filter ((myElement) => 
        { return myElement >= 5 })
           
      console.log (newArray) 
      //Expected to log [ 6, 7, 10, 20] on the console

My understanding is that the

myArray.filter( )

Method takes a function as an Argument but what sort of function are we passing as the Method Argument if I am right?
And the

=>

Operator (I’m not very sure whether it’s an Operator or not), what exactly does it do?

I am more interested in knowing more about this group of Array Methods. Could someone please explain to me or point me to an online resource which explains them.

2

That is part or ES6, a fat arrow function. It is another way to write a function. It works very similarly to the function you know, but there are a few subtle differences.

You could rewrite it as:

var newArray = myArray.filter (function(myElement) { return myElement >= 5 })

They do the same thing.

Lookup javascript arrow functions. There will be a lot of discussion.

1 Like
3

I found best resources to learn in detail is MDN.
its called arrow function expression =>

let arr = [ 2, 4, 6, 3, 7, 10, 20 ];
	 const output = arr.filter(myElement => myElement >= 5);
 console.log(output);
1 Like
4

Those are lambda expressions, anon functions with the arrow syntax.

You could also put the direct name of a function or method reference in there and it will do the same.

xs.map(Math.sqrt) // same as
xs.map((x, i, xs) => Math.sqrt(x))

For as long as the function signatures partially or completely match. Also, in the big 4 of array iterator methods, these lambdas or callbacks have defined names by the functional programming community:

  • Map
    • Mapper
      (a) -> b or (item) -> replacedWith
      Transforms a given value into another one
    • Supplier
      () -> a or () -> any
      Returns any constant value and doesn’t take arguments
  • Filter
    • Predicate
      (a) -> Boolean or (
      Tests a value against an assertion
  • ForEach
    • Action
      (a) -> Eff () | Void | b or (item) -> undefined | any
      () -> Eff () | Void | b or () -> undefined | any
      May or may not (but almost always) receive an argument and may or may not perform an action or a side-effect with it (like logging, storing or displaying) and may or may not return anything of any type but such value will be ignored and garbage-collected.
  • Reduce
    • Reducer
      (a, b) -> a or (acc, item) -> newAcc
      The argument a stands for “any type of value that acts as an accumulator” and b is the type of value received from each element in the list. The type of the accumulator is determined by either a specified value or the first element in the list.

There’s also the “find” function which in lazy languages can be defined in terms of filter, which means it won’t apply the predicate to all the elements, only the first one, and here’s proof of that in Haskell:

findIt :: (a -> Bool) -> [a] -> a
findIt predicate = head . filter predicate

findIt (> 4) [1..] /* This function returns 5
-- Because it creates a lazy infinite sequence from 1 to infinity
-- but only takes the first one after applying the
-- predicate to a number and it happens to return True. */

And there’s also the concept of streams (like in Java 8> or Elixir) and the concept of transducers (RamdaJS, Clojure) that allow you to compose these functions without creating intermediate collections which can significantly reduce your performance.