JavaScript - Functional Programming

Quiz

There are mainly two programming paradigms: The imperative programming paradigm and the declarative programming paradigm. Functional programming is a subtype of the declarative paradigm. The paradigm word refers to the approach to solving a particular problem.

Functional programming has been in use for the last decades but came in the trend after 2015 when the last main revised version of JavaScript was released. There are many benefits to using functional programming, which we will discuss in this tutorial.

Characteristics of Functional Programming

Functional programming works as mathematical function works. It allows developers to develop software based on function evaluation. It means programmers can break the code into small parts, which we can call the function, making it easy to evaluate and test code. The following concepts of functional programming are covered in this tutorial

Pure Functions
Code Readability

Pure Functions in JavaScript

In JavaScript, we can write the pure function. In simple terms, a pure function takes the values as a parameter, performs some operations on that, and returns the output.

The pure function never shares any variable with other function or use a global variable.

The followings are the properties of a Pure function

A pure function always returns the same output for a given input.
A pure function does not depend on any external state or variables that are not passed to them as arguments.
A pure function does not produce any side effects, such as modifying global variables or changing the state of external objects.

Now, let us see and understand the pure function with an example.

Example

In the example below, we have created the pure_func() named which takes the value as a parameter and multiplies it with 2. After that, it prints the value. Users can see that pure_func() is not sharing any variable globally with another function.

Also, we can use the global_var directly without passing it as a parameter of a pure function. Still, we have passed it as a parameter as a pure function never shares any variable declared outside the function's scope.

<html>
<body>
<h2>Pure Function Example</h2>
<div id="result"></div>
<script>
let result = document.getElementById('result');
let global_var = 10;
function pure_func(value){
   return value * 2;
}
result.innerHTML = pure_func(5);
</script>
</body>
</html>

Immutability in JavaScript

Immutability is another important concept of functional programming. In simple terms, immutability means that we cannot change the value of the variable once it is declared. In JavaScript, we can achieve immutability by using the const keyword. Lets see an example of immutability in JavaScript.

Example

In the example below, we have declared the variable using the const keyword. We have tried to change the value of the variable, which will throw an error as we cannot change the value of the variable declared using the const keyword.

<html>
<body>
<h2>Immutability Example</h2>
<div id="result"></div>
<script>
let result = document.getElementById('result');
const value = 10;
value = 20;
result.innerHTML = value;
</script>
</body>
</html>

Ouptut

Following is the output of the above code

TypeError: Assignment to constant variable.

When we run the above code, it will throw an error as we cannot change the value of the variable declared using the const keyword.

Code Readability

As we write all logic with functions in functional programming, it makes our code more readable. For example, in other programming languages we use for or while loops to iterate through the arrays. But functional programming allows us to use the for-of loop, which makes code more readable and tells other developers that we wanted to iterate through the array and perform some operation on every array element.

Lets look at another example. Suppose we want to filter some values from the array. In other programming approaches, we write a manual function to filter values, but in the functional programming approach, we can use the filter() method, demonstrating that we want to filter values from the array based on the particular logic.

Higher Order Functions

The higher-order function allows us to pass the function as an argument of another function. For example, we can pass the callback function as an argument of the reduce() method of the array. In the callback function, we can write logic to reduce an array into a single element.

Lets see an example of the higher-order function.

Example

In this example, we have used the reduce() method to reduce the array into a single element and passed the callback function as an argument. It represents the higher-order function as we have passed the function as an argument.

<html>
<body>
<h2>Higher Order Function Example</h2>
<div id="result"></div>
<script>
let result = document.getElementById('result');
let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((acc, val) => acc + val);
result.innerHTML = sum;
</script>
</body>
</html>

We have learned about the functional programming approach and how it is beneficial and different from the programming paradigm. We have learned that it provides a way to write maintainable and readable code with fewer bugs.

Print Page