Looking at this small code snippet and the output it's producing, I can't help but wonder why it's printing in this unexpected order. How can I modify it to achieve the desired output?
Cheers,
The desired result:
0
1
2
0
1
2
The actual result:
0
1
2
3
3
3
Here is the code snippet causing the issue:
var functions = [];
for (var i=0; i<10; i++) {
console.log(i);
functions.push(function() {
console.log(i);
});
};
for (var j=0; j<functions.length; j++) {
functions[j]();
};
When functions are pushed into an array, they do not log the original value of i when created; instead, they log the current value of i at the time the function is called.
After the first loop completes, the value of i becomes 10, so any functions called after that will always log the value 10.
To preserve the value of i at various stages, you can create a closure to make a copy of the value:
for (var i=0; i<10; i++) {
console.log(i);
(function(){
var copy = i;
functions.push(function() {
console.log(copy);
});
})();
};
The local variable copy will store the value of i and retain it. Alternatively, you can pass the value as a parameter to the function:
for (var i=0; i<10; i++) {
console.log(i);
(function(copy){
functions.push(function() {
console.log(copy);
});
})(i);
};
What you can expect as the result is:
1
2
...
10
10
10
... repeated 7 more times
The explanation for this outcome is quite straightforward. The console.log(i) statement within your loop correctly displays the value of i at each iteration. However, when you create and add a function to the functions array, you are effectively encapsulating all those functions over the same variable i. As the loop reaches its end, i no longer meets the loop condition, making i = 10 true. Consequently, since every one of these functions will execute console.log(i), and they are all enclosed over the same shared i which now holds the value of 10, you should anticipate seeing the number 10 printed ten times.
To mitigate this issue, it's advisable to create a function that returns another function rather than producing functions directly in a loop:
var functions = [], i, j;
function createEmitter(i) {
return function () {
console.log(i);
};
}
for (i = 0; i < 10; i++) {
console.log(i);
functions.push(createEmitter(i));
};
for (j = 0; j < functions.length; j++) {
functions[j]();
};
By following this approach, each newly created function will be confined within its own individual scope, effectively resolving the issue at hand.
Make sure to update your code example so that i is less than 3 in order for your results and function to align.
By pushing functions into the functions array, you are actually storing a reference to the variable i, which ends up being 10 after the top loop executes. Therefore, when these functions run, they will fetch the value of i (which is 10) and print it out 10 times.
Here's a practical way to visualize this:
for (var i=0; i<10; i++) {
console.log(i);
};
console.log(i); //=> 10
Remember that variables can change their values; they are not static. You are simply holding a reference to something that can be altered elsewhere.
To resolve this issue, consider making a minor adjustment to the code. Instead of storing 10 functions, store only the numbers and then execute them using a single function. This approach is more concise and efficient. While this example may have been simplified from your actual problematic code, the underlying principle still holds true.
numbers = [];
for (var i=0; i<10; i++) {
console.log(i);
numbers.push(i);
};
numbers.forEach(function(i){
console.log(i);
});
I have a set of rules that are almost similar, except for one where the parameter is optional and the other where it is mandatory. I need to consolidate them so that I can interchangeably use a single code for both cases. Is there a way to merge these rul ...
I am currently working on creating a WYSIWYGish input element for my formula, along with a LaTeX input element. <span id="editable-math" class="mathquill-editable"></span> The goal is to make these two elements work synchronously. Here's ...
I have a web application built with node, express, and angular. The app consists of two main pages - a user profile page and a login page. My goal is to redirect any user who is not logged in to the login page when they try to access the profile page. Howe ...
When running this query in ROBO 3T, the code executes correctly. However, when attempting to run it in nodejs, the code is not functioning as expected. //schema model const mongoose = require('mongoose'); const imageSchema = mongoose.Schema({ ...
<!DOCTYPE html> <html> <head> <title>Greetings Earthlings</title> <script src="HelloWorld.js" /> </head> <body> <button onclick ="pressButton()" >Press Me!</button> ...
At this moment, my React container is structured like so: class TableData extends Component { some React Functions and state changes. <Sidebar passdata as props/> } Within the Sidebar component, there is a modal that needs to update the state of b ...
My code consists of multiple return blocks, such as the SignUp() function. connectors.js const connectors = { Auth: { signUp(args) { return new Promise((resolve, reject) => { // Validate the data if (! ...
Currently, I am utilizing Material UI to cover the input component with icons. However, I have encountered an issue where there is an input element hidden and as a result, validation errors are not being displayed. The library I am using for validation i ...
i have an array of objects that are a join between the transaction, product, and user tables. I want to merge IDs with the same value so that it can display two different sets of data in one object. Here's my data let test = [ { Transac ...
Unable to execute any JavaScript using "executescript" during functional tests in IE, while it works perfectly with Firefox. Despite hours of searching on Google, I haven't been able to find a solution. Here is an example of how I am trying to call i ...
In my Vuex store, I have two getters that calculate the itemCount and totalPrice like this: getters: { itemCount: state => state.lines.reduce((total,line)=> total + line.quantity,0), totalPrice: state => state.lines.reduce((total,line) = ...
I've been working hard to get my Gauge looking just right, and now I'm attempting to update it with JSON data from Thingspeak. However, when I check the page, I keep running into a ReferenceError - it says "data is not defined." If you want to t ...
Struggling to maintain API login session in my React e-commerce app. Initially logged in successfully, but facing a challenge upon page refresh as the state resets and I appear as not logged in on the client-side. However, attempting to log in again trigge ...
I need to target paths that contain /lang? in the URL, but I am unsure how to specifically target paths that begin with /lang? I have two routes: app.get('/lang?..... app.get('/bottle/lang?....... I want to target these routes using app.use(&a ...
I am currently developing a LoRaWAN encoder using JavaScript. The data field received looks like this: {“header”: 6,“sunrise”: -30,“sunset”: 30,“lat”: 65.500226,“long”: 24.833547} My task is to encode this data into a hex message. Bel ...
After implementing this code in my service and noticing that it works, I have a question. Since $http.get() returns a promise which executes asynchronously, I am confused about why I need to use deffered.resolve(res.data) to return data in my service. Yo ...
In my app, I use an asynchronous AJAX call for each page that loads in order to track a user's flow through the application. Usually, the server request to record the visit happens quickly. However, there are instances where I seem to be missing some ...
I have a list of objects structured like this: [ { _id: "6311c197ec3dc8c083d6b632", name: "Safety" }, ........ ]; These objects are loaded as Menu Items options for my Select component: {categoryData && c ...
Currently, I am facing an issue where I am retrieving the values for three keys from my API using Axios. However, each time I make a request, the values are being displayed four times for each key. After removing one key from my data models and retesting, ...
When I structure my controllers like this: <body ng-app="app" ng-controller="ctrl"> <div ng-controller="app-get"> <app-get></app-get> </div> <div ng-controller="app-post"> <app-post">& ...