Today, JavaScript is one of the most popular programming languages. Over time it has evolved and allowed to us build rich web applications and from a few years ago server applications also. However, writing code in JavaScript requires some attention, since the code could turn very messy easily. Functional Programming does not solve this problem at all, it is more an paradigm of writing code. It doesn’t tell you how do you structure your project as the popular frameworks like Angular or Vue.js.

This article is only about Functional Programming, I hope in the future to bring other articles about JavaScript and JavaScript Frameworks.

Now, let’s see some application of functional programming on JavaScript.

Considering the variable products that contains the properties name and cost:

var products = [
 {
  name: 'Juice',
  cost: 4.2
 },
 {
  name: 'Rice',
  cost: 2
 },
 {
  name: 'Cookies',
  cost: 11.99
 }
];

To print the description of all products on browser console we can build an function like this:

function logProducts(products){
 for (var i = 0; i < products.length; i++){
  console.log('product: ' + products[i].name);
 }
}

This function makes an interaction through the list of products with for instruction to show the description of each product.

We can also specify the same behaviour with the follow function:

var logProducts = function(products){
 for (var i = 0; i < products.length; i++){
  console.log('product:' + products[i].name);
 }
}

The difference now is that we haver an variable that contain an function (logProducts).

Let’s get more advantage from functions associated to variables:


var logProducts = function(products){
 for (var i = 0; i < products.length; i++){
  console.log('product: ' + products[i].name);
 }
}

var doSomethingWithProducts = function(products, doSomething){
 doSomething(products);
}

//execute
doSomethingWithProducts(products, logProducts);

The code was changed a little. Yet, Even in terms of behaviour nothing changes. The main difference is on pass of the function “logProducts” as a parameter to “doSomethingWithProducts”. It doesn’t look very useful at the moment, but is this functionality that allows to JavaScript apply the principals of functional programming.

To show the name of all products we had to create a for instruction and a variable to control the iteration (based on imperative programming).
However, if we use the forEach function we can simplify the code:

var logProductName = function(product){
 console.log('product: ' + product.name);
}

products.forEach(logProductName);

Now we can see some advantages. The code is more clean and we do not need an auxiliary variable to iterate through the products.

And if we want to get the total cost of the products?

var sum = function(a, b) {
 return a + b.cost;
}

var total = products.reduce(sum, 0);

The reduce function returns only one value. The return is the accumulated result of the last call of the function “sum”.

Using other example, imagine that we need to get the element object for each identifier.
Let’s take a look on the follow code using imperative programming:

var ids = ['products','basket','categories'];

var listOfElements = [];
for (var i = 0; i < ids.length; i++){
 var el = document.getElementById(ids[i]);
 listOfElements.push(el);
}

Now the same behaviour using Map function:

var getElement = function(id){
 return document.getElementById(id);
}

var listOfElements = ids.map(getElement);

This “way” of programming requires some practice but in my opinion it allows to have more clean code and more adapted to the functionality that as consequence is more comprehensive.

This article was an little introduction to functional programming using the ForEach, Reduce and Map functions.

One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s