Looping through JavaScript arrays
I’ve just spent over an hour and a half (plus however long I spent last night before my battery ran out at 2am) hunting for a bug in my current JavaScript project, and it turned out that I was expecting to be able to do something I regularly do in other languages (PHP, and even Java!), but cannot in JavaScript.
var choices = [obj1, null]; var l = []; var biggest = 0; for(c in choices) { if(choices[c] === null) { l[c] = 0; } else { l[c] = calculateLength(choices[c]); } biggest = Math.max(l[c], biggest); } console.log("biggest = "+biggest);
This code was part of a work in progress, so it seemed to be working, but I was obviously expecting a few kinks to iron out. When the code was occasionally printing out biggest = undefined
, I was a bit confused, but half expectant of something being wrong. As I dug deeper, and stuck in mountains of console.log() debug statements, I became more perplexed.
I just couldn’t work it out; all along the way the correct values were being returned. I could even console.log(l);
and get what I expected.
Eventually it dawned on me that if I print the whole array on one line and it is fine, then view an element of that array on the next line and it is undefined, I must be doing something wrong with the array access.
After reading this blog post on mastering JavaScript arrays, I realised that the foreach syntax in JavaScript must be doing something a big odd, and not actually giving me the intended effect of looping through values of 0 to 1 in the variable c.
var choices = [obj1, null]; var l = []; var biggest = 0; for(var c=0; c<choices.length; c++) { if(choices[c] === null) { l[c] = 0; } else { l[c] = calculateLength(choices[c]); } biggest = Math.max(l[c], biggest); } console.log("biggest = "+biggest);
Adjusting my for loop to be a conventional counting one seems to have done the trick. The lesson is that JavaScript does not support foreach for arrays, which is a shame. Maybe it’s on the way in ECMAScript 5?