DEV Community

Cover image for Higher Order Functions
Crystal C
Crystal C

Posted on

Higher Order Functions

I've been flirting with programming for a long time. Always giving it a little bit of my time, but unable to ever fully commit. Recently I decided to take the plunge. I quit my job of 11 years and went right to Bootcamp. While most concepts have come fairly easy to me, one particular concept was fast becoming a thorn in my side. Higher order functions. I hear how easy they are and how they make your job as a programmer so much faster. For some reason, I was struggling to wrap my head around it. Until I had my Aha! moment.

The first thing I struggled with was how do I know what to put where. My bootcamp does a good job showing us what higher order functions are and how they work. In fact, we had to write code for underscore as part of our curriculum.

/** _.map
* Arguments:
*   1) A collection
*   2) a function
* Objectives:
*   1) call <function> for each element in <collection> passing the arguments:
*        if <collection> is an array:
*            the element, it's index, <collection>
*        if <collection> is an object:
*            the value, it's key, <collection>
*   2) save the return value of each <function> call in a new array
*   3) return the new array
* Examples:
*   _.map([1,2,3,4], function(e){return e * 2}) -> [2,4,6,8]
*/

_.map = function(coll, func) {
    let result = [];
    if (Array.isArray(coll)){  
        for (let i = 0; i <= coll.length - 1; i++){  
            let value = func(coll[i], i , coll);
            result.push(value);
        }
    } else {
        for (let key in coll) {
            let value = func(coll[key], key , coll);
            result.push(value)
        }
    }
    return result
}

Enter fullscreen mode Exit fullscreen mode

This didn't help me understand though. My brain was struggling with the concept of where does everything go and how does the computer know what to do with it? Then it was explained to me that, it's like a for loop except it's written for you already. This was confusing to me because how do I translate the guts of my for loop to the function call of the higher order function? Is there an easy way to explain what the main ones do?

//how does this?

let someArray = [1, 2, 3, 4, 5]

let newArray = []

for (let i = 0; i < someArray.length; i++){
    newArray.push(someArray[i] + 1)
} 

//result newArray = [2, 3, 4, 5, 6]



//translate to this?

let addOne = _.map(someArray, (x) => x + 1)

//result addOne = [2, 3, 4, 5, 6]
Enter fullscreen mode Exit fullscreen mode

It does seem so simple. Writing map is less words to type and less things to think about. But how does my for loop guts translate to the function call? How can every one understand it but me? Then I had my Aha! moment. The thing that made them click in my head.

Image description
Map pushes into a new array for you. You don't need that part in your higher order function call. i is equal to the parameter that you use in map. Then the rest of the function is everything you want called on i.

There is also the matter of how do I keep track of what higher order function does what. The descriptions of the three main higher order functions that stuck with me are:

  • *map *= It helps change each thing in a list to something else and gives you a new list with those changes.

  • *reduce *= It takes lots of things and makes them into one thing by using a special rule you pick.

  • *filter *= It picks only the things you want from a big group and makes a new group with just those things.

I hope that walking through the concept here helps another newbie programmer like myself. Maybe this can help another struggling starter have their Aha! moment. I'm still learning and still currently enrolled in BootCamp. If you happen to make it this far and this has helped you, keep pushing. You got this!

Top comments (0)