There are many tutorials and articles available online which explain functional programming. Examples show small functions, which are composed into others which again get composed. It is hard to imagine how it would all work, then come the analogies and then the math. While the math is necessary to understand it can be difficult to grasp initially. The analogies on the other hand, (at least for me) are not relatable. Some articles assume the reader knows the different terminologies of FP. Over all I felt it is not inviting to learn.
This introduction is for those who have had a tough time understanding those analogies, taken the plunge to functional programming but still have not been able to swim. This is yet another tutorial on functional programming
Functions are first class means they are just like anyone else, or rather they are not special, they behave the same as say primitives or strings or objects.
Wikipedia states
"first-class" is a computer science term that describes programming language entities that have no restriction on their use (thus first-class functions can appear anywhere in the program that other first-class entities like numbers can, including as arguments to other functions and as their return values).
This has some really cool implications
-
A function can be assigned to a variable - Just like a primitive or string or object can be assigned to a variable
var head = function(array) { return array[0]; } var first = head; console.log(first([10, 20, 30, 40])); // 10
firstandheadare referencing the same function -
A function can be passed as a method argument - Just like a primitive or string or object can be passed as a method argument. Some of the best examples of this are
$("input").onchange(function(value) { // do stuff with value console.log(value); });
that can also be written as
var doStuff = function(value) { // do stuff with value console.log(value); }; $("input").onchange(doStuff);
var fs = require('fs'); fs.readFile("/path/to/file", function(err, data) { if (err) throw err; console.log(data); })
-
A function can return another function - Just like a primitive or string or object can be returned from a function
var dice = function (faces) { return function() { return Math.floor(Math.random() * faces); } } var roll = dice(6); roll(); // returns a random number between 0 and 5 (both inclusive) roll(); // returns a different random number between 0 and 5 (both inclusive)
In functional programming, a function should not have side effects. Let me get this out of the way, writing code with side effects is part of how I (and probably most programmers) have written code all along.
We learn that Side effects are bad, in functional programming, Wikipedia states Side effects as
In computer science, a function or expression is said to have a side effect if, in addition to returning a value, it also modifies some state or has an observable interaction with calling functions or the outside world. For example, a particular function might modify a global variable or static variable, modify one of its arguments, raise an exception, write data to a display or file, read data, or call other side-effecting functions. In the presence of side effects, a program's behavior may depend on history; that is, the order of evaluation matters. Understanding and debugging a function with side effects requires knowledge about the context and its possible histories.
Some more examples of side effects
- Insert/update/read from a database
- read/write a file
- mutations (read as
i++ori = i + jorstr = str.concat(" world") - logging
- read/update state to some centralized cache
A function is pure if it returns the same output given the same input without any side effects.
some examples
function add(a, b) {
return a + b;
}This ^ is a pure function, given the same input a, b the same output is returned without any side effects
function insert(user) {
if (DB.exists(user.id)) {
throw Error("users exists");
}
var id = DB.insert(user);
user.id = id;
return user;
}There are multiple side effects going on ^ here.
useris mutated withuser.id = idso the input is changed- Depending on the state of the DB the error
"user exists"might be thrown - in addition to returning the user the DB is also updated.
Testing this function is quite complex as the state of DB has to be set up and verified after the execution. In cases of multiple instances of this code running, it is impossible to assert the after state of DB
so this ^ function is certainly not pure.
Converting that to pure would be
function insert(DB, user) {
return function() {
throwIfUserExists(DB, user);
var savedUser = saveUser(DB, user);
return savedUser;
}
}given the same DB and user as input the output is always the same. It is a function.
Pure functions are easy to test, using different mock DB to test different cases is quite easy.
Now one might argue this means a long number of arguments, and we are going away from encapsulation, why would a program calling insert need to know about DB?
Enter Currying
Before we talk about Currying you need to understand what a closure is
var addWith = function(a) {
return function(b) {
return a + b;
}
}
var add5To = addWith(5);
add5To(5); // 10
add5To(10); // 15
add5To(0); // 5
var add10To = addWith(10);
add10To(add5To(5)); // 20the function returned by addWith takes an argument b but also has access to a which is an argument of its enclosing function. This function which has access to variables and arguments of its enclosing function is a closure
Let us start currying with an example
function add(a, b, c) {
return a + b + c;
}
add(1, 2, 3); // 6
add(1, 2); // NaN - this is because c is undefined and when it participates in an arrithmetic operation it results in Not a Number
var curriedAdd = _.curry(add);
curriedAdd(1, 2, 3); // 6
var add3 = curriedAdd(1, 2); // returns a function
add3(3); // 6
add3(1); // 4
var add2MoreNumbersWith10 = curriedAdd(10); // returns a function
add2MoreNumbersWith10(1, 2); // 13
add2MoreNumbersWith10(1)(2); // 13Currying a function with n arguments will return a new function which can take less than n arguments and return a function which will be another curried function that can take the remaining arguments.
Another example
function store(DB, user) {
var newUser = DB.store(user);
return newUser;
}
var curriedStore = _.curry(store);
var storeUser = curriedStore(DB);
storeUser(user);You can partially apply some arguments to a curried function and use the returned function like it accepts only the remaining arguments.
lodash has a curry implementation
A means of achieving partial application is using the bind operator in javascript
function store(DB, user) {
var newUser = DB.store(user);
return newUser;
}
var storeUser = store.bind(null, DB);
storeUser(user);A function which either accepts other function(s) as argument(s) or returns a function is a higher order function.
We have seen these in the examples above, and having a function as a first class citizen is key to making this possible. This is key to functional programming, it starts to shine when you have many granular functions and then composing them together to make higher order function.
Once you have choosen a language which provides these functional constructs, you got to write code Let us see a few cases of how you can tell apart the two different styles
Say you want to find, given an array of student objects, find the average height of all the students who are in grade 3
// imperative
var students = [...]; // array of student objects
var sum = 0, numberOfGrade3Students = 0;
for (var i = 0; i < students.length; i++) {
var student = students[i];
if (student.grade === 3) {
sum += student.height;
numberOfGrade3Students++;
}
}
var averageHeight = sum / numberOfGrade3Students;There are different ways to achieve this functional style, I will explain my favourite here
// functional
var students = [...]; // array of student objects
var heightOfStudentsInGrade3 = students
.filter(function(each) {return each.grade === 3;});
.map(function(each) {return each.height;}); // returns an array of height
var averageHeight = heightOfStudentsInGrade3
.reduce(function(h1, h2) {return h1 + h2}) / heightOfStudentsInGrade3.length;recursion is another way to handle this without using for loop, but I am not going to there
So for starters DO NOT USE FOR LOOP, that is not functional.
Remember functional programs do not have side effects, mutating an input or any data element is a side effect. treat all variables as constants and do not mutate them.
objects too, do not mutate them. so instead of
var student = ...;
student.grade = 3;
student.GPA = 4;use ES6 Object assign or a polyfill
var student = ...;
var modifiedStudent = Object.assign({}, student, {grade: 3, GPA, 4});or use ES7 spread operator
var student = ...;
var modifiedStudent = { ...student, {grade: 3, GPA, 4} };All functions accept one or more input arguments and return a value, either a function or a value
When working with api outside your control there is not much you can do, a good example I came across recently is the canvas api, for cases like that you will have to take exception to the functional style and go back to imperative
I intentionally did not talk about Pointfree earlier since it takes a little getting used to functional style. Look at the example from above
var students = [
{ name: "A", grade: 3, height: 50 },
{ name: "B", grade: 2, height: 40 },
{ name: "C", grade: 3, height: 60 },
{ name: "D", grade: 4, height: 55 },
{ name: "E", grade: 5, height: 55 },
{ name: "F", grade: 6, height: 45 },
{ name: "G", grade: 2, height: 66 },
];// functional
var heightOfStudentsInGrade3 = students
.filter(function(each) {return each.grade === 3;});
.map(function(each) {return each.height;}); // returns an array of height
var averageHeight = heightOfStudentsInGrade3
.reduce(function(h1, h2) {return h1 + h2}) / heightOfStudentsInGrade3.length;You see it all starts with the array students everything is operated on data. Let us convert this function above to pointfree style
var isThirdGrade = function(s) { return s.grade === 3 };
var getHeight = function(s) { return s.height };
var averageHeight = R.compose(R.mean, R.map(getHeight), R.filter(isThirdGrade));
averageHeight(students); // 55Let me introduce a beautiful library Ramda the R above is from Ramda
Notice how the averageHeight function is composed out of smaller functions, it is all evaluated right to left. Functions where the data is provided at the end and not used in its definition are called Pointfree
See the above example in Ramda repl
a better version of the above would be
var averageHeight2 = R.compose(R.mean, R.map(R.prop('height')), R.filter(R.propEq('grade', 3)));
averageHeight2(students);see it in the repl here
Before we go further on this topic, let us take a small detour and talk about error handling as we know it.
In many languages, a function can return only a single value, most of these languages deal with error conditions by throwing an error / exception for undesired input or external factors. It is hard to accept it, but throwing error is not functional. It makes the program hard to reason about. Let us look at an example
var capitalizeFirst = function (string) {
return string[0].toUpperCase() + string.slice(1);
};
console.log(capitalizeFirst("hello")); // "Hello"
console.log(capitalizeFirst(null)); // Errorevery time something like this happens we take the hand to the forehead and slap ourselves for not thinking about it and then add a null check.
var capitalizeFirst = function (string) {
return string !== null
? string[0].toUpperCase() + string.slice(1)
: null;
};and then you suddenly realize oh no, there is undefined,
var capitalizeFirst = function (string) {
return string !== null && string !== undefined
? string[0].toUpperCase() + string.slice(1)
: null;
};and then you realize later when reading some blog that undefined can be defined like
window.undefined = "abc";
so the string !== undefined is checking against "abc" another facepalm of self, curse yourself and the stupid moron who defined undefined, then you do
var capitalizeFirst = function (string) {
return string !== null && typeof string != "undefined"
? string[0].toUpperCase() + string.slice(1)
: null;
};now satisfied that you have tackled it all, you write another function
var append = R.curry(function (a, b) {
return b.concat(a);
});
var appendSpace = append(" ");
var appendDoe = append("Doe");
var someDoe = R.compose(appendDoe, appendSpace);
console.log(someDoe("John")); // John Doe
console.log(someDoe(null)); // Errorand then realize about the null and undefined checks for both its input arguments. (another facepalm) Before you know it, your code has these checks all across, with one of the 3 different version above.
An alternative solution is to use a container,
var Maybe = function(x) {
this.__value = x;
}
Maybe.of = function(x) {
return new Maybe(x);
}
Maybe.prototype.isNothing = function() {
return (this.__value === null || typeof this.__value == "undefined");
}
Maybe.prototype.map = function(f) {
return this.isNothing() ? Maybe.of(null) : Maybe.of(f(this.__value));
}and use it as
Maybe.of("John")
.map(appendSpace)
.map(appendDoe); // Maybe("John Doe")
Maybe.of("John")
.map(appendSpace)
.map(appendDoe); // Maybe(null) no error this timeOnce the Maybe evaluates to null, it stops further execution and does not throw an error.
Array as a functor
var add3 = function(a) {
return a + 3;
};
add3(10); // 13
// add3 is a function
add3([1, 2, 3]); // "1,2,33" function add3 is not capable of handling both arrays and single items
[1, 2, 3].map(add3); // [4, 5, 6]simply speaking it is a type you can map a function over.
A program written following the above rules is considered functional, it is hard to not mutate data in-place and even harder to move away from for loop. Just hang in there. The results of that transition are simply beautiful, Pure functions are just a breeze to test.
the function returned by addWith takes an argument b but also has access to a --> should be the function returned by addWith takes an argument a but also has access to b