I haven’t covered any advanced topics until now – functional programming in Javascript is an advanced topic in my book. Not only is functional programming an advanced topic, it’s quite special and specific to the Javascript language. Even a well seasoned developer could get a little frazzled by the concept of functional programming – especially those who code in more statically typed languages – like C or Java.
I, myself have mulled over this a long time – especially because I haven’t built any applications using much of functional programming. Frameworks and libraries – yes, but I’m talking about writing my own proprietary code. Programmers unknowingly utilize functional programming all the time – with this, comes closures, prototypical inheritance – other advanced patterns found in our javascript libraries today.
Easing in to functional programming is probably the best way to get into it. I know that’s a little contradictory to “immersing” yourself into something but for more advanced concepts – “immersing” yourself piece by piece would be much more productive. Also using examples or contexts that interest you – remember, programming and languages is just a tool. So if you’re interested in gaming, health or cars – then you should write your programs based on that – it just makes things a lot more enjoyable, at least for me it does.
I’m a big fan of Clash Royale, so let’s start with defining a simple function that takes parameters
function nextInLine(deck, card) {
deck.push(card);
return deck;
}
var royaleCards = ['Mega Knight', 'Elite Barbarians', 'Bowler', 'Baby Dragon', 'Dart Goblin'];
console.log("Before: " + JSON.stringify(royaleCards));
console.log(nextInLine(royaleCards, 'Ice Spirit'));
console.log("After: " + JSON.stringify(royaleCards));
// Output:
Before: ["Mega Knight","Elite Barbarians","Bowler","Baby Dragon","Dart Goblin"]
[ 'Mega Knight',
'Elite Barbarians',
'Bowler',
'Baby Dragon',
'Dart Goblin',
'Ice Spirit' ]
After: ["Mega Knight","Elite Barbarians","Bowler","Baby Dragon","Dart Goblin","Ice Spirit"]
The above code isn’t making use of functional programming – were just warming up here. The function nextInLine() takes two arguments, but it’s important to note each of their datatypes.
- deck – array data type
- card – string data type
Alright, I think were ready to work with functions and passing them as function arguments. This is basically functional programming.
// functional programming
var deckOne = [1, 2, 3, 4, 5, 6, 7, 8];
// take an array and function
function mapForEach(deckArray, deckFunction) {
var newDeck = [];
for (var i = 0; i < deckArray.length; i++) {
newDeck.push(deckFunction(deckArray[i]));
}
return newDeck;
}
var deckTwo = mapForEach(deckOne, function(cardItem) {
return cardItem * 2;
});
console.log(deckTwo);
// Output:
[ 2, 4, 6, 8, 10, 12, 14, 16 ]
Yeah there’s a lot going on at first glance, it seems a little too much for the mind to keep track of what’s going on. Not to mention – this is just one tiny example – in a full blow program you’ll see an indefinite amount of functions being passed around.
Functional programming alone can be a whole book on its own – here, I just wanted to provide a simple example, something to get started with.
Let’s break down the program:
- mapForEach – a function declaration taking two parameters, deckArray and deckFunction
- deckArray – an array data type
- deckFunction – a function data type
- newDeck – an array datatype scoped within the mapForEach() function
- cardItem – an array element passed as an argument
- deckTwo – an array containing the results of envoking the mapForEach function
So the question is, why go through all of this. To be honest I haven’t used a extensive amount of functional programming, however I have used it quite extensively in libraries and frameworks – some examples are AngularJS, VueJS and jQuery. We pass functions ALL THE TIME. So in gaining at least a basic understanding of this provides clarity for the programmer – even a budding programmer. This is an important fundamental concept to keep in mind in your conceptual background.
This is just a basic intro, more examples on Functional Programming to come – stay tuned.