Many web developers may agree that JavaScript is one of the most advantageous functions that have the ability to build complex functionality through small, easy to understand individual functions. Even though, you may need to look at a problem backwards instead of forwards in order to find out the most beautiful solution. For instance, you can learn from these three functions that present better ways to building block maintain code.
Imperative Composition
It might be convenient to define a new function that automatically applied first one and then the other of the smaller functions, if you wanted to perform the same sequence of operations which as a result might look like this:
// …previous function definitions from above
function addOneTimesTwo(x) {
var holder = x;
holder = addOne(holder);
holder = timesTwo(holder);
return holder;
}
console.log(addOneTimesTwo(3)); //8
console.log(addOneTimesTwo(4)); //10
This case shows that there are two functions that are composed together in a particular order. A new function is created which first assigns the value being passed to a holder variable, then updates the value of that variable by executing the first function, and finally returns the value of that holder as its second function.
Another new function is provided in the opposite order to apply these two smaller functions, such as follows:
// …previous function definitions from above
function timesTwoAddOne(x) {
var holder = x;
holder = timesTwo(holder);
holder = addOne(holder);
return holder;
}
console.log(timesTwoAddOne(3)); //7
console.log(timesTwoAddOne(4)); //9
I know that the code is like it is repetitive, the difference is in which the two smaller functions they call are executed. Also, using temporary variables that change their value like this isn’t very functional, even if it is being hidden inside of the composed functions we’re creating.
Nesting Functions
To perform each of the sub functions in a logical sequence on whatever data you pass in, you can do composition technique. It is a technique which allows two or more simple functions to blend into a single and more complex function.
You need to nest one function inside the other, and perform the operation of the outer function of the inner function repeatedly until you produce a result. The result is terribly dependent on the order in which the functions are applied which can easily be demonstrated using familiar programming techniques by passing a function call as an argument to another function:
function addOne(x) {
return x + 1;
}
function timesTwo(x) {
return x * 2;
}
console.log(addOne(timesTwo(3))); //7
console.log(timesTwo(addOne(3))); //8
In the above code, we defined a function addOne() to add one to a value, and a timesTwo() function that multiplies a value by two. We can see how nesting one of these inside the other can produce different results, even with the same initial value by passing the result of one function in as the argument for the other function. The inner function is performed first, and then the result is passed to the outer function.
Creating a Functional Compose
There are two choices that you can select in order to create a functional compose, either to be executed from left to right or right to left, but we strongly suggest to execute from left to right, since it will be easier for you to read it as it has the same way that English reads. However, create a function from left to right is that the values to be operated upon would have to come first while putting the values first makes it less convenient to compose the resulting function with other functions in the future. The below example is presented to make the explanation becomes clearer.
function compose(f1, f2) {
return function(value) {
return f1(f2(value));
};
}
The following function uses a very simple compose function which we use our previous complex functions as an example and make it more simple, such as follow:
function addOne(x) {
return x + 1;
}
function timesTwo(x) {
return x * 2;
}
function compose(f1, f2) {
return function(value) {
return f1(f2(value));
};
}
var addOneTimesTwo = compose(timesTwo, addOne);
console.log(addOneTimesTwo(3)); //8
console.log(addOneTimesTwo(4)); //10
var timesTwoAddOne = compose(addOne, timesTwo);
console.log(timesTwoAddOne(3)); //7
console.log(timesTwoAddOne(4)); //9
We hope that after presenting the above functions, you will find easier ways to create code which has fewer bugs.