Simple Calculator Using Javascript Without Eval

Why Avoid JavaScript's Eval()

The eval() function in JavaScript evaluates strings as JavaScript code. While convenient for dynamic calculations, it has several critical drawbacks:

• Security risks: eval() can execute arbitrary code, making it vulnerable to code injection attacks.
• Performance overhead: eval() is slower than native JavaScript operations.
• Debugging challenges: Code executed with eval() doesn't appear in the call stack, making debugging difficult.
• Scope issues: eval() operates in the current scope, which can lead to unexpected behavior.

Building a Basic Calculator

A simple calculator can be created using basic JavaScript functions and operators. Here's how to approach it:

1. Create HTML input fields for numbers and operators.
2. Use JavaScript functions to handle calculations.
3. Display results without using eval().

This approach uses parseFloat() to convert string inputs to numbers and performs operations with standard JavaScript operators.

Security Considerations

When building a calculator without eval(), consider these security best practices:

• Input validation: Always validate and sanitize user inputs.
• Type checking: Ensure inputs are numbers before performing calculations.
• Error handling: Implement robust error handling for invalid inputs.
• Content Security Policy: Use CSP headers to prevent script injection.

Performance Optimization

To create a fast and efficient calculator:

• Use event delegation: Handle button clicks efficiently.
• Minimize DOM operations: Update the display only when necessary.
• Cache DOM elements: Store references to frequently accessed elements.
• Use requestAnimationFrame: For smooth animations if needed.

These optimizations ensure your calculator runs smoothly even on less powerful devices.

Example Implementation

Here's a complete example of a calculator built without eval():

HTML Structure

<div class="calculator">
    <input type="text" id="display" readonly>
    <div class="buttons">
        <button class="number">7</button>
        <button class="number">8</button>
        <button class="number">9</button>
        <button class="operator">/</button>
        <button class="number">4</button>
        <button class="number">5</button>
        <button class="number">6</button>
        <button class="operator">*</button>
        <button class="number">1</button>
        <button class="number">2</button>
        <button class="number">3</button>
        <button class="operator">-</button>
        <button class="number">0</button>
        <button class="decimal">.</button>
        <button class="equals">=</button>
        <button class="operator">+</button>
        <button class="clear">C</button>
    </div>
</div>

JavaScript Implementation

document.addEventListener('DOMContentLoaded', function() {
    const display = document.getElementById('display');
    const buttons = document.querySelectorAll('button');
    let currentInput = '';
    let previousInput = '';
    let operation = null;
    let resetScreen = false;

    buttons.forEach(button => {
        button.addEventListener('click', () => {
            if (button.classList.contains('number')) {
                if (currentInput === '0' || resetScreen) {
                    currentInput = button.textContent;
                    resetScreen = false;
                } else {
                    currentInput += button.textContent;
                }
                display.value = currentInput;
            }

            if (button.classList.contains('decimal')) {
                if (resetScreen) {
                    currentInput = '0.';
                    resetScreen = false;
                } else if (!currentInput.includes('.')) {
                    currentInput += '.';
                }
                display.value = currentInput;
            }

            if (button.classList.contains('operator')) {
                if (operation !== null) calculate();
                previousInput = currentInput;
                operation = button.textContent;
                resetScreen = true;
            }

            if (button.classList.contains('equals')) {
                if (operation !== null) {
                    calculate();
                    operation = null;
                }
            }

            if (button.classList.contains('clear')) {
                currentInput = '0';
                previousInput = '';
                operation = null;
                display.value = currentInput;
            }
        });
    });

    function calculate() {
        let result;
        const prev = parseFloat(previousInput);
        const current = parseFloat(currentInput);

        if (isNaN(prev) || isNaN(current)) return;

        switch (operation) {
            case '+':
                result = prev + current;
                break;
            case '-':
                result = prev - current;
                break;
            case '*':
                result = prev * current;
                break;
            case '/':
                result = prev / current;
                break;
            default:
                return;
        }

        currentInput = result.toString();
        display.value = currentInput;
        operation = null;
    }
});