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.
Exploring the possibilities of Vuetify 2.0 in my current project has led me to dive into the v-stepper component, designed for displaying progress through numbered steps. In the example provided in the playground, I noticed the use of the <template> ...
I'm currently working on implementing file upload functionality using the onchange event. I encountered an error stating that 'file is not defined.' //html file <input type="file" style="display: none;" onchange="angular.element(th ...
Is there a way to separate HTML from data/methods in VueJS to avoid having one long file with both? I tried moving the contents of my <script> section into a new file called "methods.js" and importing it using: <script src="methods.js"> Note ...
When it comes to reverting state location back by 1 step in Angular, we can utilize something along the lines of this.location.back();. This method works well unless the system redirects to the same URL but with different query parameters. In such cases, ...
Encountering an issue with VS2019 while attempting to format this code section. <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="milestone.ascx.cs" Inherits="uc.dms.milestone" %> <section class="content-header"> <h1> ...
After days of hard work and research, I finally figured out how to achieve what I needed. In my React App, I have a Material UI table that I want to load with pre-rendered checks in the DOM based on entries in a selected array. The selected array contains ...
I need assistance with this issue. I am trying to hide text by clicking on a link, but it doesn't seem to be working correctly. Even though I tried the following code, I can't figure out why it's not functioning as expected. Is there a diff ...
Here is the code snippet I am working with: sTAT **javascript** var acc = document.getElementsByClassName("item-wrapper"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function(){ this.classList.toggle("selected"); this.nextElementS ...
I have a div element that looks like this: <div class="progress" id="progress-bar"></div> I am using the following JavaScript code along with an ajax call to retrieve some data. The data returned is 0, however, the content is not being added ...
Currently working on a game for my school project. Originally designed to be an online multiplayer game, but have only been able to test it locally so far. Need help figuring out how to modify my server code to make it functional as a legitimate online ser ...
Looking to load a specific div on my webpage via Ajax call, but the content I want to load is itself loaded via ajax. This means I can't get the full HTML content as desired. function loadajax(){ $.ajax({ url: 'http://callcom-com-au.myshopify. ...
I'm working on a screen that has filters displayed vertically, but I want to align them horizontally and have the filter options arranged in two columns. I've tried using CSS properties like spacing, clear, and display block, but the checkboxes/l ...
On one of my pages, I have a section that references another page's div id to trigger a click event for editing specific form fields. This is the profile page: <a href="<?php echo base_url('settings_pro/edit'); ?>" name="pull-righ ...
I am looking to deactivate a tab and if it happens to be active, I want the system to automatically switch to the next tab. I attempted myPanel.tab.disable(); if(myPanel.tab.active) myPanel.NextSibling().tab.setActive(); and myPanel.tab.disable(); ...
I am facing a similar issue in my web application where I am using PHP, HTML, and JavaScript. What I want is to be able to select a folder and obtain the full path of that folder for backing up data. For example, when a user enters backup.php, they should ...
Below is a simple code snippet that I wrote: HTML & CSS: <!DOCTYPE html> <html> <head> <title> JavaScript Console </title> <style> button { text-align:center; ...
Currently, I am utilizing styled-components and creating components through their tagged template literal syntax like this: const Button = styled.button` background-color: papayawhip; border-radius: 3px; color: palevioletred; ` In a specific scenar ...
Need help! I'm attempting to fetch JSON data using AJAX and load it into a select control. However, the process seems to get stuck at "Downloading the recipes....". Any insights on what might be causing this issue? (Tried a few fixes but nothing has w ...
Perhaps this code snippet below functions correctly as it is, but I'm uncertain if it's the best approach to prevent potential runtime issues. Here's the code in question: const ep = `${environment.api.baseUrl}/login`; return this.http.pos ...
Currently, I am utilizing Sailsjs version 0.12.1 along with node.js 4.2.6 My objective is to upload a file from the front-end (built using angular.js) through an API and then proceed to upload this file to an AWS S3 bucket from the backend. When sending ...