Don’t Be Scared Of Functional Programming

Don’t Be Scared Of Functional Programming

• By Jonathon Morgan


• July 2nd, 2014


• CodingJavaScriptTechniques


• 7 Comments

Functional programming is a mustachioed hipster of programming paradigms. Originally relegated to a annals of mechanism scholarship academia, organic programming has had a new rebirth that is due mostly to a focus in distributed systems (and substantially also given “pure” organic languages like Haskell are formidable to grasp, that gives them a certain cache).

Stricter organic programming languages are typically used when a system’s opening and firmness are both vicious — i.e. your module needs to do accurately what we design any time and needs to work in an sourroundings where a tasks can be common opposite hundreds or thousands of networked computers. Clojure¹, for example, powers Akamai², a vast calm smoothness network employed by companies such as Facebook, while Twitter famously adopted³Scala⁴ for a many performance-intensive components, and Haskell⁵ is used by ATT for a network confidence systems.

These languages have a high training hook for many front-end web developers; however, many some-more receptive languages incorporate facilities of organic programming, many particularly Python, both in a core library, with functions like map and reduce (which we’ll speak about in a bit), and with libraries such as Fn.py⁶, along with JavaScript, again regulating collection methods, though also with libraries such as Underscore.js⁷ and Bacon.js⁸.

Functional programming can be daunting, though remember that it isn’t usually for PhDs, information scientists and design astronauts. For many of us, a genuine advantage of adopting a organic character is that a programs can be damaged down into smaller, easier pieces that are both some-more arguable and easier to understand. If you’re a front-end developer operative with data, generally if you’re formatting that information for cognisance regulating D3, Raphael or a like, afterwards organic programming will be an essential arms in your arsenal.

Finding a unchanging clarification of organic programming is tough, and many of a novel relies on rather foresight statements like “functions as first-class objects,” and “eliminating side effects.” Just in box that doesn’t hook your mind into knots, during a some-more fanciful level, organic programming is mostly explained in terms of lambda calculus⁹ (some indeed argue¹⁰ that organic programming is fundamentally math) — though we can relax. From a some-more useful perspective, a amateur needs to know usually dual concepts in process to use it for bland applications (no calculus required!).

First, information in organic programs should be immutable, that sounds critical though usually means that it should never change. At first, this competence seem peculiar (after all, who needs a module that never changes anything?), though in practice, we would simply emanate new information structures instead of modifying ones that already exist. For example, if we need to manipulate some information in an array, afterwards you’d make a new array with a updated values, rather than correct a strange array. Easy!

Secondly, organic programs should be stateless, that fundamentally means they should perform any charge as if for a initial time, with no believe of what competence or competence not have happened progressing in a program’s execution (you competence contend that a stateless module is ignorant of a past¹¹). Combined with immutability, this helps us consider of any duty as if it were handling in a vacuum, blissfully ignorant of anything else in a focus besides other functions. In some-more petrify terms, this means that your functions will work usually on information upheld in as arguments and will never rest on outward values to perform their calculations.

Immutability and statelessness are core to organic programming and are critical to understand, though don’t worry if they don’t utterly make clarity yet. You’ll be informed with these beliefs by a finish of a article, and we guarantee that a beauty, pointing and energy of organic programming will spin your applications into bright, shiny, data-chomping rainbows. For now, start with elementary functions that lapse information (or other functions), and afterwards mix those elementary building blocks to perform some-more formidable tasks.

For example, let’s contend we have an API response:

var information = [
 
 name: "Jamestown",
 population: 2047,
 temperatures: [-34, 67, 101, 87]
 ,
 
 name: "Awesome Town",
 population: 3568,
 temperatures: [-3, 4, 9, 12]
 
 
 name: "Funky Town",
 population: 1000000,
 temperatures: [75, 75, 75, 75, 75]
 
];

If we wish to use a draft or graphing library to review a normal heat to race size, we’d need to write some JavaScript that creates a few changes to a information before it’s formatted rightly for a visualization. Our graphing library wants an array of x and y coordinates, like so:

[
 [x, y],
 [x, y]
 …etc
]

Here, x is a normal temperature, and y is a race size.

Without organic programming (or though regulating what’s called an “imperative” style), a module competence demeanour like this:

var coords = [],
 totalTemperature = 0,
 averageTemperature = 0;

for (var i=0; i data.length; i++) 
 totalTemperature = 0;
 
 for (var j=0; j data[i].temperatures.length; j++) 
 totalTemperature += data[i].temperatures[j];
 

 averageTemperature = totalTemperature / data[i].temperatures.length;

 coords.push([averageTemperature, data[i].population]);

Even in a constructed example, this is already apropos formidable to follow. Let’s see if we can do better.

When programming in a organic style, you’re always looking for simple, repeatable actions that can be preoccupied out into a function. We can afterwards build some-more formidable facilities by job these functions in process (also famous as “composing” functions) — some-more on that in a second. In a meantime, let’s demeanour during a stairs we’d take in a routine of transforming a initial API response to a structure compulsory by a cognisance library. At a elementary level, we’ll perform a following actions on a data:

• add any series in a list,


• calculate an average,


• retrieve a singular skill from a list of objects.

We’ll write a duty for any of these 3 elementary actions, afterwards harmonise a module from those functions. Functional programming can be a small treacherous during first, and you’ll substantially be tempted to trip into aged indispensable habits. To equivocate that, here are some elementary belligerent manners to safeguard that you’re following best practices:

1. All of your functions contingency accept during slightest one argument.


2. All of your functions contingency lapse information or another function.


3. No loops!

OK, let’s supplement any series in a list. Remembering a rules, let’s make certain that a duty accepts an evidence (the array of numbers to add) and earnings some data.

function totalForArray(arr) 
 // supplement everything
 lapse total; 

So distant so good. But how are we going to entrance any intent in a list if we don’t loop over it? Say hello to your new friend, recursion! This is a bit tricky, though basically, when we use recursion, we emanate a duty that calls itself unless a specific condition has been met — in that case, a value is returned. Just looking during an instance is substantially easiest:

// Notice we're usurpation dual values, a list and a stream total
function totalForArray(currentTotal, arr) 
 
 currentTotal += arr[0]; 

 // Note to gifted JavaScript programmers, I'm not regulating Array.shift on 
 // purpose given we're treating arrays as if they are immutable.
 var remainingList = arr.slice(0,-1);

 // This duty calls itself with a residue of a list, and a 
 // stream value of a currentTotal variable
 if(remainingList.length 0) 
 lapse totalForArray(currentTotal, remainingList); 
 
 
 // Unless of march a list is empty, in that box we can usually return
 // a currentTotal value.
 else 
 lapse currentTotal;
 

A word of caution: Recursion will make your programs some-more readable, and it is essential to programming in a organic style. However, in some languages (including JavaScript), you’ll run into problems when your module creates a vast series of recursive calls in a singular operation (at a time of writing, “large” is about 10,000 calls in Chrome, 50,000 in Firefox and 11,000 in Node.js¹²). The sum are over a range of this article, though a crux is that, during slightest until ECMAScript 6 is released¹³, JavaScript doesn’t support something called “tail recursion¹⁴,” that is a some-more fit form of recursion. This is an modernized subject and won’t come adult unequivocally often, though it’s value knowing.

With that out of a way, remember that we indispensable to calculate a sum heat from an array of temperatures in process to afterwards calculate a average. Now, instead of looping over any intent in a temperatures array, we can simply write this:

var totalTemp = totalForArray(0, temperatures);

If you’re purist, we competence contend that a totalForArray duty could be damaged down even further. For example, a charge of adding dual numbers together will substantially come adult in other collection of your focus and subsequently should unequivocally be a possess function.

function addNumbers(a, b) 
 lapse a + b;

Now, a totalForArray duty looks like this:

function totalForArray(arr, currentTotal) 
 currentTotal = addNumbers(currentTotal + arr[0]);

 var remainingArr = arr.slice(0,-1);
 
 if(remainingArr.length 0) 
 lapse totalForArray(currentTotal, remainingArr);
 
 else 
 lapse currentTotal;
 

Excellent! Returning a singular value from an array is sincerely common in organic programming, so many so that it has a special name, “reduction,” that you’ll some-more ordinarily hear as a verb, like when we “reduce an array to a singular value.” JavaScript has a special process usually for behaving this common task. Mozilla Developer Network provides a full explanation¹⁵, though for a functions it’s as elementary as this:

// The revoke process takes a duty as a initial argument, and that duty 
// accepts both a stream intent in a list and a stream sum outcome from 
// whatever calculation you're performing.
var totalTemp = temperatures.reduce(function(previousValue, currentValue)
 // After this calculation is returned, a subsequent currentValue will be 
 // previousValue + currentValue, and a subsequent previousValue will be a 
 // subsequent intent in a array.
 lapse previousValue + currentValue;
);

But, hey, given we’ve already tangible an addNumber function, we can usually use that instead.

var totalTemp = temperatures.reduce(addNumbers);

In fact, given totalling adult an array is so cool, let’s put that into a possess duty so that we can use it again though carrying to remember all of that treacherous things about rebate and recursion.

function totalForArray(arr) 
 lapse arr.reduce(addNumbers);


var totalTemp = totalForArray(temperatures);

Ah, now that is some entertaining code! Just so we know, methods such as reduce are common in many organic programming languages. These supporter methods that perform actions on arrays in lieu of looping are mostly called “higher-order functions.”

Moving right along, a second charge we listed was calculating an average. This is flattering easy.

function average(total, count) 
 lapse count / total;

How competence we go about removing a normal for an whole array?

function averageForArray(arr) 
 lapse average(totalForArray(arr), arr.length);


var averageTemp = averageForArray(temperatures);

Hopefully, you’re starting to see how to mix functions to perform some-more formidable tasks. This is probable given we’re following a manners set out during a commencement of this essay — namely, that a functions contingency always accept arguments and lapse data. Pretty awesome.

Lastly, we wanted to collect a singular skill from an array of objects. Instead of display we some-more examples of recursion, I’ll cut to a follow and idea we in on another built-in JavaScript method: map¹⁶. This process is for when we have an array with one structure and need to map it to another structure, like so:

// The map process takes a singular argument, a stream intent in a list. Check
// out a integrate above for some-more finish examples.
var allTemperatures = data.map(function(item) 
 lapse item.temperatures;
);

That’s flattering cool, though pulling a singular skill from a collection of objects is something you’ll be doing all a time, so let’s make a duty usually for that.

// Pass in a name of a skill that you'd like to retrieve
function getItem(propertyName) 
 // Return a duty that retrieves that item, though don't govern a function.
 // We'll leave that adult to a process that is holding movement on equipment in a 
 // array.
 lapse function(item) 
 lapse item[propertyName];
 

Check it out: We’ve finished a duty that earnings a function! Now we can pass it to a map process like this:

var temperatures = data.map(getItem('temperature'));

In box we like details, a reason we can do this is because, in JavaScript, functions are “first-class objects,” that fundamentally means that we can pass around functions usually like any other value. While this is a underline of many programming languages, it’s a requirement of any denunciation that can be used in a organic style. Incidentally, this is also a reason we can do things like $('#my-element').on('click', function(e) … ). The second evidence in a on process is a function, and when we pass functions as arguments, you’re regulating them usually like we would use values in indispensable languages. Pretty neat.

Finally, let’s hang a call to map in a possess duty to make things a small some-more readable.

function pluck(arr, propertyName) 
 lapse arr.map(getItem(propertyName));
 

var allTemperatures = pluck(data, 'temperatures');

All right, now we have a toolkit of general functions that we can use anywhere in a application, even in other projects. We can sum adult a equipment in an array, get a normal value of an array, and make new arrays by plucking properties from lists of objects. Last though not least, let’s lapse to a strange problem:

var information = [
 
 name: "Jamestown",
 population: 2047,
 temperatures: [-34, 67, 101, 87]
 ,
 …
];

We need to renovate an array of objects like a one above into an array of x, y pairs, like this:

[
 [75, 1000000],
 …
];

Here, x is a normal temperature, and y is a sum population. First, let’s besiege a information that we need.

var populations = pluck(data, 'population');
var allTemperatures = pluck(data, 'temperatures');

Now, let’s make an array of averages. Remember that a duty we pass to map will be called on any intent in a array; so, a returned value of that upheld duty will be combined to a new array, and that new array will eventually be reserved to a averageTemps variable.

var averageTemps = allTemperatures.map(averageForArray);

So distant so good. But now we have dual arrays:

// populations
[2047, 3568, 1000000]

// averageTemps
[55.25, 5.5, 75]

Obviously, we wish usually one array, so let’s write a duty to mix them. Our duty should make certain that a intent during index 0 in a initial array is interconnected with a intent during index 0 in a second array, and so on for indexes 1 to n (where n is a sum series of equipment in a array).

function combineArrays(arr1, arr2, finalArr) ;

var processed = combineArrays(averageTemps, populations);

Or, given one-liners are fun:

var processed = combineArrays(pluck(data, 'temperatures').map(averageForArray), pluck(data, 'population'));

// [
// [ 55.25, 2047 ],
// [ 5.5, 3568 ],
// [ 75, 1000000 ]
// ]

Let’s Get Real

Last though not least, let’s demeanour during one some-more real-world example, this time adding to a organic toolbelt with Underscore.js¹⁷, a JavaScript library that provides a series of good organic programming helpers. We’ll lift information from a height for dispute and disaster information that I’ve been operative on named CrisisNET¹⁸, and we’ll use a illusory D3¹⁹ library to daydream that data.

The idea is to give people entrance to CrisisNET’s home page a discerning image of a forms of information in a system. To denote this, we could count a series of papers from a API that are reserved to a sold category, like “physical violence” or “armed conflict.” This way, a user can see how many information is accessible on a topics they find many interesting.

A burble draft competence be a good fit, given they are mostly used to paint a relations sizes of vast groups of people. Fortunately, D3 has a built-in cognisance named pack for usually this purpose. So, let’s emanate a graph with pack that shows a series of times that a given category’s name appears in a response from CrisisNET’s API.

Before we go on, note that D3 is a formidable library that warrants a possess educational (or many tutorials, for that matter). Because this essay is focused on organic programming, we won’t spend a lot of time on how D3 works. But don’t worry — if you’re not already informed with a library, we should be means to duplicate and pulp a formula snippets specific to D3 and puncture into a sum another time. Scott Murray’s D3 tutorials²⁰ are a good apparatus if you’re meddlesome in training more.

Moving along, let’s initial make certain we have a DOM element, so that D3 has some place to put a draft it will beget with a data.

div id="bubble-graph"/div

Now, let’s emanate a draft and supplement it to a DOM.

// breadth of chart
var hole = 960, 
 format = d3.format(",d"),
 // creates an ordinal scale with 20 colors. See D3 docs for conjuration values
 tone = d3.scale.category20c(),

// draft intent to that we'll be adding data
var burble = d3.layout.pack()
 .sort(null)
 .size([diameter, diameter])
 .padding(1.5);

// Add an SVG to a DOM that a container intent will use to pull a 
// visualization.
var svg = d3.select("#bubble-graph").append("svg")
 .attr("width", diameter)
 .attr("height", diameter)
 .attr("class", "bubble");

The pack intent takes an array of objects in this format:

 children: [
 
 className: ,
 package: "cluster",
 value: 
 
 ]

CrisisNET’s information API earnings information in this format:

 data: [
 
 summary: "Example summary",
 content: "Example content",
 …
 tags: [
 
 name: "physical-violence",
 confidence: 1
 
 ]
 
 ]

We see that any request has a tags property, and that skill contains an array of items. Each tab intent has a name property, that is what we’re after. We need to find any singular tab name in CrisisNET’s API response and count a series of times that tab name appears. Let’s start by isolating a information we need regulating a pluck duty that we combined earlier.

var tagArrays = pluck(data, 'tags');

This gives us an array of arrays, like this:

[
 [
 
 name: "physical-violence",
 confidence: 1
 
 ],
 [
 
 name: "conflict",
 confidence: 1
 
 ]
]

However, what we unequivocally wish is one array with any tab in it. So, let’s use a accessible duty from Underscore.js named flatten²¹. This will take values from any nested arrays and give us an array that is one spin deep.

var tags = _.flatten(tagArrays);

Now, a array is a small easier to understanding with:

[
 
 name: "physical-violence",
 confidence: 1
 ,
 
 name: "conflict",
 confidence: 1
 
]

We can use pluck again to get a thing we unequivocally want, that is a elementary list of usually a tab names.

var tagNames = pluck(tags, 'name');

[
 "physical-violence",
 "conflict"
]

Ah, that’s better.

Now we’re down to a comparatively candid tasks of counting a series of times any tab name appears in a list and afterwards transforming that list into a structure compulsory by a D3 pack blueprint that we combined earlier. As you’ve substantially noticed, arrays are a flattering renouned information structure in organic programming — many of a collection are designed with arrays in mind. As a initial step, then, we’ll emanate an array like this:

[
 [ "physical-violence", 10 ],
 [ "conflict", 27 ]
]

Here, any intent in a array has a tab name during index 0 and that tag’s sum count during index 1. We wish usually one array for any singular tab name, so let’s start by formulating an array in that any tab name appears usually once. Fortunately, an Underscore.js process exists usually for this purpose.

var tagNamesUnique = _.uniq(tagNames);

Let’s also get absolved of any false-y (false, null, "", etc.) values regulating another accessible Underscore.js function.

tagNamesUnique = _.compact(tagNamesUnique);

From here, we can write a duty that generates a arrays regulating another built-in JavaScript collection method, named filter²², that filters an array formed on a condition.

function makeArrayCount(keys, arr) 
 
 // for any of a singular tagNames
 lapse keys.map(function(key) 
 lapse [
 key,
 // Find all a elements in a full list of tab names that compare this key
 // and count a distance of a returned array.
 arr.filter(function(item) lapse intent === key; ).length
 ]
 );

We can now simply emanate a information structure that pack requires by mapping a list of arrays.

var packData = makeArrayCount(tagNamesUnique, tagNames).map(function(tagArray) 
 lapse 
 className: tagArray[0],
 package: "cluster",
 value: tagArray[1]
 
);

Finally, we can pass a information to D3 and beget DOM nodes in a SVG, one round for any singular tab name, sized relations to a sum series of times that tab name seemed in CrisisNET’s API response.

function setGraphData(data) 
 var node = svg.selectAll(".node")
 // Here's where we pass a information to a container object.
 .data(bubble.nodes(data)
 .filter(function(d) lapse !d.children; ))
 .enter().append("g")
 .attr("class", "node")
 .attr("transform", function(d) lapse "translate(" + d.x + "," + d.y + ")"; );

 // Append a round for any tab name.
 node.append("circle")
 .attr("r", function(d) lapse d.r; )
 .style("fill", function(d) lapse color(d.className); );

 // Add a tab to any circle, regulating a tab name as a label's text
 node.append("text")
 .attr("dy", ".3em")
 .style("text-anchor", "middle")
 .style("font-size", "10px")
 .text(function(d) lapse d.className ); 

Putting it all together, here’s a setGraphData and makeArray functions in context, including a call to CrisisNET’s API regulating jQuery (you’ll need to get an API key²³). I’ve also posted a entirely operative instance on GitHub²⁴.

function processData(dataResponse) 
 var tagNames = pluck(_.flatten(pluck(dataResponse.data, 'tags')), 'name');
 var tagNamesUnique = _.uniq(tagNames);

 var packData = makeArrayCount(tagNamesUnique, tagNames).map(function(tagArray) 
 lapse 
 className: tagArray[0],
 package: "cluster",
 value: tagArray[1]
 
 );

 lapse packData;


function updateGraph(dataResponse) 
 setGraphData(processData(dataResponse));


var apikey = // Get an API pivotal here: http://api.crisis.net
var dataRequest = $.get('http://api.crisis.net/item?limit=100apikey=' + apikey);

dataRequest.done( updateGraph );

That was a flattering low dive, so congratulations on adhering with it! As we mentioned, these concepts can be severe during first, though conflict a enticement to produce out for loops for a rest of your life.

Within a few weeks of regulating organic programming techniques, you’ll fast build adult a set of simple, reusable functions that will dramatically urge a readability of your applications. Plus, you’ll be means to manipulate information structures significantly some-more quickly, knocking out what used to be 30 mins of frustrating debugging in a integrate lines of code. Once your information has been formatted correctly, you’ll get to spend some-more time on a fun part: creation a cognisance demeanour awesome!

(al, il)

Footnotes

1. 1 http://clojure.org/


2. 2 http://www.akamai.com/


3. 3 http://www.infoq.com/articles/twitter-java-use


4. 4 http://www.scala-lang.org/


5. 5 http://www.haskell.org/haskellwiki/Haskell


6. 6 https://github.com/kachayev/fn.py


7. 7 http://underscorejs.org/


8. 8 http://baconjs.github.io/


9. 9 http://en.wikipedia.org/wiki/Lambda_calculus


10. 10 http://mathoverflow.net/questions/11916/is-functional-programming-a-branch-of-mathematics


11. 11 http://programmers.stackexchange.com/a/154523


12. 12 http://www.2ality.com/2014/04/call-stack-size.html


13. 13 https://people.mozilla.org/~jorendorff/es6-draft.html#sec-tail-position-calls


14. 14 http://cs.stackexchange.com/a/7814


15. 15 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce


16. 16 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map


17. 17 http://underscorejs.org/


18. 18 http://crisis.net


19. 19 http://d3js.org


20. 20 http://alignedleft.com/tutorials/d3


21. 21 http://underscorejs.org/#flatten


22. 22 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter


23. 23 http://api.crisis.net


24. 24 https://github.com/gati/lilfunc/blob/master/smashing.html

↑ Back to topShare on Twitter

Don’t Be Scared Of Functional Programming