CODEWITHSUNDEEP
javascriptfor-loopcross-browser
thebossman
thebossman

Reputation: 4698

JavaScript "for (var i = 0; ...) { ... }" browser incompatibilities?

I haven't done serious JavaScript programming in a while, and I am writing an intro guide to the language for some of my colleagues. I'd like to discuss loop best practices, but there is one small detail I've kept in the back of my head:

When looping over arrays, I remember the following pattern not being safe to use because there are major browsers that don't support it: 

for (var i = 0; i < ls.length; i++) { ... }

Instead, the var keyword must be moved out of the array, as such:

var i;
for (i = 0; i < ls.length; i++) { ... }

Is this correct? I've scoured the net and cannot confirm this. Do some old browsers not support the first method? If not, which ones do not?

Upvotes: 8

Views: 40361

Answers (6)

user1106925
user1106925

Reputation:

"Is this correct?"

Unless we're talking about some really, really old browser, I'm not aware of any such issue with browsers in use today.

The only issue people likely have with the first example is that it may confuse someone into thinking that JavaScript has block scope, which it doesn't This changed since ES6, which does have block scope.

In either example, the i variable will be scoped to the enclosing variable environment, whether the enclosing environment is a function, or the global environment.

Upvotes: 13

user7941071
user7941071

Reputation: 11

bumped into this today

   for(var i=0; i < t; i++) {
//do whatever
}

my jscript was in an xsl file called from an html file - worked fine in IE, but not on other browsers - code would crash and nothing displayed

fortunately I could change it to, which worked for all tested browsers

for(var i=0; i != t; i++) {
do whatever}

also be aware of https://support.microsoft.com/en-us/help/273793/how-to-include-client-side-script-functions-in-an-xsl-document

Upvotes: 0

Jivings
Jivings

Reputation: 23260

JavaScript actually declares function level scope not block scope. Declared variables are hoisted to the top of their function. What I'm saying is your examples are actually identical. Even with the var keyword within the for statement, the i variable will be accessible outside the loop.

The only thing you have to look out for is if you omit the var the variable will be global instead of confined to the function.

Upvotes: 0

GoldenNewby
GoldenNewby

Reputation: 4452

Not that you asked for it, but you can use jQuery to do this as follows:

$.each(ls, function(i,value){
...
});

Upvotes: -1

ironchefpython
ironchefpython

Reputation: 3409

Assuming you're not supporting any browsers older than IE6, this shouldn't be an issue.

Upvotes: 0

Sarfraz
Sarfraz

Reputation: 382806

Instead, the var keyword must be moved out of the array

Not necessarily. The point is that you should NOT forget var keyword before i otherwise it will turn into global variable. So it is fine if you do:

for (var i = 0; i < ls.length; i++) { ... }

You can improve the performance of above code by creating a variables that holds that length of the array/collection rather than reading it again and again with each iteration:

for (var i = 0, len = ls.length; i < len; i++) { ... }

BTW don't worry about browser, that loop should work across browsers :)

Upvotes: 7

Related Questions