Functional Programming In JavaScript

 Functional Programming in JavaScript





Introduction

    In our previous post we learned about different programing paradigm in javascript here in this article we will see one of the most widely accepted programming paradigms in javascript which is funtional programming paradigm we will learn right way to approach towards our end goad i.e output using functional paradigm.


What is functional programming?

        Few different ways that questions can be answered. First of all, it's a programming paradigm. Some other paradigms are imperative programming where you say do this and then do that or object-oriented programming which may be a lot of you write object-oriented JavaScript. where you have objects and they have methods on them and you change them, etc. 

        Functional programming is also a paradigm where functions are king. We can understand it in the way that functional programming is. It's also a style of coding, of organizing your code, writing your code, style of approaching projects, and really more than that it's kind of a mindset you can get into, a way of thinking about a problem, a way of approaching a task.


Why do functional programming in JavaScript specifically?

Well, I found object-oriented JavaScript super confusing,

E.g prototypal inheritance in object-oriented javascript, how does that work? I found that really tricky and confusing. But on if think about things in a functional way which is maybe simpler in some ways

and avoids some of these problems like bugs introduced by binding this to the wrong thing. So, functional JavaScript to me at least is a bit safer, a bit less tricky, a bit easier to debug but easier to maintain as you're building a project and we'll take a look at some of the features that make that easier in a bit. Also, there is already a huge community of developers who are doing JavaScript in a functional style, so there's a lot of libraries out there to help you write functional JavaScript. There's a lot of people out there that are experts in this.

 

How Does it work?

In functional programming you want to do everything with functions, so we want to express everything in our program in terms of functions. And a function of course is just something that takes an input and gives an output. So, we want to be thinking about kind of the flow of data of inputs and outputs through the program, instead of thinking about objects and how they interact and how they manipulate or thinking about steps in a recipe like in an imperative style. Here we're really thinking about how we can express everything in terms of functions, taking inputs, giving outputs.

So, for example,

this would be a non-functional way for me to get the text

Var name= “My name is Ram”;
function getSentence(){
return name;
}

 

this would be a functional way for me to get the text

Var name= “My name is Ram”;
function getSentence(){
return “My name is Ram”;
}

Using functional programming we can avoid side effects that occur due to  the mistakes in variable declaration or manipulation 

 the output of one function can be input to another function, the key part of functional programming is thinking about things as pure as possible. 

 

higher-order functions 

Another key point would be using higher-order functions. So, this means functions that can take as inputs other functions or a function that can return a function as its output. So, basically, we're treating functions kind of as objects themselves. They can be passed to other functions.

You can have layers of functions within functions within functions, etc.


For example 

 getName(sentence){
 return function (string){
  return sentence+string;
  }
  }
  Var sentenceObject = getName(“My name is”);
  
  console.log(sentenceObject(“Ram”));
  

//Here it will give us a complete string which is  “My name is Ram” as output by using high order functional programming way 

 

we need these higher-order functions in order to avoid some of the tricks that we're used to using from other paradigms. So, learning the thing to get into that functional mindset So, one of these things that we're going to avoid that we're used to doing is iterating, using like “for” or “while”, these sort of things.

We're used to going over lists and doing things to all the items in them. Instead, in a functional style, we might use higher-order functions like Map or Reduce or Filter which often take as input not only the list that you want to do something to in some way but also a function that then you're going to apply to it. 

 

Avoid Data Mutation 

 

we want to avoid mutating data, avoid mutability. Mutation in the sense I just mean changing objects in place So, when we have something that's immutable, I'm sure a lot of you guys are familiar with the term,

it's something data that can't be changed in place. Once we've set it's there forever. It's never going to change.

So, let's take a look at an example.

 

The mutation was another thing that required a little head wrapping.

So, this would be an example of a mutation which is non-functional.

We have a rooms variable which stores a list,


Var rooms = [“H1,” “H2,” “H3”];

rooms[2]=”H5”;

console.log(rooms)

Output =>  [“H1,” “H2,” “H4”];

 

and we say no no no actually it's not “H3,” it's “H4”. So, let's replace the thing at index [2] in rooms with “H4.” And so, when our rooms have actually changed, we went from [“H1,” “H2,” “H3”] to [“H1,” “H2,” “H4”].

So, that is still stored in the variable rooms but we've actually changed something in place and this is something that functional programming avoids because this can cause a lot of problems and this is part of the reason why we get into trouble with this and with these sort of object-oriented approaches,

sometimes you can change things in a way that you didn't intend, so that what you thought you were dealing with if I thought that rooms meant [“H1,” “H2,” “H3”] and I didn't know that somewhere else in my code I had replaced something in the rooms array I could run into trouble. I could end up introducing bugs into my code and having a really hard time tracking them down because rooms here is the right thing, rooms there are the wrong thing, 

 

 

Functional Way to Avoid mutation

In the same situation, we can write functional programming code like below and avoid mutation

 

Var rooms = [“H1,” “H2,” “H3”];

Var newroom = rooms.map((item)=>{

if(item==”H3”)return “H4”;

Return item;

}) 

 

So in the above example, we actually traverse each element and check if it's the same as the number we want to change if yes then return its replacement value.


Conclusion 

     we learned, Functional programming paradigm is one of the most promising way to write programme in javascript.

 


 

Post a Comment

0 Comments