A Gentle Introduction to Functional JavaScript: Part 1

Written by James Sinclair
on the 29th January 2016

This is part one of a threefour-part series introducing ‘functional’ programming in JavaScript. In this article we take a look at the building blocks that make JavaScript a ‘functional’ language, and examine why that might be useful.

What the Func?

What is all the hype about Functional JavaScript? And why is it called functional? It’s not as though anyone sets out to write dysfunctional or non-functioning Javascript. What is it good for? Why would you bother?

You’ll start telling all your friends and family about it how awesome it is; and

They start to wonder if you’ve joined some kind of cult.

But, it does make certain tasks a whole lot easier. It can even automate certain things that would otherwise be fairly tedious and time-consuming.

Building Blocks

Let’s start with some of the basic features of JavaScript that make ‘functional’ programming possible, before we move on to why it’s a good idea. In JavaScript we have two key building blocks: variables and functions. Variables are sort-of like containers that we can put things in. You can create one like so:

var myContainer = "Hey everybody! Come see how good I look!";

That creates a container called myContainer and sticks a string in it.

Now, a function, on the other hand, is a way to bundle up some instructions so you can use them again, or just keep things organised so you’re not trying to think about everything all at once. One can create a function like so:

Let’s look at this carefully. When we write the function definition this way, it looks like we’ve created a variable called log and stuck a function in it. And that’s exactly what we have done. Our log() function is a variable; which means that we can do the same things with it that we can do with other variables.

Let’s try it out. Could we, maybe, pass a function as a parameter to another function?

Now, this might not be terribly exciting to you, but it gets computer scientists quite fired up. This ability to put functions into variables is sometimes described by saying “functions are first class objects in JavaScript.” What that means is just that functions (mostly) aren’t treated differently to other data types like objects or strings. And this one little feature is surprisingly powerful. To understand why though, we need to talk about DRY code.

Don’t Repeat Yourself

Programmers like to talk about the DRY principle—Don’t Repeat Yourself. The idea is that if you need to do the same set of tasks many times, bundle them up into some sort of re-usable package (like a function). This way, if you ever need to tweak that set of tasks, you can do it in just one spot.

Let’s look at an example. Say we wanted to put three carousels on a page using a carousel library (an imaginary library for the sake of example):

This code is somewhat repetitive. We want to initialise a carousel for the elements on the page, each one with a specific ID. So, let’s describe how to initialise a carousel in a function, and then call that function for each ID.

This code is clearer and easier to maintain. And we have a pattern to follow: when we have the same set of actions we want to take on different sets of data, we can wrap those actions up in a function. But what about if we have a pattern where the action changes?

This code is a little bit trickier to refactor. There is definitely a repeated pattern, but we’re calling a different function for each element. We could get part of the way there by wrapping the document.getElementById() call and adding the className up into a function. That would save us a little bit of repetition:

This is much more concise. And easier to maintain. The ability to pass functions around as variables opens up a lot of possibilities. In the next part we’ll look at using this ability to make working with arrays more pleasant.