HomeAbout MeContact

Functional programming in javascript

By Gopal Baskota
Published in JavaScript
December 06, 2020
2 min read

Functional programming is a declarative type of programming style in which everything is bind in the pure mathematical functional style. It is a complex concept. In simple words, Functional programming is a programming paradigm that makes use of pure functions in the program, avoiding shared-state, side-effects, and mutable data. Let’s understand the concepts of functional programming with the help of examples.

Pure function A function is a pure function when:

  1. The same value is returned if the same arguments are given.

So what does this condition means? Let’s take an example.

Suppose, we have a function that calculates the circumference of a circle. The radius of the circle is passed to it.

let PI = 3.14;

const calculateCircumference = (radius) => 2 * PI * radius;

calculateCircumference(10);

To calculate the circumference, we need the value of Pi, and we declared a global variable(i.e. PI) for it. Now, when the value passed to the function is 10, the result will be 62.8.

Suppose, the value of PI is challenged and changed to 42. With the same radius(i.e. 42) passed again to the function, the result will be 840. And this violated the first condition, “Same value returned if same arguments are given”. The argument was the same, but it resulted in different results. So this an impure function. Let’s make it pure then.

let PI = 3.14;

const calculateCircumference = (radius,PI) => 2 * PI * radius;

calculateCircumference(10,PI);

This time our function is pure. The same values passed to the function, always give the same result.

For values - 10,3.14 - the result is always 62.8.

For values - 10,42 - the result is always 42.

  1. No observable side-effects are caused by it.

What can be classified as observable side-effects? Modifying external objects or a parameter passed by reference are examples of observable side-effects. Let’s take an example.

let counter = 1;

function increaseValue(v){

    counter = v+1

} 

increaseValue(counter) //2

console.log(counter) //2

In the above code, we have a global variable(i.e. counter), and it is initialized to 1. The increaseValue() function increases the value of this variable by one. This is an observable side-effect and our function is impure. Let’s make it a pure function.

let counter = 1;

function increaseValue(v){

    return v+1;

} 

increaseValue(counter) //2

console.log(counter) //1

So this time, instead of modifying the global object, we simply returned the increased value. While we get the desired increased value, the value of the global variable remains unchanged.

Functions as first-class objects

Functional are first-class objects, By this it means:

  1. It can be stored in a variable, array, or object.
  2. It can be passed as an argument to another function.
  3. It can be returned from another function

In javascript, we can store functions in variables, and arrays, and objects.

// storing a variable
let fun1 = function demo(){ } 

// storing in an array
let arr1 = [];
arr1.push(function demo(){ })

// storing in an object
let obj1 = { demo: function() { }) 

We can also pass a function as an argument to another function in javascript.

const demo = () => "demo function";

const anotherFunction = (f) =>{
  console.log(f()) // "demo function"
}

anotherFunction(demo)

In the above javascript code, we have two functions - anotherFunction and demo. The demo() function is passed as a parameter to the anotherFunction() and then used inside it.

And in javascript, we can also return a function from a function. Let’s modify the last example.

const demo = () => "demo function";

const anotherFunction = (f) =>{
  return f // returning the function
}

console.log(anotherFunction(demo)()) // "demo function"

This time, instead of calling the demo() function inside the anotherFunction(), we returned it from the anotherFunction()

Higher-Order function: A function that has another function as a parameter, or it returns a function, or it does both, is known as a Higher-order function. Immutability Immutability means, it cannot be changed once it is created. Check the following example.

var arr = [1, 2, 3];
var sum = 0;

for (var i = 0; i < arr.length; i++) {
  sum = sum + arr[i]
}

console.log(sum) // 6

The value of the sum here is mutable. It is changed after the for loop. To handle the mutability in iteration, we use Recursion.

let arr = [1, 2, 3, 4, 5];
let counter = 0;

function sum(arr, counter) {
  if (arr.length == 0) {
    return counter;
  }

  return sum(arr.slice(1), counter + arr[0]);
}

console.log(sum(arr, counter)); // 15
console.log(counter) // 0

At last, we got the results, and the value of the counter is still unchanged.


Tags

javascript
Previous Article
Working with object in javascript - tutorial

Gopal Baskota

Full stack Web Developer

Topics

JavaScript
NodeJs
React Js

Related Posts

javascript algorithms - Insertion sort Explained using Javascript .
January 11, 2021
1 min
© 2021, All Rights Reserved.

Quick Links

Advertise with usAbout UsContact Us

Social Media