Looking at the code snippet above, you can see that store.nextId and store.cache are used in the add method. It makes me wonder why not use this instead?
var store = {
nextId: 1,
cache: {},
add: function(fn) {
if (!fn.id) {
fn.id = this.nextId++;
return !!(this.cache[fn.id] = fn);
}
}
};
I appreciate all the responses to my query!
When using the store keyword, it has a slightly different meaning compared to using this. If you treat store.add like a regular function, for example passing it as an argument to another function, using store will make the function refer back to the original store, while using this would make it refer to the global object.
A tradeoff of using the add method is that it will always reference the object currently identified by the variable store, not necessarily the object originally identified by that variable. To benefit from both approaches, one can utilize an immediately-invoked function expression:
var store = (function () {
var store = {
... // same code as previously defined, but 'store' now refers to
// the local variable which remains unchanged
};
return store;
})();
It's possible that the code author didn't have a specific use case in mind and simply found it clearer to reference store as store even within its methods.
It is possible that the coder had a valid rationale for this implementation, however, at first glance, it appears to be careless and unsophisticated coding.
In my opinion, functions nested within a JS object should not rely on the external variable name (or names) used to reference that object.
If the code utilized this, it would enable the following scenario:
var storeCopy = store;
store = null;
storeCopy.add(...); // still functional
By internally referencing store, the code loses its ability to be broken down into modular components for reuse.
When dealing with methods on a names variable that is in scope, both this and store are suitable options.
I personally opt for this because it offers greater portability -- allowing you to easily move the object definition or rename store without needing to modify any code within it.
Occasionally, there may be situations where using a global name is necessary. For instance, when creating a function to be assigned as an event handler that will be bound to a different object. In such cases, if you require a reference back to store, utilizing its global name or a closure reference is recommended for better portability.
Here is the code that I have: <label>Brand</label></br> <select name="brand" id="brand" onChange="changecat(this.value);"> <option value="" selected>Select Brand</option> <option value="A">AMD</option&g ...
Recently delving into reactjs, I stumbled upon a situation in the code where the route alerts messages twice. I'm seeking advice on how to prevent this issue, please disregard the redux code involved. Any suggestions? Index.js import React from &apos ...
As someone new to working with MySQL, I have previously used PSQL in a similar manner. However, the following code is generating an error. return await db .raw( `INSERT INTO users(firstName, lastName, email, ...
Need help with the code in the app component. I know it's not ideal, any assistance would be greatly appreciated. I'm a bit lost and can't figure out how to remove an item from the list after it has been added. Everything else seems to work ...
When I create a Next.js app using the command npx create-next-app my-app --use-npm Everything is successfully installed, but when using WebStorm, I noticed that it does not auto import the <Link> component from Next.js. I have to manually import it ...
Currently, I am making updates to a website that was created by a previous employee long before I joined the team. One of the requested changes is to eliminate the orange box surrounding the navigation links. The navigation appears to be generated using Ja ...
I am currently utilizing jQuery's .animate() feature to create a smooth animation effect on the width of a <div> element when a child <input> is in focus. Nevertheless, I'm encountering an issue where the input field jumps up and down ...
I am trying to implement a tabs control using jQuery. Here is the HTML code I have: <div id="tabs" class="news1"> <ul> <li><a href="#tabs-1">Track</a></li> <li><a href="#tabs-2">History&l ...
Hey there! Here's the code I've been working on: HTML : <html> <body> <form enctype="multipart/form-data" method="post" name="image"> <input onchange="test();" ...
Currently, I am developing a nodejs typescript API where I am retrieving an array of objects using a map loop. The data for "communes", "category", and "location" is fetched from another API function based on the issuerId. However, I am facing issues with ...
I am trying to determine whether Cypress is running or not within a NextJS application. My goal is to prevent certain http requests in the NextJS application when Cypress tests are running. Currently, I am able to detect if Cypress is running by using the ...
When initializing a bootstrap datepicker from eternicode with the parameter autoclose: true, there are two undesired behaviors that occur: After closing the picker, tabbing into the next field causes you to start at the beginning of the document again, w ...
I am looking to consolidate multiple enums in a single file and export them under one export statement. Then, when I import this unified file in another file, I should be able to access any specific enum as needed. My current setup involves having 2 separ ...
const ShoppingList = ({ itemList }) => { let { loading, items } = itemList; console.log(items); return ( <div> {loading ? ( <p>Loading...</p> ) : ( <table> <thead> ...
My server is returning an error when I try to make a simple post request. It's saying that the post request has no body and all the keys have an "undefined" value. Here is the code for my post request: let alert_title = 'Alert'; let alert ...
Hello, I am experiencing some issues setting up a sticky navbar in Next.js. The current navbar doesn't seem to be functioning as expected. Is there anyone who can assist me with the code provided below? import React, { useEffect } from 'react&apo ...
When using Highchart Export, I am currently able to download multiple graphs in a single page PDF. However, I would like the first graph to be on the first page and the second graph on the second page when saving as a PDF. You can find the code in the fol ...
Currently, I am in the process of developing a forum application using Vue, which is essentially a replica of this platform. In this app, users can post questions, receive answers to those questions, and leave comments on those answers. Each question, answ ...
Currently, I am utilizing the ui grid feature. Within this feature, there is an option called hide column. I am interested in receiving an event when a user hides a column. Specifically, I would like to display an alert when a column is hidden. Is there a ...
I have a question that is related to the topic discussed here: Making a link stay active displaying hover effect upon click using javascript. I am looking for a way to disable the active class when the same link is clicked again. Any assistance on this mat ...