5-line Code for Best Js Calculator

I’m a freelancer full stack developer, today I’m going to teach you how you can create a Calculator with Javascript. many people create such a lengthy code for creating just a simple calculator. I’m sharing a very simple way to create a calculator  with-in-the 5 line code of JS

here we have 2 options to create a shortcode for Javascript Calculator

• Eval function
• windows.Function()

1. The eval()

The eval() : the eval() function evaluates JavaScript code represented as a string. basically in a simple word when we type any string with mathematical operators eval function calculates arithmetics operators. more you can understand by an example

    console.log(eval('2+2'))
    // output will be 4
    console.log(eval('2*2'))
    // output will be 4
    console.log(eval('2/2'))
    // output will be 1
    console.log(eval('2-2'))
    // output will be 1

here is an example of calculator input using eval function

<script>
    function Calculate(){
        let input_str   = document.getElementsById('input-id');
        let output_str  = eval(input_str);
        document.getElementsById('output-id').innerText = output_str;
    }
</script>
<div>
    <input type="text" id="input-id" placeholder="Enter Anything You want To Calculate..."  >
    <button type="button" onclick="Calculate()" >Calculate</button>
    <span id="output-id" style="color:red" ></span>
</div>

code-explanation: in the above code, we took input from the input tag to the “input_str” variable and pass it to the eval() function. the eval() function will evaluate the string and pass it to “output_str”, finally we show the output in the “output-id” span tag

eval() function is the best way we can use it to create any calculator but wait no one will let you use the eval function

why? ( no one will describe you but I can 🙂 )

actually, the eval function Executing JavaScript from a string is an enormous security risk. any bad actor can run arbitrary code when you use the eval() function that’s why we should not use the eval() function for production

2. windows.Function()

windows.Function() : so we can’t use eval() function for production so here is chance to show another javascript function to calculate from string “windows.Function()”.  it creates a global scope function from the string. this way, you can evaluate the code from the string

<script>
    function Calculate() {
        let input_str = document.getElementsById(‘input - id’);
        let output_str = Function(`’use strict’; return (${str})`)();
        document.getElementsById(‘output - id’).innerText = output_str;
    }
</script>
<div><input type="”text”" id="”input-id”" placeholder="”Enter" Anything You want To Calculate…” /> <button type="”button”" onclick="”Calculate()”">Calculate</button> <span id="”output-id”" style="”color: red”;"></span></div>

example above, we took input from the form input tag in the “input_str” variable and pass it to the Function(`’use strict’; return (${str})`), I’m hoping everyone already knows tild”“” functionality in JavaScript, if not let me know in the comment section I’ll reply ASAP, continue to our code we are using strict mode for easier to write “secure” JavaScript, for example, you can’t use undeclared variables.  so that the Function evaluates the string and passes it to “output_str” then we show output in the output-id span