The ONLY Practical Intoduction you need to Functional Programming in Javascript (ES6)

All you need to start coding in Javascript using the Functional Programming paradigm

When I first started programming in JS, writing basic functions that we use everyday was a bit redundant and time consuming ( using loops to find something in an array).

Until I discovered Functional Programming (or FP for short) which made programming much more fun.

But learning FP wasn’t an easy task, I had to read articles and watch so many videos until I had a good understanding of what FP actually holds.

So Today I’ll be walking you through the basics of functional programming in JS (ES6) and make it as easier to learn as I could.

Higher Order Functions :

Functions in JS are first class citizens, what that means is that you can pass functions as arguments to other functions, or even assign functions to variables.

All the functions that we’ll see below are Higher Order Functions.

Map :

It is an array function that when it is applied to an array, it returns transformed values of that array. But how does it transform those values?

Map takes a function as an argument, that function takes a value of that array as an argument, manipulates that argument and returns a new value.

Example :

When we run this block of code, we get this in the console :

`[ 'My name is Jack',
'My name is Steven',
'My name is Ninja Boy' ]`

Which means that the present array is a transformed version of the names array.

Reduce:

Reduce is also an array function just like Map. The difference between Map and Reduce is that Reduce takes 2 arguments instead of 1, and returns only one value. The first argument of Reduce is a function that also takes 2 arguments. Reduce’s second argument is an object that indicates the initial value of Reduce’s result. To clarify all this mess I just told u, I’ll use an example :

Example :

So numbers is an array of numbers, and sum must be the result of summing those numbers.

So to get that sum, result s initial value must be 0, and in each iteration of reduce, number must be added to result.

After running this block of code we get :

the sum is 100

Currying:

Currying is when a function doesn’t take all its arguments upfront and instead it takes an argument and returns another function that takes another argument and so on and so forth until it returns a value, I bet you are super confused right now but don’t worry, lets use an example :

Example :

so todo is a function that accepts up to 3 arguments, the first one is name then we have something then time.

Once we execute the code above, we get :

[Function]
[Function]
Jack must brush his teeth at 6 p.m

Which means that : todo('Jack') and todo('Jack')('brush his teeth') both return a function, and todo('Jack')('brush his teeth')('6 p.m') returns a string.

Recursion :

It’s when a function keeps calling itself until it no longer calls itself, sounds weird right ? And again, let’s use an example to better understand Recursion.

Example :

For our example, we want a function that takes 2 numbers as arguments, and logs all the numbers that are in between those two arguments :

And once we executed this block of code we get :

1
2
3
4
5
6
7
8
9

As you can see, we are calling the function count inside itself, so when we execute count, it executes itself over and over until the condition number >= limit is met, and that my friends is Recursion.

Where to go from here :

Now that you’ve had a basic introduction to FP, all you need to do is open your favorite code editor and start using FP. The best way there is to learn coding is by coding, not watching videos, not reading books.

if you find any issues regarding FP or you want me to add something to this post then please comment down below or tweet me @RxAssim.