JS: For loop continues to iterate after condition is false

Question

Does anyone know what would cause my for loop to continue after the conditions are met? I would post the entire file, but it is quite large. Here are the loops:

for (var j = 0; j < depKeyArr.length; j++) {
    var directory = angular.copy(dependencies[depKeyArr[j]]),
        keyArr = angular.copy(Object.keys(directory));
    for (var i = 0; i < keyArr.length; i++) {
        var next = i + 1;       

        if (keyArr[i] && !keyArr[i].includes('Params')) {
            if (keyArr[next] && keyArr[next].includes('Params')) {
                directory[keyArr[next]] = directory[keyArr[next]].split(', ') !== [''] ? directory[keyArr[next]].split(', ') : undefined
                directory[keyArr[next]].push(directory[keyArr[i]])
            }
            var paramArr = directory[keyArr[next]] ? directory[keyArr[next]] : directory[keyArr[i]]
            switch (depKeyArr[j]) {
                case 'controller':
                    angular.module('app').controller(keyArr[i], paramArr)
                    break
                case 'directive':
                    angular.module('app').directive(keyArr[i], paramArr)
                    break
                case 'factory':
                    angular.module('app').factory(keyArr[i], paramArr)
                    break
                case 'filter':
                    angular.module('app').filter(keyArr[i], paramArr)
                    break
                case 'service':
                    angular.module('app').service(keyArr[i], paramArr)
                    break

            }
        }
    }
}

So depKeyArr.length in this particular instance equals 5, and keyArr.length equals 42. Both the for loops continue to execute when those conditions are met, in spite of the fact that I would expect them to stop at 4 and 41. Any help you can offer so I can figure out why would be great.

Snippet updated above!

Also - you all mentioned i & j changing, but when I'm looking at it in the debugger, they are unchanged. I am looking at it right now - j = 5 and depKeyArr.length is 5. Similarly, i = 42 and keyArr.length is 42...and yet I'm inside both loops, specifically at the last case in the switch statement. It fails when keyArr[i] is undefined.

In response to the answer provided by OBDM, I added angular.copy() to prevent updating the array from inside the loop. It is still stepping into the loop when the boolean condition is met. What is even more perplexing is the fact that even the if condition doesn't keep it from executing the switch. It should fail to enter the following if:

if (!keyArr[i].includes('Params'))

because by then keyArr[i] is undefined.

Latest update -

It seems that I have successfully broken out of the inner loop with the latest changes, but it still continues to the switch statement and breaks on keyArr[i] even though that switch is within both loops and an if conditional which evaluates to false.

If the inner loop continues to iterate, how do you know that the outer loop does too? In regards to your outer loop, wouldn't j never get past 0? — JMK, Sep 22 '16 at 11:43
try to use break with labels: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label — Joao Polo, Sep 22 '16 at 11:46
Are you sure that `i` and `j` are changing nowhere than `for`? — webgodo, Sep 22 '16 at 11:49
@JoaozitoPolo I looked into this, but I suppose I would need a conditional, because I only want to break out of the loops when the conditions are exceeded...but this bug is ignoring the conditionals within the loops and it just directs right back to the last switch statement. It's the strangest thing... — Kraken, Sep 22 '16 at 14:51

score 1 · Answer 1 · answered Sep 22 '16 at 12:14

1

genrally speaking it is a bad practice to set the stop condition of loop with a "dynamic value" i.e a value that can be changed while iterating over the loop.

the following code generates an infinite loop:

for (var j = 0; j < depKeyArr.length; j++) {
   depKeyArr.push("whatever");
}

rather than setting the stop condition in a variable prevents from unclear behavior:

var depKeyArrLen = depKeyArr.length;

for (var j = 0; j < depKeyArrLen; j++) {
   depKeyArr.push("whatever");
}

answered Sep 22 '16 at 12:14

OBDM

177
3

As for your latest point about setting the length in a variable, I have never had to do that before. I'm more in favor of copying the array by value so that the array it is looping is static. – Kraken Sep 22 '16 at 12:27

score 0 · Answer 2 · answered Sep 22 '16 at 11:47

0

"Does anyone know what would cause my for loop to continue after the conditions are met? I would post the entire file, but it is quite large. Here are the loops:"

Im not sure what the "//blah blah more code", but in here what you need to make sure in that part is no operation involving value change of variable i and j, because usually we do a sequence loop of i, j, k, l, and so on, if you have another loop inside that bla bla more code and unconsciously put j because after i, you know what happened later..

answered Sep 22 '16 at 11:47

Hans Yulian

954
6
21

Can you explain this a bit more? "unconsciously put j because after i, you know what happened later.." There is no loop in there, but there is a switch. I did not intentionally update `i` or `j`, but I will look for that. – Kraken Sep 22 '16 at 11:51
what kind of switch is that? does it update i or j also? – Hans Yulian Sep 23 '16 at 02:37

score 0 · Answer 3 · answered Sep 23 '16 at 15:42

For anyone who may come across a similar scenario, this is simply the odd behavior that happens when the program was failing to attach the final angular service in the loop.

I went over it and over it and finally had to take a big step back and question the assumptions. I was assuming that the loops completed successfully, which they did not. That was the answer.

JS: For loop continues to iterate after condition is false

Latest update -

3 Answers3