I am having trouble understanding this nested loop and how it works.
function foo() {
function bar(a) {
i = 2; // change value of in in enclosing scope
console.log(a + i);
}
for (var i=0; i<10; i++) {
bar(i); // infinite loop
}
}
foo();
Can someone explain why is bar called with 3? I thought first time bar is called it would be zero from inital value of i in the enclosing for loop?
I know this is an infinite loop where a + i always prints 5
I know that the value of parameter a passed to bar is always 3
I know that the value of i in function bar is always 2
Can someone walk me through one repeitition of this infinite loop, explaining the order in which things occur.
Now the reason why it steps in an infinite loop is because of 'var', i = 2 gets hoisted at the top and whenever the for loop iterates i is reassigned the value 2, therefore a never ending loop.
It is a infinite loop because i is declare with var so it remain at the top of foo function and then bar function modify the same i. So i will be values 0, 2, 3, 2, 3...
function foo() {
function bar(a) {
i = 2; // change value of in in enclosing scope
//console.log(a + i);
}
for (var i = 0; i < 10; i++) {
console.log(i);// always 0, 3, 3....
bar(i); // infinite loop
//console.log(i);// always 2
}
}
foo();
Related
The condition in the loop specifies i<3. Shouldn't the loop stop at i = 2? if so, shouldn't outside loop be 2 not 3?
Thanks.
for (var i = 0; i < 3; i++){
console.log(i, " loop")
if(i%2===0){
console.log (i,'even numbers in loop ');
}
}
console.log(i, " outside loop")
That's the correct behaviour of loops.
The loop starts with i = 0, then i = 1, then i = 2, then i = 3. oops i is no more less than 3, break the loop. that's what's going on, so when you log the value of i you get 3 and not 2.
Loop: it breaks as soon as i < 3 is not verified, which means in the last iteration. More informations about iterations.
Scope: because i is declared using var, which attaches the variable to the global scope. Using var is highly discouraged, use let instead, which declares variables in block scope. More informations about var and let.
I have a forEach function defined to do "something" with all the items in an array:
function forEach(array, action) {
for (var i = 0; i < array.length; i++)
action(array[i]);
}
var numbers = [1, 2, 3, 4, 5], sum = 0;
So I could do:
forEach(numbers, console.log);
And it would print out all the numbers because 'console.log(array[i])' prints the number to the console.
I get that part.
Here's where I'm stuck: If I pass the function below into the place of the action parameter, instead of 'console.log' then at what point does the function know about every element?
forEach(numbers, function(number) {
sum += number;
});
console.log(sum);
// 15
How does it get evaluated? If I pass console.log into the last problem and it still has to be evaluated as 'console.log(array[i])' with the '(array[i])' code next to whatever parameter is being passed in, then doesn't that get applied to the entire function too since that function is the parameter? Such as below:
function(number) { sum += number; }(array[i])
at what point does the function know about every element
At no point (just like when you pass in console.log).
The forEach function calls it on this line:
action(array[i]);
At which point, it only knows about a single value from the array because that is all that is passed into it.
(It also knows about the sum variable because that is defined in a wider scope than the function).
How does it get evaluated?
It creates a new scope (with array, action and i variables) and assigns the function to the action variable - that's a function invocation.
Your
var sum = 0;
forEach([1, 2, 3, 4, 5], function(number) {
sum += number;
});
is just the same as
var sum = 0;
{ // let's assume block scope here
var array = [1, 2, 3, 4, 5],
action = function(number) {
sum += number;
},
i;
for (i = 0; i < array.length; i++)
action(array[i]);
}
If I pass console.log into the last problem and it still has to be evaluated, then doesn't that apply to the entire function too since that function is the parameter?
Yes, exactly. You are passing a function object - and whether get that by referencing the console.log variable or by creating it on the fly (with the function expression) doesn't matter to forEach. It only will get executed with action(…) - where the array[i] value is passed for the number parameter of your function.
In JavaScript, functions are first-class citizens. That means they can be treated as variables, just like strings, numbers, etc.
When you do:
forEach(numbers, function(number) {
sum += number;
});
You are passing forEach an anonymous function. Instead of the function being in a variable, it's created on-the-fly. Inside your forEach function, action will contain your anonymous function.
In for for loop, the action function is called for each element.
Heres the solution to your problems:
function forEach(array, action) {
for (var i = 0; i < array.length; i++){
if(typeof action == 'function'){
action(array[i]);
}else{
var slices = action.match(/(.+)\.([a-zA-Z0-9]+)/);
var object = eval(slices[1]);
var action = slices[2];
object[action](array[i]);
}
}
}
I've tested it with both scenarios and it works like magic
I'm trying to make a function that will store all integers from 0 up to and including x in an array.
function range(x){
for(var counter = 0; counter <= x; counter++)
show(counter);
}
var rangeArray = [range(4)];
show(rangeArray);
This will give me 0, 1, 2, 3, and 4 (but not in an array :(), then, as if taunting me, put undefined in an array all by its lonesome.
Where is this undefined coming from, and why don't the other values go in the array?
This is what you want:
function range(x){
var result = [];
for(var counter = 0; counter <= x; counter++) {
result.push(counter);
show(counter);
}
return result;
}
var rangeArray = range(4);
show(rangeArray);
JavaScript functions always return undefined when you have not explicitly called return. Except in the case when you called the function with new. In that case the function returns this (a reference to the object that was created).
function foo() {
}
foo() // returns undefined
new foo() // returns a reference to the object that was created
Convention dictates that if a function is to be used as a constructor that it is capitalized
function Foo() {
this.x = 5;
// return this; // is implicit
}
This convention is helpful because really bad stuff will happen if you call the function Foo and forget to quantify it with new.
x = 42
Foo() // this mistake is easier to spot if the function is capitalized
// x is now equal to 5.
x = 42
f = new Foo()
// x is still 42 and f.x is 5
Why do the values not go into the array?
A program can not simply print values into its own source code. To do so would be mind bogglingly impossible to reason about. The other answers on this page are both good solutions to your specific problem.
We have a basic function called range that is similar in functionality to Pythons range function. This is a simple and effective array generator.
// Function to return array from 0-x
function range(x) {
// Start with an empty array
var arr = [],
i = -1;
// Loop through values from 0-X
for(;i++ < x;) {
// Add number to array
arr.push(i)
}
// Return array
return arr;
}
var rangeArr = range(5) //returns [0, 1, 2, 3, 4, 5]
var functions = [];
(function foo() {
for (var i=0; i<5; i++ ) {
var f = function() {
console.log(i);
}
functions.push(f);
}
for (var i=0; i<5; i++ ) {
f = new Function("console.log(i);");
functions.push(f);
}
})();
for (var i=0; i<10; i++ ) {
functions[i]();
}
the output is :
5
5
5
5
5
5
6
7
8
9
can anybody help me sort out the flow?
first of all you should know whenever you want to run this function:
Function("console.log(i);");
this would use the current context's i variable as its value. so you might want to do:
var functions = [];
(function foo() {
for (var i = 0; i < 5; i++) {
var f = function func() {
console.log(func._i);
};
f._i = i;
functions.push(f);
}
for (var i = 0; i < 5; i++) {
f = new Function("console.log(" + i + ");");
functions.push(f);
}
})();
for (var i = 0; i < 10; i++) {
functions[i]();
}
I changed it this way and my result is:
0, 1, 2, 3, 4, 5, 6, 7 ,8, 9
Why is that?
1- all of the functions in your first for loop use a single variable i, and as its last value is 5 then all would print 5.
2- the other ones which get created in your second for loop, whenever they get invoked they would use the i variable in their current context, and as far as they get invoked in your last for loop, they use the i variable in the loop, to make it clear. you can easily change your last for loop like this:
for (var j = 0; j < 10; j++) {
functions[j]();
}
and as there is no i variable in the context (I changed it to j), then your output would be:
5 5 5 5 5 undefined undefined undefined undefined undefined
undefined is there because function can not fin any i variable in the context.
It's actually printing out five 5's and then 5, 6, 7, 8, 9. The first five 5's are from var i in that for loop, the functions save a reference to that var i and access it when you run it, and since it equals 5 at the end of the for loop, they all return 5. The second set of numbers comes from the quoted function accessing i from the for loop there, ergo it printing out 5, 6, 7, 8, 9.
Lots of good answers here:
How do JavaScript closures work?
The first 'for' loop is generating 5 functions each of them creates a closure which captures the 'i' as 5 (last value of 5 for that loop after last increment) so they all render out 5 (it just shows in Chrome as the first 5 with 5 in a circle next to it meaning the same value was logged out 5 times)
The second 'for' loop generates functions that will use 'i' from the scope it executes from, in this case the scope is the 3rd 'for' loop...
Closure allow you to access the variable from parent scope, which sometime cause strange or wrong behavior, here in this scenario closure is causing the output: 5 5 5 5 5 0 1 2 3 4
I am trying this code with:
f = new Function("alert("+i+");");
In first loop:
for (var i = 0; i < 5; i++) {
var f = function func() {
console.log(func._i);
};
f._i = i;
functions.push(f);
}
you are referencing i of parent means loop variable, so five different functions are created all with the same copy of variable i, which is changing with iteration, at the end of loop where condition break is i=5 since all functions are referencing the same copy, so change to original copy will effect all. So each function now has the i=5
Now in second loop, you are appending it as a string, which doesn't refer to original copy but creating a new string for each iteration:
for (var i = 0; i < 5; i++) {
f = new Function("console.log("+i+");");
functions.push(f);
}
this create five different functions with each different string:
console.log("0");
console.log("1");
console.log("2");
console.log("3");
console.log("4");
Now calling each function created by loop1 functions[0] to functions[4] is referring the same copy of i will print 5 while second functions[5]to end has there own strings to print.
I have the following small code snippet with the following expected and real output. My question is quiet simple. Why is it printing it this sequence? and how to I print the expected output?
Gr,
expected result:
0
1
2
0
1
2
real result:
0
1
2
3
3
3
this is the code:
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] ();
};
The functions that you push into the array doesn't log the value of i as it was when the function was created, they log the value of i at the time that the function is called.
Once the first loop ends, the value of i is 10, therefore any of the functions called after that will log the value 10.
If you want to preserve the value of i at different states, you can use 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 get the value of i and retain the value. You can also 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);
};
The expected result should be:
1
2
...
10
10
10
... 7 more times
The reason for this is simple. The console.log(i) inside your loop is correctly printing the value of i at each iteration of the loop. When you create and push a function into the functions array, what you're doing is closing each of those functions over the same variable i. At the end of your loop, i no longer satisfies your loop condition, so i = 10 is true. As a result, since each of those functions is going to execute console.log(i), and they're each closed over the same i, which now has value 10, you should expect to see the value 10 printed 10 times.
To prevent this, you will want to make a function which returns a function rather than creating 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]();
};
Now, each of those created functions is closed over its own private scope variable, which resolves the problem.
You should update your code example to be i < 3 so that your results and function match up.
The functions you push into the functions array are storing a reference to the variable i, which after executing the top loop, is 10. So when it executes, it will go get the variable i (which is 10) and print that 10 times.
Here's a good way to see this in action:
for (var i=0; i<10; i++) {
console.log (i);
};
console.log(i) //=> 10
When you are using a variable, remember that the variable can change, it's not frozen at it's current value. You are only holding on to a reference to something else.
To fix this problem, I would run this type of minor refactor on the code (because the other answers have already created an extra scope, figured I'd give you something different). Rather than storing 10 functions, just store the numbers and execute them with a single function. This is a more elegant way to write it anyway, and takes up less space. I'm sure this example was abstracted from whatever code was really giving you the problem, but the general pattern still applies.
numbers = [];
for (var i=0; i<10; i++) {
console.log (i);
numbers.push(i);
};
numbers.forEach(function(i){
console.log(i);
});