A Gentle Introduction to Functional JavaScript: Part 1

Written by James Sinclair on the 29th January 2016

This is part one of a four-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?

To me, learning functional programming is a little bit like getting a Thermomix:

  • It takes a bit of up-front investment;
  • 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:

function log(someVariable) {
    console.log(someVariable);
    return someVariable;
}

And you can call a function like this:

log(myContainer);
// Hey everybody! Come see how good I look!

But, the thing is, if you’ve seen much JavaScript before, then you’ll know that we could also write and call our function like this:

var log = function(someVariable) {
    console.log(someVariable);
    return someVariable;
}

log(myContainer);
// Hey everybody! Come see how good I look!

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?

var classyMessage = function() {
    return "Stay classy San Diego!";
}

log(classyMessage);
// [Function]

Hmmmm. Not super useful. Let’s try it a different way.

var doSomething = function(thing) {
    thing();
}

var sayBigDeal = function() {
    var message = "I’m kind of a big deal";
    log(message);
}

doSomething(sayBigDeal);
// I'm kind of a big deal

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.

Read more @ James Sinclair