May 29, 2020

Difference Between Pure Function and Impure Function in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn what is the difference between pure function and impure function in javascript. A pure function always return identical result with identical arguments and it should not have any side effects.

A good example can be of an add() function. The add() function takes 2 arguments and returns the total. But if this add() function performing any side effect such as modifying global variable, making http requests and doing any other task inside the function scope which it is not supposed to, then it becomes an impure function. HTML, CSS, and Javascript code is given below.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div>
        <button>Click Me</button>
        <h1 id="total">Total: 0</h1>
        <h1 id="xvar">X: 0</h1>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

CSS:

div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

Javascript:

let btnCheck = document.querySelector('button');
let total = document.querySelector('#total');
let xvar = document.querySelector('#xvar');

let x = 0;


btnCheck.addEventListener('click', () => {
    total.innerText = `Total: ${myFunc(5, 6)}`;
    xvar.innerText = `X: ${x}`;
});


function myFunc(a, b) {
    x = x + a + b;
    return a + b;
}

You May Also Like: