Double for loop in JavaScript

Question

var
startx = 0,
starty = 0,
endx = 12,
endy = 100;

for(startx;startx <= endx; startx+=1){
        for(starty; starty <= endy; starty+=1){
            console.log(startx, endx, starty, endy);
     }
}

Expected output:

0, 12, 0, 100
0, 12, 1, 100
0, 12, 2, 100
...
0, 12, 100, 100
1, 12, 0, 100
1, 12, 1, 100
...
12, 12, 100, 100
;EOO

Output on Chrome 39+

0, 12, 0, 100
0, 12, 1, 100
0, 12, 2, 100
...
0, 12, 100, 100

So the problem is the first for loop does not iterate over startx variable.

Could you tell me why it does not iterate?

MS Edge does the same. Actual Firefox too.

Daniel Mizerski
– Daniel Mizerski

2016-05-08 19:31:15 +00:00
Commented May 8, 2016 at 19:31 — Daniel Mizerski
– Daniel Mizerski, Commented May 8, 2016 at 19:31

Andreas Louv · Accepted Answer · 2016-05-08 21:01:43Z

15

That was a fun puzzle. It took me a few times before i caught it.

The reason is that starty is not reset after the first iteration and therefore the second for loop will only run once since the condition will always go false.

You want:

var startx = 0,
    starty = 0,
    endx = 12,
    endy = 100;

for (; startx <= endx; startx++) {
    for (starty = 0; starty <= endy; starty++) {
        console.log(startx, endx, starty, endy);
    }
}

I also simplified startx+=1 to startx++, same goes for starty.

I will also suggest to get into the habit of writing each var statement on it's own:

var a;
var b;

This makes it easier to stop on when debugging. Try stepping into def() without stepping into abc().

var a = abc(),
    b = def();

How is a for loop broken down:

The for loop is broken down into 3 parts:

for(initial; condition; after)

initial is called before the loop, can safely be omitted.
condition is called just before running the code in the loop, will always be true if omitted
after is called after the code in the loop same as writing:

for(var i = 0; i < 10;) {
  // code
  i++;
}

edited May 8, 2016 at 21:01

answered May 8, 2016 at 19:32

Andreas Louv

47.3k14 gold badges109 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Daniel Mizerski Over a year ago

Thanks! (the += is my own convention - it is more clear for me :) )

David Jones Over a year ago

How comes you omit the first parameter of the for loops? I've never seen that before. Does it default to zero?

Daniel Mizerski Over a year ago

It is optional, it is just ancient thing after C, I belive

Andreas Louv Over a year ago

@DavidJones Updated the answer for you :-)

Akhilesh Singh · Accepted Answer · 2016-05-08 19:46:37Z

2

var startx = 0,
starty = 0, 
endx = 12, 
endy = 100; 
for(startx;startx <= endx; startx++){
  for(starty; starty <= endy; starty++){ 
   console.log(startx, endx, starty, endy); 
 } }

Here your second for loop execute 100 times because your condition is starty <= endy and endy assing the value of 100 . when startx is 0. After finishing the execution of second for loop the startx increment to 1 and again the processed is goes on till it gain the value of 12 . browser's shows the complete results you can console it and scroll down. You will get your desired out put. Hope it useful for you.

edited May 8, 2016 at 19:46

answered May 8, 2016 at 19:38

Akhilesh Singh

1,7342 gold badges19 silver badges35 bronze badges

Collectives™ on Stack Overflow

Double for loop in JavaScript

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related