Functional Programming in JavaScript

05 Jan, 2021
Functional Programming(FP) is as old as programming but some of us think that it is discovered recently because we found some parts in mathematics but not in the programming world. But nowadays functional programming is in trend. Almost every programming language including Java, Python, JavaScript, etc. is adopting functional programming. It seems like functional programming is the mainstream now. But why everyone is focusing on functional programming. There must be something. The right question to ask is Why Functional Programming? So let us explore.
There are two types of programming in general.
Imperative: With imperative programming, our code tells the compiler and users about how to do a task.
Javascript
const arr = [1, 2, "3", "4", 5, 6, "7", 8, "9"];  function even(el) {    return el % 2 === 0;}  // Converting string to number in arrayconst arrAsNumbers = arr.map(function (el) {    return Number(el);});// console.log( arrAsNumbers );// or// const arrAsNumbers = arr.map(Number);// [1, 2, 3, 4, 5, 6, 7, 8, 9];  // Filtering even numbersconst filteredArr = arrAsNumbers.filter(function (el) {    return even(el);});// or// const filteredArr = arrAsNumbers.filter(even);  console.log(filteredArr);   // [ 2, 4, 6, 8 ]
Output:
  [2, 4, 6, 8]
Declarative: With Declarative programming, our code tells the compiler and users what to do.
HTML
<!DOCTYPE html><html>  <head>    <script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js">    </script></head>  <body>    <script>        const arr = [1, 2, "3",             "4", 5, 6, "7", 8, "9"];          function even(el) {            return el % 2 === 0;        }          const filteredArr = R.filter(            even, R.map(Number, arr));          // [2, 4, 6, 8]        console.log(filteredArr);     </script></body>  </html>
Output:
[2, 4, 6, 8]
It is highly likely that for most of the programmers, the Imperative code looks more familiar and more readable than the declarative code. This is because we preferably learn Imperative code first. But most of you don’t know what declarative code brings to us. Declarative code comes with great benefits
Readability: You know what we developers spend more time on reading code and not writing. First, we are creating an array arrAsNumbers that has numbers array only. Second, we are taking this array to filteredArray which has only even numbers.As in declarative code, code is short and crispy and the developer can read at a time. So what we are doing is, we are converting array string value to number type. This gives us a new array which we are using to filter with an even function. So the output of our program is an array containing even numbers only. Now you’ve to decide which one do you prefer. So writing readable code is the most important step in our programming. Declarative code is more readable than Imperative.  Say no to this: What we think the most important benefit of Functional Programming is we do not have to use this at all. Why it is so important for JavaScript developers. Most of us do not understand clearly or misunderstood the concept of this that leads to more bugs. JavaScript developers know the pain of using this in their code. Less bug: With functional programming, you will get great benefits that every developer dreams of and one of them is a few bugs.  Because we are going to use pure functions (functions that give the same output for exact same input and don’t contain side effects) in functional programming. There should be fewer bugs. Testing: Testing is easier as we use pure functions that give us the same output if we give exactly the same input. We don’t have to deal with hidden state and side effects. Maintainability: Declarative code is more maintainable because In functional programming we play with functions that are pure functions. As pure functions depend only on their input parameters to produce their output. Debugging with pure functions is much easier. Because the functions with which we are going to play with, are proven functions or techniques. As proven functions contain fewer bugs and are easy to maintain.  
Readability: You know what we developers spend more time on reading code and not writing. First, we are creating an array arrAsNumbers that has numbers array only. Second, we are taking this array to filteredArray which has only even numbers.As in declarative code, code is short and crispy and the developer can read at a time. So what we are doing is, we are converting array string value to number type. This gives us a new array which we are using to filter with an even function. So the output of our program is an array containing even numbers only. Now you’ve to decide which one do you prefer. So writing readable code is the most important step in our programming. Declarative code is more readable than Imperative.  
Say no to this: What we think the most important benefit of Functional Programming is we do not have to use this at all. Why it is so important for JavaScript developers. Most of us do not understand clearly or misunderstood the concept of this that leads to more bugs. JavaScript developers know the pain of using this in their code. 
Less bug: With functional programming, you will get great benefits that every developer dreams of and one of them is a few bugs.  Because we are going to use pure functions (functions that give the same output for exact same input and don’t contain side effects) in functional programming. There should be fewer bugs. 
Testing: Testing is easier as we use pure functions that give us the same output if we give exactly the same input. We don’t have to deal with hidden state and side effects. 
Maintainability: Declarative code is more maintainable because In functional programming we play with functions that are pure functions. As pure functions depend only on their input parameters to produce their output. Debugging with pure functions is much easier. Because the functions with which we are going to play with, are proven functions or techniques. As proven functions contain fewer bugs and are easy to maintain.  
The next big question comes why JavaScript. It could be because of reach. We all know JavaScript is the most popular programming language. It could also be because you want to code both client-side and server-side. If you want to choose because you want to learn functional programming then you’ve chosen the best one because JavaScript supports functional programming “out of the box”. The main idea of functional programming revolves around functions. In JavaScript, functions are first-class citizen i.e values. We can pass it as an argument, return from a function, store it in a variable. JavaScript is a very flexible language. We can call a function with any number of arguments of any type and at any time.
The key takeaway is that we should learn functional programming to make our code more expressive, more robust, and more readable.
JavaScript-Misc
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
Roadmap to Learn JavaScript For Beginners
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?