Skip to content
Related Articles

Related Articles

Improve Article

Functional Programming in JavaScript

  • Difficulty Level : Medium
  • Last Updated : 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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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 array
const 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 numbers
const 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

  1. 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. 
     
  2. 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.
     
  3. 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.
     
  4. 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.
     
  5. 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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :