The power of JavaScript Functions

JavaScript is a miraculous language. It takes programming to a whole new level of ingenuity and creativity. Part of the reason it does this is through it’s unique usage of functions. Unlike most languages functions can be treated as data and passed around from place to place while maintaining it’s own unique scope.

function multiply(n) {
var variable = n;
return function(x) { return variable * x; };
}
var double = multiply(2);
var triple = multiply(3);
console.log(double(3)); //prints 6
console.log(triple(3)); //prints 9

Lambdas

The above example illustrates one of the powers of JavaScript functions. The multiply function keeps track of the variable n and returns a new function that can be called later but still access that same function. The function being returned from multiply is known as a lambda. A lambda is a function that is treated as data. It can be used as parameter for another function, the return value of a function like the above example, or in any other way that a expression can be used.

Higher Order Functions

Functions that operate on these lambdas are called higher order functions. They either receive lambdas as parameters or return them. Higher Order Functions can be very powerful to ensure code readability and code reuse. Consider the code that follows:

var values = [1,2,3];
for(var i = 0; i < values.length; i++){
console.log(Math.pow(values[i],2));
}
//Prints 1 4 9

The example loops through the array of values and prints out the square of each number. Although this example of array traversal is easy to read, when other calculations are included within the for loop it can get much more difficult to read. Consider the following code that does the same thing using the higher order function forEach:

var values = [1,2,3];
values.forEach(function(element){
console.log(Math.pow(element,2));
});
//Prints 1 4 9

The forEach call handles the array traversal and applies the lambda function that we pass in as the first argument. In the above example the lambda only includes one parameter which is each element of the array. The signature of this lambda can also include the index of the element and the whole array like so:

var values = [1,2,3];
values.forEach(function(element,index,array){
console.log("Index " + index + " is " + element);
});
//Prints "Index 0 is 1"
// "Index 1 is 2"
// "Index 2 is 3"

Map

Another higher order function provided for arrays is called Map. Map applies a function to each element of an array and returns the new values in a new array.

var values = [1,2,3];
var mapped = values.map(function(element){
return element * 100;
});
console.log(mapped);
//Prints [100,200,300]

Filter

Arrays also include a function called Filter. Filter returns an array including only the values that pass some sort of boolean expression.

var values = [1,2,3,4,5,6,7,8,9,10];
var filtered = values.filter(function(element){
return element > 5;
});
console.log(filtered);
//Prints [6,7,8,9,10]

Reduce

Reduce is a higher order function that takes the elements of an array and applies some function to each element and returns the accumulated value.

var values = [1,2,3,4];
var start = 1;
var reduced = values.reduce(function(a,b){
return a * b;
},start);
console.log(reduced);
//Prints 24

In the above example the reduce function starts with the value 1 and multiplies it by each element of the array and returns 24.

In conclusion these functions can be used together to do many common calculations on arrays without sacrificing code readability. Higher order functions and lambdas are powerful ways to manipulate data and maintain code reuse.

Show your support

Clapping shows how much you appreciated Zack Porter’s story.