Pure Function in JavaScript: The Complete Guide

0
129
Pure Functions In Javascript

A function is considered as Pure Function if it returns the same result if the same arguments are passed.

Pure function

Pure function in JavaScript returns the value determined by its parameter passed at call time. JavaScript is not a purely functional language; it treats functions as objects (first-class functions). If you provide some input parameter value to the function and it always returns the same result.

Pure Functional Programming concept is derived from these two strict functional programming languages.

  1. Clojure
  2. Scala

Pure Functions strictly do not rely on a particular Ajax call or any Database call. It simply takes a parameter and performs some calculation provides in the function body and returns it.

It solely depends upon the argument passing it into the functions call.

Pure Functions In Javascript
It only maps the input values to the output values.

You can call this programming style Procedural Programming because It is a sequence of operations performed on the input to that function.

The function can access only those variables that are passed to that function as a parameter.

A global variable or an instance of a class is not considered a legitimate variable inside any Pure Functions.

The global scope of a variable is not used in the production of Pure Functions.

It’s a set of instructions that behave as Mathematical Functions.

It’s a role-based function whose only task is to take an argument, perform some operations on that variable and then return it.

Advantages:

  1. You can always predict the result of a given function.
  2. Testing is always easy because It does not mutate the state of a variable outside of its lexical scope.
  3. Functional programming reduces the line of codes and almost gets rid of a loop.

Examples:

See the following main.js.

//main.js

let pure = (y) => {
    let x = 10;
    x = x + y;
    return x;
};

let y = pure(3);
console.log(y); // 13

let z = pure(3);
console.log(z); // 13

If you directly run the above code in the browser, then you might face the following issue.

Possible Errors

  1. You can get any syntax errors.
  2. If you perform code directly in your browser, then chances are very high to fail the webpack compilation process.

Possible Solutions

  1.  Beginner’s Guide To Setup ES6 Development Environment  Follow this article strictly and put the above code in the main.js file

In the above example, every time at the call time of the function, when we pass the parameter as three then It will always give us 13 in return in all the circumstances. So it’s a Pure Javascript Function.

In JavaScript, simple variables like numbers, strings and booleans are immutable. However, data structures like objects and arrays are mutable because it is a collection of data.

//main.js

const numbers = [1, 2, 3];
numbers.forEach(x => console.log(x)); //1 2 3

Arrays and Objects can be mutated because It’s a non-primitive data type.

The above example simply prints the value of an element in an array one by one so It’s a Pure Javascript Function.

Example #1

//main.js

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

even = arr.filter(function (element) {
    return element%2 === 0;
});
console.log(even); //[2,4,6]

If you do not mutate an old state of an array, then It is also called Pure Functions.

In the above example, the Javascript filter() function just checks the condition, and if it satisfies then it returns the new set of an array.

Example #2

//main.js

let dances = [
    {name: 'Krunal', type: 'Robot'},
    {name: 'Ankit', type: 'Salsa'},
    {name: 'Tom', type: 'Garba'},
    {name: 'Jerry', type: 'Belly'}
];
let collection = dances.filter((dance)=>{
   return  dance.type === 'Robot'
});
console.log(collection); // [object]

That’s it for this tutorial.

Leave A Reply

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.