Building a Simple Calculator Using JavaScript

Building a simple calculator using JavaScript is an excellent exercise for beginners to understand the basics of programming logic and user interaction on the web. This project involves creating basic arithmetic operations like addition, subtraction, multiplication, and division. Here, we'll explore how to implement these operations using two common conditional statements in JavaScript: if...else and switch.

Example 1: Simple Calculator with if..else if...else

To create a calculator using if...else if...else statements, we start by defining the operations and then executing the appropriate calculation based on user input. Below is a straightforward implementation:

function calculateIfElse(operation, a, b) {
    let result;
    if (operation === 'add') {
        result = a + b;
    } else if (operation === 'subtract') {
        result = a - b;
    } else if (operation === 'multiply') {
        result = a * b;
    } else if (operation === 'divide') {
        if (b !== 0) {
            result = a / b;
        } else {
            result = 'Error: Division by zero';
        }
    } else {
        result = 'Error: Operation not recognized';
    }
    return result;
}

// Usage
console.log(calculateIfElse('add', 5, 3));  // Output: 8
console.log(calculateIfElse('divide', 4, 2));  // Output: 2
console.log(calculateIfElse('divide', 4, 0));  // Output: Error: Division by zero

In this example, the calculateIfElse function checks the operation parameter using multiple if...else conditions and performs the corresponding arithmetic operation.

Example 2: Simple Calculator with switch

Using a switch statement can make the code cleaner and more organized when dealing with multiple cases like different arithmetic operations. Here's how you can implement the same functionality as above but with a switch statement:

function calculateSwitch(operation, a, b) {
    let result;
    switch (operation) {
        case 'add':
            result = a + b;
            break;
        case 'subtract':
            result = a - b;
            break;
        case 'multiply':
            result = a * b;
            break;
        case 'divide':
            if (b !== 0) {
                result = a / b;
            } else {
                result = 'Error: Division by zero';
            }
            break;
        default:
            result = 'Error: Operation not recognized';
            break;
    }
    return result;
}

// Usage
console.log(calculateSwitch('multiply', 4, 5));  // Output: 20
console.log(calculateSwitch('subtract', 10, 6));  // Output: 4
console.log(calculateSwitch('add', 7, 3));  // Output: 10

This example employs a switch statement to organize different arithmetic operations. The default case handles unrecognized operations, ensuring that the function gracefully manages invalid input.

Conclusion

In conclusion, building a simple calculator in JavaScript is a fundamental project that helps budding developers understand control structures like if...else and switch. Whether using if...else if...else or switch, each method provides valuable lessons on the implementation of basic programming constructs and interaction handling in JavaScript. These examples not only help in grasping basic arithmetic operations but also in learning how to structure code effectively for better readability and maintenance.