I am trying to assign a function as a property of each element in an array and then call it with different arguments. My initial approach was to use an anonymous function like this:
for ( var i = 0; i < object_count; i++ ) {
objects[i].callback = function(e,x,y){ cb(e,x,y,i) };
}
However, the function is being called with the current value of i. How can I maintain the correct context for each element?
To ensure proper functionality, encasing the assignment in a function or at least on the right-hand side can help:
objects[i].callback = (function(i) { return function(e, x, y) {
cb(e, x, y, i);
})(i);
The initial anonymous function is immediately triggered, transferring the loop variable "i" into an argument (also identified as "i"; some find this approach confusing while others argue it's clearer not to change names, so the choice is yours), which is utilized by the inner anonymous function that gets returned.
An alternative solution involves utilizing a utility function instead of an inline anonymous function. The complexity arises from desiring "i" to be the final parameter of the actual callback function. The Functional JavaScript library offers a useful utility for preloading certain arguments with fixed values, generating a function that permits you to input arguments for the non-fixed parameters. An implementation could resemble this:
objects[i].callback = (function(e, x, y, i) { return cb(e, x, y, i); }).partial(_, _, _, i);
Whether this method is more favorable or less is subject to personal style and perspective.
edit after indulging in a bit more coffee - upon further review, using "partial()" may have been an unnecessary complication. It appears that positioning "i" as the last parameter for the innermost (actual) function doesn't fundamentally impact the configuration. Therefore, the previous example could also be restructured like this:
objects[i].callback = (function(i, e, x, y) { return cb(e, x, y, i); }).curry(i);
This alteration is much more straightforward. (Both approaches should suffice, or at least I believe they would. :-)
When writing code, it's important to consider scope and variable contexts.
for (var i = something; ...) {
a[i] = function() { x(i); }
}
In the above example, the variable i will be the same for all functions since it's defined in the scope of the for loop.
To ensure each function has its own specific variable context, you can utilize an anonymous function like this:
for (var i = something; ...) {
(function () {
var new_i = i;
a[i] = function() { x(new_i); }
})();
}
By creating a private context within the anonymous function, each function will have its unique variable value stored in new_i.
For further understanding, look into how closures and scope operate in JavaScript.
I have come across this code snippet. http://jsfiddle.net/0tgL7u6e/ Scripting in JavaScript var myApp = angular.module('myApp',[]); function MyCtrl($scope) { $scope.nameFilter = ''; $scope.contacts = [ {name: 'G ...
Below is a link to my jsfiddle application: http://jsfiddle.net/ybZvv/5/ Upon opening the jsfiddle, you will notice a top control panel with "Answer" buttons. Additionally, there are letter buttons, as well as "True" and "False" buttons. The functionali ...
I am relatively new to web development and currently working on a simple web page for user login authentication. My goal is to verify user credentials (username & password) on the LoginPage from a mongoose database, and if they are correct, redirect them t ...
My navigation bar has submenus with background images in .png format. Only 3 links in my navbar have these submenus. The issue I am facing is that when the menu link is in a hover state and the submenu is being hovered over, the nav link loses its hover st ...
I've been developing a web application that allows users to store collections. There is a dashboard page where all the user's collections are displayed in a table format, with each row representing a collection and columns showing the collection ...
Currently, I am working on developing a small torrent client using electron and webtorrent. Although everything appears to be functioning correctly initially, there is an issue where sometimes the resulting files from a finished download are not being save ...
Is there a way to incorporate node-menu into my TypeScript project without using require, like this: const menu = require('node-menu'); Whenever I attempt to import node-menu into my project, I encounter the following errors: https://i.sstatic. ...
Encountering a puzzling situation here. Our angular controller is successfully delivering data to the page, but we are facing an issue with rendering a table due to an unknown number of columns: <table border="1" ng-repeat="table in xc.tables"> ...
I recently started diving into the world of building web pages. To practice, I created a simple site but for some reason, I'm having trouble changing the text size. When I try to remove the background image code, it seems to work fine, but I can&apos ...
Is there a way to add a document after another document has been successfully inserted using node and mongoose? For example, I initiate the creation of a document with mongoose, and once it is successfully added, I want to trigger the insertion of another ...
I have a code snippet that fetches data from the server. I want to trigger it on document.ready(). My expectation is that the first request is sent to the server, receives a response, and then the second request is made, and so forth. However, when I insp ...
I'm struggling to figure out how to include an icon in my react dropdown button, similar to the one shown in the following example. https://i.sstatic.net/cn0b0.png The react bootstrap package I am currently using does not seem to offer a straightfor ...
Could you assist me with implementing a bootstrap and javascript collapse feature? I have two collapsible cards. The first card should be visible initially, but then switch to the second card when clicked on a link. However, upon the first click, both card ...
I am currently attempting to establish a connection between an Angular 2 frontend and a Node/Express backend using an HTTP GET request. The backend should respond by providing a list of file names from a specific folder using the fs.readdir method. I have ...
I am struggling to create a CSS Selector that follows DRY principles. The selector needs to target elements within a group but not those within a subgroup of the main group. Elements should only be direct children of the main group or wrapped in an addit ...
Is there a way in npm to install dependencies as peer-dependencies similar to the yarn option --yarn, rather than manually adding them? For instance: "peerDependencies": { "@angular/core": "^7.0.0" } Update: Further clarifi ...
I am implementing a Bootstrap 5 switch input that I need to be mandatory, meaning it should be checked by default and not uncheckable. The official documentation suggests combining the attributes checked and disabled. However, it seems like the Javascrip ...
When attempting to send a selected value from a Dropdown to an API using a POST request, I keep encountering a 405 (Method Not Allowed) error. Despite trying different ways to handle the onChange event, such as: onChange{(e) => this.onChangeHandler(e.t ...
I have developed a NodeJS/Express application that is capable of generating and downloading an Excel document (created using ExcelJS) when a user clicks on a button. Currently, the file gets automatically downloaded to the default download location of the ...
Currently, I have successfully set up next-auth in my next.js 13 project with app router, and it is functioning as expected. My next step is to incorporate internationalization into my app following the guidelines provided in the next.js documentation. How ...