There is always some cutoff criteria to check whether a person is good in what they are doing. In ReactJS , it's functional programming. You can choose not to follow it, just like you chose not to follow ES6+, and you will be sitting there with basics while a 13y/o youtuber-slash-programmer will try it out and write code better than you. (P.S.-this not a FIIT-JEE ad)
So , I hope you now understand why functional programming is considered important, as the saying goes : "You can reach a destination by riding a Toyota, but reaching it in a Maybach is the real deal."
What is Functional Programming?- it's nothing but a part of a programming paradigm just like ES6+ was. It treats functions as a first class citizen i.e. functions can be assigned to variables, objects, arrays, can be sent to other functions as arguments as well as can be returned from another function. In short, "function flower nahi, fire hain". (roughly translates to - "Function is the boss here")
Declarative Programming (The smart kid in class)
It is another paradigm which works on the basis what has to be done rather than how it has to done. It focuses mainly on what the dev is trying to convey and acts accordingly. You, as a dev, don't have to specify everything about how the task has to completed.
Example - You don't have to specify .innerHTML , .innerText
Immutability
It is a good practice to not change data but to return a new copy. Let's understand this with a example: First way to do this is,
const gautam = {name: "gautam", age: 18};
gautamBro = gautam // mutability
gautamBro.age = gautam.age + 2 // 20
gautamBro // {name: "gautam", age: 20}
gautam // {name: "gautam", age: 20}
Observe how both the objects return age: 20 in the end. Whereas in ideal situation this should not be the case, because we already know that the age key of gautamBro has a value of 20 while that of gautam is 18.
const gautam = {name: "gautam", age: 18};
const gautamBro = {...gautam, age: gautam.age + 2};
gautamBro.age // 20
gautam.age // 18
Meanwhile here, the ages of both gautam and gautamBro have their correct distinctive values. This is what we wanted to achieve with immutability.
Always remember to create a new copy of data instead of changing it.
Pure Functions
Pure functions are the functions in which the output doesn't change until and unless the input changes.
In pure functions, output is always the same for same input.
For a function to be considered pure, it has 3 rules that need to be followed:
- It should have at least one argument
- It should return either a value or another function
- It should not mutate any of its arguments(immutability)
Higher Order Functions
Higher order functions are the functions which :
- can take functions as arguments
- can return a function
- can do both the above mentioned points
const function = () => anotherFunction; // returns a function
const functionOne = () => {};
const function = (functionOne) => {}; // function as argument
const functionTwo = (functionOne) => functionThree; // both
All these subsets , when combined create the paradigm of Functional Programming.
We will also learn about array.filter(), array.map() and array.reduce() in upcoming blogs.
This is the end of this blog. Thankyou for reading my work.
React to this blog and share your comments below as it keeps me motivated to keep writing blogs frequently.
Connect with me on twitter
Signing off ..... Godspeed!