JavaScript: utilizing a function as a hash key

In my program, I need to execute different functions based on the input. If the input matches one of the predefined keys, I want to invoke the corresponding function along with some parameters:

var functions = {
  'key1': firstFunction,
  'key2': secondFunction
};

For easier reference, I created an array of command keys:

var commandKeys = Object.keys(functions);

Further in the code, I define the two functions:

function firstFunction(param) {
 // do something
};

function secondFunction(param) {
 // do something else
};

Then, I have a condition where I check for the key and call the corresponding function based on the key found:

if (commandkeys.includes(someString)) {
  var funcIndex = commandkeys.indexOf(someString);
  functions[funcIndex](someParam);
}

However, I encounter an error:

Uncaught TypeError: functions[funcIndex] is not a function(anonymous function)

Any insights or suggestions on how to resolve this issue are appreciated.

javascript

Answer №1

It appears that the use of the command_keys may be unnecessary in this scenario. Simply using the commands object should be enough to achieve the desired functionality.

var commands = {
    'key1': someFunction,
    'key2': otherFunction
};

var command = commands[some_string];
if (typeof command === 'function') {
    command(some_param);
}

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

Alternative names for Firefox's "error console" in different browsers

Are there similar tools to Firefox's "Error console" available in other web browsers? I rely on the error console for identifying JavaScript errors, but I haven't found a straightforward way to view error messages in other browsers like Internet ...

javascriptbrowser

In order to ensure that the multiselect bootstrap dropdown options drop outside of the div and prevent scroll bubbling, there are specific

I am trying to customize a bootstrap multiselect dropdown located within a div. You can find an example of what I'm working on at this link: http://jsfiddle.net/The_Outsider/8watL2L1/9/ In my design, I want the multiselect dropdown options to drop ou ...

javascriptc#jqueryscrollbarbootstrap-multiselect

Splitting arrays in JavaScript

Hi, I have a quick question that I need help with. There's a JavaScript array that I'm working with which looks like this: var myArray = [1, 3, 4, 5, 6, 7]; Now, I am looking to transform this array into the following format: var newArra ...

javascriptarrays

Issue with Passing 'key' Prop to React Component in a Mapped Iteration

https://i.sstatic.net/qeFKT.pngI'm struggling with adding a key prop to a React component in a mapped array within a Next.js project. The issue lies in a Slider component and an array of Image components being mapped. Even though I have provided a uni ...

javascriptreactjsnext.jsreact-slick

Creating a visual representation from an array of strings to produce a

My goal is to organize a list of server names into a map using a specific logic. For instance, with names like: "temp-a-name1", "temp-a-name2", "temp-b-name1", "temp-b-name2" They would be mapped as: { a: [ "temp-a-name1", "temp-a-name2" ] ...

javascriptstring

What is the process for altering the color of an HTML output depending on its values?

I created a simple HTML code to showcase some outcomes. The possible results are SUCCESS, Failure, and Still Failing. I want these results to be displayed with corresponding colors, such as green for SUCCESS, and red for both Failure and Still Failing. I ...

javascriptjqueryhtmlcss

Having trouble with material-ui installation in React, Redux, and React-Router project

Guide: https://i.stack.imgur.com/k1UMV.png Due to using redux and react router, incorporating MuiThemeProvider at the top of the chain is a bit challenging. What would be the most effective method to integrate this particular library? This is my ReactDO ...

javascriptreactjsreact-routermaterial-uireact-redux

Replace the image with text inside an anchor when the anchor is being hovered

I want a logo (we'll call it .item-logo) to be shown inside a circle when not being hovered over, but when you hover over the container, the date should be displayed. Here is the HTML code: <div id="main-content" class="container animated"> ...

javascriptjqueryhtmlcss

Using the axios response to assign data object in VueJS

When making an API call, I am receiving an expected error. While I am able to log the error message in the console, I am encountering issues trying to set a vuejs data variable with the response. Can anyone point out what I might be doing incorrectly? ...

javascriptvue.jsvuejs2axios

Error Occurred: ngRepeat directive encountered an invalid expression while attempting to render the

HTML <tr ng-repeat="sale as examples"> <td class="text-right"> @{{sale.sales_person}}</td> <td class="text-right"> @{{sale.sales_total}}</td> <td class="text-right"> @{{sale.sales_target_amount}}</td> ...

javascriptangularjs

When is it more advantageous to use Next.js instead of plain React?

As someone who is new to the world of React, I've dabbled in creating simple web applications using the React library and the convenient create-react-app command with npx. However, I've come to realize that the Client Side Render (CSR) applicatio ...

javascriptreactjsnext.jscreate-react-app

Transformation from a class component to a function component in React JS

I have a class component that I need to convert into a functional component. So, I started by refactoring the constructor. Below is the original class component: class EventCalendar extends React.Component { constructor(props) { super(props) ...

javascriptreactjsreact-hooks

Should we consider packaging the npm dependencies code along with our code as a best practice?

What is the best way to handle npm dependencies in our code bundle? If it's preferable to include the npm dependency code in our bundle, does it make sense to add it as a separate module or package? If not, how can I prevent bundling my dependencie ...

javascriptnode.jsnpmwebpack

Steps to display a div element periodically at set time intervals

I've created a user greeting message that changes based on the time of day - saying Good Morning, Good Afternoon, or Good Evening. It's working well, but I'm wondering how I can make the message hide after it shows once until the next part o ...

javascriptphphtmlcsssetinterval

Chrome debug function named "Backbone" triggered

Backbone provides the capability to activate functions in other classes by utilizing Backbone.Events effectively. a.js MyApp.vent.on("some:trigger", function(){ // ... }); b.js function test(){ doSomething(); MyApp.vent.trigger("some:trig ...

javascriptdebuggingbackbone.jsgoogle-chrome-devtools

Transforming an image object into a File object using Javascript

My goal is to utilize HTML5 on the client side in order to convert an "image object" into a "File object" for uploading to azure blob storage. I am working with AngularJs and my approach involves: Converting the image to a file Uploading the file to blob ...

javascripthtmlimage

Ways to update the dataTable in ReactJS post clicking the save button on the modal

Just starting my second week of diving into React. Looking for some guidance on how to update the dataTable in reactJs after clicking the save button in the modal. This is the structure I'm working with: I have a ParameterMaintenance.jsx file that ...

javascriptreactjsbootstrap-5

Tutorial on inserting a picture into muidatatables

Important Note: The image stored in the database is called "profileImage." I am looking to create a dynamic image object similar to other objects. When I input this code: { label: "Image", name: "profileImage" }, it simply displays the image endpoint as ...

javascriptreactjsmaterial-uimui-datatable

`How can I integrate jQuery UI using Webpack in my project?`

I recently initiated a fresh project utilizing React Slingshot and am experimenting with integrating jQuery UI accordions. I've included the jQuery UI plugin using NPM with the command npm install --save jquery-ui. From what I comprehend, Webpack auto ...

javascriptjquery-uireactjsnpmwebpack

What causes the low Performance score of a default NextJS Application with no content?

Just started experimenting with my initial Next.js project. Upon generating a new project using create-next-app, I decided to test its performance with the web application 'Lighthouse'. Surprisingly, although most other metrics scored above 90, ...

javascriptperformancenext.jslighthouse