Photo by Ben White on Unsplash

Functional programming can be challenging for people who start their software journey with a non-functional language. I know that was my experience. I learned to code using C# and while you can do some functional stuff with C#, most getting started books and tutorials do not cover working with the language in a functional manner or teach you how to think functionally.

JavaScript is a language that skirts the line between being object-based and function-based and it can be used with great effect either way. It’s also possible to use the two approaches in conjunction with one another. That being the case, we’ll use JavaScript in this post to provide a gentle introduction to some functional programming concepts.

I suspect that most programmers coming from a non-functional language will struggle with the same concepts I struggled with when I was getting started. These are:

Functions are objects and can be passed around like any other object. Functions can have their own properties and methods. They’re just objects after all. Functions can return other functions. Functions can take functions as arguments.

This is by no means a definitive list but I can remember scratching my head while reading about these concepts. Let's take a look at these.

Items 1 and 2 go hand in hand. In JavaScript, functions are first-class objects so it makes sense that they can have their own properties and methods. In fact, functions in JavaScript come out of the box with their own default methods and properties.

You may have heard of some of them: call(), apply(), bind(), toString(). Every function in JavaScript has these methods. For a full list of properties and methods attached to each function object, check out the MDN docs here.

When first using these methods, it feels and looks a bit weird. Let’s look at a code example.

In this code, we create a simple object on lines 1–3 with a message property. Then on line 5, we define a simple function called printIt().

Just by the act of defining this function we now have a complete Function object.

Finally, on line 9 we use object dot notation to execute the call() method on the printIt() function passing myObj as the object to be used as the function context. What this means is that we are setting what this points to within the function. Here is what we get in the console:

The output from printIt()

Granted, this is not the most practical example but the point to keep in mind is that functions in JavaScript are objects and they have their own methods and properties. It can be challenging to get this point to stick in your grey matter (I know it was for me) so I feel like this point can't be stressed enough.

Now let's move on and take a look at functions that take other functions as arguments and functions that return functions. Functions that do these kinds of things are known as higher-order functions.

Let's start with a simple example.

In this code, we first define 4 functions using text that is similar to lambda notation. Writing the functions this way is not superior to the more formal method but it does save us a bunch of keystrokes. The curly braces and the return statement are implicit when using this syntax. Each function accepts 2 arguments and returns the result of a simple math operation.

Next, on line 6, we define a function called execute() that accepts 3 params. 2 numbers and a function. Inside the function, we take advantage of the toString() method that is available on all function objects and write the actual text of the function to the console. We then execute the passed-in function using the passed params writing the result to the console. Here are the results:

output from our execute() method

So far, so good. Next, let's look at how we can start thinking more functionally. Look at this code.

First, we define an array of pets. Each pet has a name and a type property. We then define the printPets() function. This function takes an array and a petType (dog or cat) as arguments. We then loop over the array, checking the type property of each object to see if it matches the passed petType. If it matches, we print the pets name to the console.

There is nothing wrong with this code. It runs and works as expected. The function call on line 22 to printPets will print only the pets that are of type dog.

Let’s rewrite this code so that it's more functional.

We start by defining the same array. All good. Next, we have the printPets() function again only this time it takes different arguments. The pets array, a filter function, and a printer function.

The filter functions are defined on lines 24 and 25. We’re using the lambda notation again which allows us to create a predicate that tells us if we have the right kind of pet.

The beauty of this approach is that we can define as many filters as we like and filter the data in any way. Our demo Pet objects only have two properties but what if the object you’re working with has 10 or 20 properties? It would be trivial to write as many filter functions as you like and just pass then as parameters. In the previous imperative version of the code, we would have to go into the looping code and modify it to meet our needs. This is easier and more elegant.

We also pull the printing code out of the loop and put it in its own function. Now we can pass a printing function that does whatever we want. Write to the console, a log, pop an alert, etc.

The behavior is easily modified by passing a function rather than writing it in our loop.

You may have also noticed that we replaced our imperative for loop with array.forEach(). Another step toward more functional code and one you can take advantage of now in your JavaScript. Start moving away from for loops whenever you can. It will improve your code.

If you take some time and study the functional version of the code vs. the first version I think you will find it to be more elegant, more extendable and more reusable. All good things that we’re always striving for in software development.

We are just scratching the surface in terms of what we can do. There are a ton of resources out there to help you move along in your functional journey.

here are a couple of links

http://reactivex.io/learnrx/

Thanks for reading!