Check out a free preview of the full Enterprise Architecture Patterns course

The "Higher Order Functions" Lesson is part of the full, Enterprise Architecture Patterns course featured in this preview video. Here's what you'd learn in this lesson:

Lukas demonstrates why higher order functions like forEach more succinctly iterate over collections of data. Other useful higher order functions are filter, map, and reduce.

Preview
Close

Transcript from the "Higher Order Functions" Lesson

[00:00:00]
>> For the fourth and final element of our Kung Fu, saga, collections and iterators. And so just before I get started in this, I just want to make sure that we understand when we talk about iterators is that we have more than one thing and we need to perform some action on that collection of things.

[00:00:27]
Now in JavaScript, and I would say almost every other language that I've ever worked with, you have kind of this classic for loop. And I hate this particular programming mechanism. The reason being is you are creating a mechanism that is iterating over an object that has no reference or knowledge to the object that it is iterating over.

[00:01:05]
In other words is you're kind of measuring this object if you will. So it's like, okay, I'm gonna start at zero and I'm gonna go to clients. How many do you have? Okay. 10. I'm gonna keep going over and it each iteration, I'm gonna have to ask the clients or right like, hey, I'm in position number two, what client are you and you're constantly having to reference via array notation.

[00:01:32]
The particular element that you're at in that particular iteration. And to me, it seems incredibly clunky that you're iterating over something and yet you have no knowledge of the thing that you're iterating over versus let me show you a higher order function. In JavaScript for each. So this is an example of a higher order function, that you have a client's collection.

[00:02:09]
And instead of delegating the iteration of that collection to something else you're allowing the array to handle that in iterate over itself, and not only is it able to iterate over itself, but it's able to keep track of whatever item it's on because it knows what it is, because It is controlling itself.

[00:02:37]
So I look at this and I can think of only one reason I've only ever seen one reason in, I don't know, the six or seven years that have elapsed or transpired since I started moving to ES6. And it's if you need to do In iteration where you need to loop for a specific length, so like I need to have 100 iterations of something and then I need to fill or need to push items into an array and it's a very specific number that you need to iterate.

[00:03:12]
You cannot use hydro higher order functions for that. But for everything else higher order functions. So my three favourite ones outside of for each is filter, map and reduce. And so we've kind of hinted at these through the workshop but all the filter does is say, I wanna take this array, I wanna loop over and I wanna return everything that matches this condition.

[00:03:43]
A map allows you to loop over a collection and perform some kind of logical operation on that collection. Reduce what this does Is it takes the current state or the accumulated state and then the current value and it is simply, or it's simply performs a logical operation or performs a specific logical operation until you get to the end.

[00:04:17]
And then it would turn into a final reduced value for that operation. So what you're doing is you're taking all these elements and you're reducing them into a single value. Ironically, this is very close to how the reducer works in Redux.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now