On JavaScript Closures

A function that returns a child function in which child function still has access to the properties / declarations of the parent function, even after the execution of the parent function is usually referred to as a Closure. For example,

According to the above example, even after the execution of ‘square’ function, the returning child function has access to the value of ‘x’. Here under we examine how this is possible.

Like in many other languages limits the existence of a variable within a code block, JavaScript variables exist within a function block. For example,

Here we first prints the value of ‘result’ variable and then refer the value of ‘x’ variable to initialize the value of ‘result’ variable. But, under the hood of JavaScript engine it moves variable declarations to the top of the function block. Which is know as hoisting. This somewhat ensures the declaration of variables within a function block before those are used.

One the hoisting is done, previous code block would looks like above.

For each execution of a function block a data structure called Lexical Environment (environment) is created. Each environment is stacked based on the execution context and it holds the outer environment / environment of the parent’s execution context and references to the values declared in the current execution context.

If we consider the above example where we have ‘square’ function declared in the global scope in which that function returns an object containing a function called ‘calc’. The environment stack would looks like below,

Likewise, every execution context has it’s own environment where it holds references to the values of the properties. This is also referred to as scope. Since environment could trace it’s parent scope’s environment, it could access references of the parent scope’s properties. This lay down the foundation of the JavaScript Closures.

References:

Rock on!!!

Rest Parameters Curry

According to Wikipedia, Currying is the technique of translating the evaluation of a function that takes multiple arguments into evaluating a sequence of functions, each with a single argument. Simply, if a function takes three arguments and is curried, it is really three functions. Each function takes one argument and return a new function that takes the next argument until all arguments are received, then it returns the final result.

Consider a function that takes three arguments:

1

The equivalent curried function:

2

This is somewhat insane! returning nested functions as function takes more and more arguments. One option is to convert a normal function into a curried function, which is what mainly this article focuses here onward.

When converting a normal function into a curried function, it is required to know how many arguments the function is expecting. Functions have a length property in JavaScript and it can be used in here. Although the main intention here is to demonstrate how ES6 Rest Parameters can be used when creating generic curry function.

In concise, a Rest Parameter allows a function to receive a variable number of arguments and more details on this can be found in MDN: Rest Parameters.

3

The first time this function is called it only expects one argument, a function to  curry. The args parameter will probably be an empty array on first invocation. Save the number of arguments it expects (argLength) to a local variable. Then return a function we define inside the curry function. When this function is invoked it concatenate the new args2 array with the old args array and check if it has received all the arguments yet. If so, it apply the original function and return the result. If  not it recursively call the curry function, passing along all the new arguments which puts us back in the original position, returning the curried function to await more arguments.

With concepts like currying, it is much easier to abstract the logic and make clear and concise functions.

References:

  1. Currying on Wikipedia
  2. Rest parameters on MDN

Rock on!