Coding Functional Programming Programming Programming Knowledge

Functions for functional Programming

August 29, 2019

In the last post, we discussed immutability. Which means if you create an object whose value can not be modified later than it means it is an immutable object and this feature is called immutability. We also discussed the necessity of using immutable objects when programming. Today we will take a look at various simple yet important functions that will help us do a lot of tasks. I’ll only show you 4 functions that most developers use for day to day task. These are Map, Filter, Find, Reduce.

What, how, where and when to use

So If you’ve understood immutability, then proceed to the next section. After learning the theoretical part, most of us might think about how should I use it and where and when should I use it. Remember how, where and when are three different questions. Thus I’ll talk about them one by one. In this post, I’m going to talk about 4 different JS Function. They are Map, Find, Filter, Reduce. I’m going to explain to them using only one example. A real-world example. why? Because I believe using a good example is enough for you to understand the use cases, the functionality of these functions. But If you couldn’t understand then let me know. 

Map

So at first, I’m going to talk about the Map function. Before talking about Map function let’s talk about a Foreach Loop. We all know about for loop and how to use it and probably everyone have already used it when writing programs. The map function is a different kind of Foreach loop. But first, let’s see an example using the Foreach loop.

This is a fairly simple example. Here we have an array of orders and all we wanted to print out the name of those products that are in the orders array.

Now instead of using a forEach loop, we can do this using a for a loop too and I guess a lot of people like me mostly gonna use for loop instead of the forEach loop. So let’s look at that too.

We can use the map function to solve the same task. why? Because it reduces the number of lines we had to write in a code segment. And one of the main targets of functional programming is to write less code

Let’s add some complexity as in real-world application we rarely just only print the values of an array. We usually do much more than that. Let’s say we only want to print the product that has the price of more than 10. So we rewrote the application this way.

From this part, we can see that the for loop code segment is already getting bigger and whenever a new coder looks at this code he will need to go through the whole code and also keeping track of index values of the array. On the other hand, if someone knows the uses of map function then he already knows it is iterating an array and storing the item into the ‘order’ object one by one. I’ll show you more advanced uses in a later section.

Filter

In the previous segment, we did had an If statement that checks whether a product price is less then 20 or not. We mostly use if statement when we need to check some condition before doing some task on them. Now let’s say we have a large array of orders that contain more than 50 or more order. We want to separate those who have a price value of more than 50. How should we do it? typically we use an if statement then inside if statement we write codes that take those objects and put them into another array.

What is this piece of in the last line!! This is the power of the filter. instead of creating a for loop and then writing an if statement we could simply just write the whole task in the filter function and it’s more human-readable. Let me break it to you, how it is working.

Inside the filter function, the order is the object it got from the array orders, just like map function. We could’ve used the first bracket around the order object, but if there is no second argument then it is not necessary. Then in the execution part i.e after the ‘=>’ symbol, we saw the condition we wrote in the if statement. One thing to keep in mind that, filter function expect true or false i.e; only boolean values. depending on the boolean value it adds an object or removes an object. And after going through the whole array it only returns those objects that are passed as true in the condition. Like water filter, it also filters an array and returns only those items that passed the condition. If you’re familiar with SQL queries, it is kind of the equivalent of where clause.

Find

Find function in JavaScript is used for various reasons. It is used specially when we want to get an object or value from the database or from an array of objects. Let’s give an example.

We could have done this same task using filter though but it might create side effects. How? Let’s say you want to get the user details of a user given that you have UserName. Now What if there are multiple values available in the same list. As we know filter returns a filtered array so if your search criteria contains a condition that satisfies multiple objects in the array then those objects will be returned.

On the other hand, find method only returns the first element in the array. So we can also check if the element exists or not. Besides, there is a performance issue. Find function only search for the given search criteria, once it gets the first element in a sequence it returns it and stop searching for the next sequence in the array. On the other hand, filter search the array to the end of the sequence.

Reduce

Before i talk about Reduce function and how and where to use it, first sink in the first 3 functions i’ve already told you. Specially the Map and filter function. Let me explain, as we already know map iterates an array. Reduce also does the same task. But each time it iterates an element in the array it calls a callback function. The syntax for the reduce function is like this

Here initial value is optional. And inside the callback function, there are 2 parameters. These are 

  • Accumulator
  • Current Value

Although there can be other parameters, they are optional. 

accumulator

The accumulator accumulates the callback’s return values; it is the accumulated value previously returned in the last invocation of the callback, or initialValue if supplied (see below).

currentValue

The current element being processed in the array.

Here is an example

The reason I showed you these 4 functional functions because before i knew the FP way, i used to write for loop or foreach loop to do these task. And after a few days later even i could not understand what I did in that specific segment! But after starting to use these functions I’ve been able to write clean code that is easily understandable by anyone. It also increased my performance a lot by reducing time on reading the previous code segments. That is why i believe everyone should know about these functions and start using them whenever possible.

You Might Also Like

No Comments

Leave a Reply