Is there a more secure alternative to using the risky eval() function? Do I need to take the lengthier route by implementing a switch case instead?

I've been practicing and honing my Javascript skills by working on a calculator code that initially had lots of repetitive lines. I managed to simplify it, but I am aware that using the eval() method is not generally recommended.


let current = 0;

function calculate(method){
  const result = `${current} ${method} ${userInput.value}`;
  current = eval(result);
  outputResult(current, result);
}
addBtn.addEventListener('click', ()=> calculate('+'));
subtractBtn.addEventListener('click', ()=> calculate('-'));
multiplyBtn.addEventListener('click', ()=> calculate('*'));
divideBtn.addEventListener('click', ()=> calculate('/'));

Answer №1

To perform arithmetic operations using JavaScript, you can define an object with functions for each operator.

const
    calculator = {
        '+': (a, b) => a + b,
        '-': (a, b) => a - b,
        '*': (a, b) => a * b,
        '/': (a, b) => a / b
    };

let result = 0;

function operate(operator) {
    if (operator in calculator) {
        result = calculator[operator](result, +inputValue.value);
    }
    displayResult(result);
}

additionBtn.addEventListener('click', () => operate('+'));
subtractionBtn.addEventListener('click', () => operate('-'));
multiplicationBtn.addEventListener('click', () => operate('*'));
divisionBtn.addEventListener('click', () => operate('/'));

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the concept of data sharing in the latest version of Next.JS - Server

When using App Router in Next.JS 13 Server Components, the challenge arises of not being able to use context. What would be the most effective method for sharing data between various server components? I have a main layout.tsx along with several nested la ...

Looking for a specific search term within the middle of strings in an array

Is there a way to improve the autocomplete feature of my input field so that it shows suggestions based on any part of the word typed in? I currently have it set up to only show suggestions if the input matches the start of a word in the array. How can I m ...

"Looking to programmatically close a modal in JavaScript that was opened using the 'data-target' attribute? Here's how you can

I have a modal template embedded in the same HTML file as my controller. <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalDeleteItem">Delete selected item</button> < ...

Tips on adding a base64 encoded image string to a JSON object using JavaScript

I'm trying to convert an image file into a JSON object using JavaScript. I've managed to turn the image into a string by utilizing base64 encoding, but I'm unsure how to then convert this string into a JSON object. Can anyone help? ...

When utilizing $resource, Protractor experiences a timeout while trying to synchronize with the page

Currently, I am testing Protractor with a small AngularJS application. Here is the test scenario: describe('Testing Protractor', function() { var draftList; it('should count the number of drafts', function() { browser.get(&ap ...

Guidance on implementing fallback font formats using FontFace API

I am exploring the FontFace API (not @fontface) and wondering if there is an easy way to include multiple font formats, similar to providing multiple sources in @fontface. Alternatively, is there a simple method to identify which font formats are supporte ...

Is it impossible to have Dynamic React Router and components?

Currently, I'm in the process of developing a dynamic router using React. The concept involves generating Routes based on the data (object) received from the backend: Menu Object: items: [ { name: "dashboard", icon: "da ...

Generating dynamic variable names in JavaScript

Looking for a similar solution. var item_<?php echo $variable->n ?> = <?php echo '32' ?> Trying to achieve something like this: var item_342 = '32' ...

Generate a new entity using a previously imported model with A-Frame

I have successfully imported a house model in .gltf format. I am now trying to extract the floor object from this model and turn it into its own individual a-frame entity for future reference. This is necessary so that I can designate the floor as the coll ...

Struggling to fetch option value from a dynamic add/remove list using a combination of PHP, jQuery, and HTML5

Having trouble accessing and displaying values from a select list. Constructed an add/remove list functionality using JQuery but unable to showcase the values using foreach and for loops. Specifically trying to obtain $existing_mID[$j] values from the &apo ...

Navigating a loop in javascript: tips and techniques

I have a challenge with three boxes that are supposed to fade in, shake, and then fade out. The IDs of each box are stored in an array and a loop is used to traverse them. However, the loop only displays the first item. I have tried various methods in Jav ...

Tips for managing modal states in functional React components in React Native using React hooks

Utilizing React hooks to manage modal opening and closing, I encountered an issue with my code. The function 'handleAddClick' is supposed to open the modal when used on TouchableOpacity, while the function 'handleClose' should close the ...

The issue of a malfunctioning react TypeScript map when used in conjunction with useContext

I am attempting to retrieve data from the TVMaze API using React, TypeScript, and useContext. Although I can display the data, the useContext does not update with the return value, so when I use the map function, nothing is displayed. Any advice on how to ...

Is there a way to trigger a function from a specific div element and showcase the JSON data it retrieves in

I am working with a React JS code page that looks like this: import React, { useState } from "react"; import { Auth, API } from "aws-amplify"; function dailyFiles(props) { const [apiError502, setApiError502] = useState(false); // Extracted into a re ...

Creating a multipart/form-data request using JavaScript/jQuery

After much searching and experimentation, I have been trying to understand the process of constructing a request to be sent using something similar to $.ajax({ contentType: "multipart/form-data", type: "POST", data: ...

The PHP function is failing to communicate with jQuery and Ajax

Having trouble with PHP return to jQuery/Ajax functionality, When I try to edit an item, the error message displays even though the success function is executed. On the other hand, when attempting to delete an item, nothing is displayed despite the succes ...

Importing an array of Vue components to be exported and utilized in the app.js file

I'm currently working on a Laravel 8 project with vue.js v2.6 and I want to clean up my app.js file by moving all of my Vue.component() declarations to a separate file. To achieve this, I created js/vueComponents.js where I placed all the vue componen ...

Prevent repetitive content on your Node.js server

After realizing my small image hosting has many duplicate content, I am looking for a solution to prevent this issue in the future. My idea is to use either checksum or hash code so that whenever a new file is uploaded, it will be hashed and compared with ...

Building numerous pagination features in a single page using Codeigniter

I'm just starting out with codeigniter and I need help creating multiple paginations on one page. I've tried it, but only one pagination is working while the others are giving me errors. Can someone please assist me? I read some suggestions that ...

Unable to import CSV file

I'm currently in the process of developing a CSV editor that involves importing a CSV file and converting it into HTML tables. Below is the code I have been working on: <html> <head> <title></title> </head> <body& ...