Eval Function in JavaScript |

Table of content

What is the Eval function in JavaScript?
How is it used in JavaScript?
Project-based Example(Build a Calculator app with eval function)

In This Blog, we will learn what is Eval function in JS and how to implement the eval function in JS and understand it while building a Calculator application.

1. What is the Eval function in JavaScript?

Eval Function is a JavaScript inbuilt function used to evaluate the JavaScript String and return its complied value.
Example:

//implement eval with string
const f_name = "Srisanth";
const l_name = "Seth";
const age = 20;

const output = eval('`Hello, my name is ${f_name} ${l_name} and I am ${age} years old.`');
console.log(output);

//implement eval with number
const number = eval('2+2');
console.log(number);

2. How is the Eval function used in JavaScript?

we can use the eval function directly and indirectly. It is always recommended not to use the eval function directly by calling it in production as it increases security concerns and makes the website vulnerable.

//directly calling eval function
eval("3 + 3")
eval('alert("Please try again later!!")'); 


//indirectly calling eval function
const newFunc = new Function("console.log('Hello, World!')");
newFunc();

3. Project-based Example of Eval Function

let’s make a calculator app using the eval function.

HTML Code

<!doctype html>
<html>
<head>
    <title>Glassmorphism Calculator UI</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected]&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <form class="calculator" name="calc">
            <input type="text" readonly class="value" name="txt"/>
            <span class="num" onclick="calc.txt.value = ''">c</span>
            <span class="num" onclick="document.calc.txt.value += '/'">/</span>
            <span class="num" onclick="document.calc.txt.value += '*'">*</span>
            <span class="num" onclick="document.calc.txt.value += '7'">7</span>
            <span class="num" onclick="document.calc.txt.value += '8'">8</span>
            <span class="num" onclick="document.calc.txt.value += '9'">9</span>
            <span class="num" onclick="document.calc.txt.value += '-'">-</span>
            <span class="num" onclick="document.calc.txt.value += '4'">4</span>
            <span class="num" onclick="document.calc.txt.value += '5'">5</span>
            <span class="num" onclick="document.calc.txt.value += '6'">6</span>
            <span class="num" onclick="document.calc.txt.value += '+'">+</span>
            <span class="num" onclick="document.calc.txt.value += '1'">1</span>
            <span class="num" onclick="document.calc.txt.value += '2'">2</span>
            <span class="num" onclick="document.calc.txt.value += '3'">3</span>
            <span class="num" onclick="document.calc.txt.value += '0'">0</span>
            <span class="num" onclick="document.calc.txt.value += '00'">00</span>
            <span class="num" onclick="document.calc.txt.value += '.'">.</span>
            <span class="num" onclick="document.calc.txt.value = eval(calc.txt.value)">=</span>
        </form>
    </div>
</body>
</html>

As we can see in the above code, the Eval Function is used to calculate the value 
inside the calc.txt.value.

CSS Code

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 2rem;
    display: flex;
    color: #ffffff;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #091921;
}

body::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#e91e63, #ffc107);
    clip-path: circle(10% at 35% 20%);
}
body::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#e9d51e, #07ff93);
    clip-path: circle(10% at 60% 90%);
}


.container{
  position: relative;
  background-color: rgb(255, 255, 255, 0.5);
  border-radius: 12px;
  height: 650px;
  width: 400px;
  z-index: 10;
  overflow: hidden;  
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
}

.container .calculator{
    position: relative;
    display: grid;
}

.container .calculator .value{
    grid-column: span 4;
    height: 140px;
    width: 400px;
    text-align: center;
    border: none;
    padding: 10px;
    font-size: 30px;
    background: transparent;
    color: #ffffff;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
}

.container .calculator span{
    cursor: pointer;
    display: grid;
    align-items: center;
    padding: 30px;
}

Calculator App

Code Output:

For more information check out this blog:
How to write a JavaScript using the eval() function

Table of content

What is the Eval function in JavaScript?

How is it used in JavaScript?

Project-based Example(Build a Calculator app with eval function)