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. <\/p>\n
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.
\n<\/p>\n
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.<\/p>\n
I’m a big fan of Clash Royale, so let’s start with defining a simple function that takes parameters <\/p>\n
\r\n\r\nfunction nextInLine(deck, card) {\r\n\r\n deck.push(card);\r\n\r\n return deck;\r\n\r\n}\r\n\r\n\r\nvar royaleCards = ['Mega Knight', 'Elite Barbarians', 'Bowler', 'Baby Dragon', 'Dart Goblin'];\r\n\r\nconsole.log("Before: " + JSON.stringify(royaleCards));\r\nconsole.log(nextInLine(royaleCards, 'Ice Spirit'));\r\nconsole.log("After: " + JSON.stringify(royaleCards));\r\n\r\n\/\/ Output:\r\n\r\nBefore: ["Mega Knight","Elite Barbarians","Bowler","Baby Dragon","Dart Goblin"]\r\n[ 'Mega Knight',\r\n 'Elite Barbarians',\r\n 'Bowler',\r\n 'Baby Dragon',\r\n 'Dart Goblin',\r\n 'Ice Spirit' ]\r\nAfter: ["Mega Knight","Elite Barbarians","Bowler","Baby Dragon","Dart Goblin","Ice Spirit"]\r\n\r\n<\/pre>\nThe 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. <\/p>\n
\n- deck – array data type<\/li>\n
- card – string data type<\/li>\n<\/ol>\n
Alright, I think were ready to work with functions and passing them as function arguments. This is basically functional programming. <\/p>\n
\r\n\r\n\/\/ functional programming\r\n \r\nvar deckOne = [1, 2, 3, 4, 5, 6, 7, 8];\r\n\r\n\/\/ take an array and function\r\nfunction mapForEach(deckArray, deckFunction) {\r\n\r\n var newDeck = [];\r\n\r\n for (var i = 0; i < deckArray.length; i++) {\r\n newDeck.push(deckFunction(deckArray[i]));\r\n }\r\n\r\n return newDeck;\r\n\r\n}\r\n\r\nvar deckTwo = mapForEach(deckOne, function(cardItem) {\r\n\r\n return cardItem * 2;\r\n\r\n});\r\n\r\nconsole.log(deckTwo);\r\n\r\n\/\/ Output:\r\n[ 2, 4, 6, 8, 10, 12, 14, 16 ]\r\n\r\n<\/pre>\nYeah 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. <\/p>\n
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. <\/p>\n
Let’s break down the program:<\/p>\n