What is the browser location for storing JavaScript constants?

How can I retrieve the value of a constant using a string as its name, where the constant is an arrow function?

const foo = (bar) => { return bar }

I tried accessing it through the window object but got undefined:

let fn = window['foo'] // undefined

Currently, the only solution I found is to use the older function syntax:

function foo(bar) { return bar }
let fn = window['foo'] // function foo(bar) { return bar }

Is there a way to get the function from a string when it's stored as a constant?

Edit:

To clarify why I prefer defining functions this way, consider scope and mutability. Arrow functions' handling of the this keyword is more predictable and constants provide some level of safety against unintentional changes.

The potential for mutable variables in JavaScript can lead to unexpected behavior. For example:

function foo(bar) { return bar }
// Somewhere else in your code
let foo = 4;
// Later on
foo("return this string please") // foo is not a function.

In conclusion, defining functions as arrow functions within constants reduces mutability and minimizes surprises related to this.

Answer №1

Only global variables will have a corresponding property on the global object. Other entities, like constants, do not receive this treatment.

A constant's value remains confined to its declaration and does not spread automatically elsewhere.

If you need to access it using a string, consider storing it as a property of an object (preferably not the cluttered global object to avoid conflicts with other code).

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

What is the best way to trigger a controller action when the datepicker's value changes?

Hello, I have a custom datepicker and I am trying to perform a calculation when the year is changed. The code provided below does not seem to work on onchange. I also attempted using the onchange attribute and calling a JavaScript function like this oncha ...

The jQuery AJAX call is successful in Firefox, but unfortunately, it is not working in Internet Explorer

I've encountered a perplexing issue with an AJAX call. It's functioning perfectly fine in Firefox, but for some reason, it's not working in IE. Curiously, when I include an alert() specifically for IE, I can see the returned content, but the ...

Begin your meteor project with a remote MongoDB server on a Windows operating system

Currently tackling a project that requires me to integrate my meteor project with a remote MongoDB server on Windows. I successfully set the environment variable (MONGO_URL="DB LINK") from OSX using terminal commands, but I'm encountering difficulties ...

When utilizing npm install buefy and npm install font-awesome, there may be an unnecessary display of [email protected] and [email protected] extraneous errors

After installing buefy and font-awesome, I noticed that it is marked as extraneous and the folder appears with an arrow icon but is empty. How can this issue be resolved? For example: +-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...

Trouble displaying custom markers in VueJS using Google Maps API

I have integrated vue2-google-maps to display a map and add markers on specific locations. Here is the code snippet showing the map components along with the props passed to it. <gmap-map id="map" :center="center" :zoom="5" ...

The value of ng-repeat list in AngularJS does not update when its value is changed by an ajax call

I am completely perplexed. Why doesn't my ng-repeat update when there is an ajax call that changes its value? I have searched through many questions and answers here, but none of them address the issue with the ajax call. Here is the HTML: <div c ...

Updating input value in Vue using JavaScript method

When using JavaScript to set the value of an input in my Vue method, it initially appears to work. However, when I try to save the data, it only saves what was typed before the value was updated by the method. For example, if I type new yor and select "New ...

What is the best way to implement jQuery after new elements have been added to the DOM?

I'm currently working on a Sentence Generator project. The program is designed to take a list of words and retrieve sentences from sentence.yourdictionary.com based on those words. The first sentence fetched from the website is displayed using the cod ...

A guide to duplicating the Mesh of a Line entity using THREE.js

I am attempting to create a for loop consisting of 10 lines. However, I am encountering an error with line.Clone() as it is unable to find any mesh to clone from. If you have any insights on how to access the mesh of a line, please share. Below is the cod ...

Utilize resources from webpack's bundled npm package assets

I've been racking my brain over this issue for quite some time now, and I'm starting to wonder if it's even achievable. Any assistance on this matter would be greatly appreciated! The npm dilemma I have an npm package that serves as a coll ...

Steps for invoking a Node.js function from a distinct JavaScript function on the front end

I am currently working on a project that involves a node js backend (app.js) connected to an HTML, CSS, and Javascript frontend (script.js). Within my HTML file, I have a form that allows users to upload an image, triggering a function in script.js to han ...

React | Utilizing ForwardedRefs with React Components

I'm currently working on a React project where I am creating a custom component that needs to be exported using forwardedRef. However, as I attempt to do this, an error keeps popping up: error This is the code snippet causing the issue: export inter ...

What is the best way to identify the clicked cell?

I'm a JavaScript newbie trying to work with ExtJS 3.4. I've set up a basic tree with 3 columns and now I want to figure out which cell, row, or column has been selected. Currently, I'm following the example provided by Sencha at : var tr ...

Using Vue.js to bind data in two directions by using an object with v-for

I can't seem to get input data properly bound to object properties. When I try to iterate through an object to create input fields based on its attributes, the v-model data binding doesn't seem to be working as expected. Even with the code below, ...

The comparison between local variables and data can result in a significant drop in performance

My current project involves VueJS and Cesium, but I'm facing a performance issue with a significant drop in frame rate. While I have identified the problem area, I am unsure of why this is happening and how to resolve it. export default { name: ...

Having difficulty specifying numerical entries only

I have been attempting to create an input field that only accepts numbers, but for some reason it still allows letters to be entered. Why is this happening? <input type="number" pattern="[0-9]" ...

Unable to locate Vue.js $ref reference

I am attempting to dynamically adjust the padding of an element through inline styles, depending on the height of its parent. My approach involves: <div class="stock-rating positive" ref="stockRating"> <div class="stoc ...

Is it possible for using str_replace('<') to protect against code injected by users?

Recently, I've been working on a script that involves user input. In this script, I use echo str_replace('<', '&lt;', str_replace('&','&amp;',$_POST['input']));. It seemed like a solid f ...

The Gridsome website deployed on Netlify seems to be experiencing some issues. When clicking on links, the pages are not loading properly despite

After deploying my site on Netlify, I encountered an issue where the URL updates when clicking on links on the landing page, but the content does not show unless the page is refreshed. Interestingly, this issue does not occur on my local development server ...

Utilizing HTML, CSS, and JavaScript to dynamically add and remove a class from

I've been struggling with a specific issue in my 9-button grid. When I click on a button and it changes color to orange, if I click on another button, both buttons remain orange. What I want is for only one button at a time to be orange - when a new b ...