Javascript – Functional Programming Part 1

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.

1. deck – array data type
2. 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.