DEV Community

loading...
Cover image for Behind Higher-Order Functions with the Execution Context

Behind Higher-Order Functions with the Execution Context

Damon Marc Rocha II
Hi, my name is Damon Rocha. I am a flatiron software engineering graduate. I have been coding for 4 years now.
・3 min read

When I first learned the concept of Higher-order functions in JavaScript I used them and then moved on to the next item. This was a major mistake; the flexibility JS offers you in Higher-Order Functions allows for highly reusable code. So in this article, I am going to give a brief explanation of JavaScript's Execution context and then use this to show how Higher-Order Functions work behind the scenes

Execution Context

An execution context is described as the environment in which javascript code gets executed. The global space is a large execution context that is destroyed at the end of the program. To illustrate this I will cover the execution context of this function:

let multiplyArrayByTwo = (array) => {
    let newAry = []
    for(let i = 0; i < array.length; i++){
        newAry.push(array[i]*2)
    } 
    return newAry
}
let ary = [1,2,3,4,5,6]
let doubledAry = multiplyArrayByTwo(ary)
Enter fullscreen mode Exit fullscreen mode

At the beginning of this program, multiplyArrayByTwo is set equal to the function definition that precedes it, and then ary is initialized and defined as an array of integers.

Alt Text

Then once we reach doubleAry something different happens. DoubleAry is equated to the result of multiplyByTwo with ary as its parameter. So with this, a new Execution context is created.

Alt Text

Then the function is pushed to the call stack, the array argument is set equal to ary, and newAry is defined and initialized as an empty array.

Alt Text

Once all of this is in order the function then executes the for loop, which does not get its own execution context. During this action, the items of array are doubled then pushed into newAry

Alt Text

Now that our function has doubled the array it then returns the newArray

Alt Text

This then defines doubledAry as the returned value, pops multiplyArrayByTwo off the call stack, and destroys the execution context along with anything inside of it.

Alt Text

So the above example is not bad but with Higher-Order Functions we can do much better

Higher-Order Functions

let modifyArray = (array, modification) => {
    let newAry = []
    for(let i = 0; i < array.length; i++){
        newAry.push(modification(array)
    }
    return newAry
}
let ary = [1,2,3,4,5,6]
let squareItem = num => num**2
let squaredArray = modifyArray(ary, squareItem)
Enter fullscreen mode Exit fullscreen mode

Like we began in the previous example we set up the preliminary items by setting modifyArray equal to its function definition, setting array equal to an array of integers, and defining the function squareItem.

Alt Text

Then we reach squaredArray and on inspection of squaredArray's definition, there is a function call to modifyArray with ary and squareItem as arguments; thus creating a new EXECUTION CONTEXT. The function is then pushed onto the call stack and its variables are initialized.

Alt Text

Now, this is where the magic of Higher-Order Functions comes in. As most of you already could tell this function is way more useful than the previous. It can modify any array with any function you pass in as an argument. With that said let's examine this in another EXECUTION CONTEXT. Once we reach the for loop, modify is called on each item in the array and then pushed onto newAry. So modify is being pushed and popped off the call stack until the end of the for loop and returning the new value each time.

Alt Text

Once the end of the for loop is reached the value in newAry is returned to squaredArray, modifyArray is pushed off the call stack, and only the global execution context remains.

Alt Text

Now if you really look at the function we examined above it should look familiar to many of you. It is just a basic map function. Higher-Order Functions can make your code much more flexible and can easily replace multiple functions with just a few tweaks to the code. This design was not my idea and I attribute it to the instructors at frontendmasters.com Thanks for reading I hope this helps.

Discussion (0)