CODEWITHSUNDEEP
javascriptfor-loopabbreviation
Simon Ferndriger
Simon Ferndriger

Reputation: 4962

Enhanced Javascript for-statement safe to use?

Using the jQuery for-loop is quite slow, which is the reason why I'm considering using the regular for-statement more often. In order to have direct access to the current element, I found the following syntax (for regular arrays, not for objects of course):

for (var i = 0, e; e = array[i]; i++) { ... }

where e in the loop represents the current element.

Is this syntax safe to use across all browsers?

Addition

OK, I guess this could work, but it is not so useful anymore for a short notation:

for (var i = 0, e; (e = array[i]) !== void(0); i++) { ... }

Thank you all for answering!

Upvotes: 1

Views: 282

Answers (3)

T.J. Crowder
T.J. Crowder

Reputation: 1075139

As naomik points out, that form of loop will break if any of the array elements has a falsey value. Falsey values are false, null, undefined, "", 0, and NaN. So it would work, for instance, for an array of non-null object references. Not so much for an array of strings or numbers.

But if your question is about the syntax, then yes, it's "safe" in that it will work (and fail on falsey elements) in all JavaScript engines. The key bits you're relying on are:

  1. That accessing the element beyond the end of the array (e.g., at array[array.length]) will give you a falsey value (undefined) rather than throwing an exception, and

  2. That the result of an assignment expression (e = array[i]) is the value that was assigned.

Yes, both of those are reliable. (Well, #1 is reliable if the array really is a JavaScript array. Host-provided array-like objects may vary.)

In any case, note that neither i nor e is scoped only to the loop. ES6 will have let, which will be, but variables declared with var are scoped to the function they're in.

Upvotes: 1

Vincent
Vincent

Reputation: 4056

I do not recommend that. You see, if your array looks like this for example:

array = ["lala", 078, false, 992, "kas"];

Then your loop would only go through the first two, since the term e = array[i]; would return false, because the third entry in the array is literally false. This is better:

for (var i = 0, e; (e = array[i])===undefined; i++) { ... }

Make sure no one overwrites the undefined variable, e.g. by using a closure: How does this JavaScript/JQuery Syntax work: (function( window, undefined ) { })(window)?

Upvotes: 1

Mulan
Mulan

Reputation: 135377

That is not a very good loop. Consider this array:

var array = [0, 1, 2, 3];

It would stop on the first element because 0 is a falsey value. Same with

var array = ["foo", "bar", false, "hello"];

It would only get to "foo" and "bar"

Consider using this loop

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

It works everywhere, only calculates array.length once, and is plenty performant.

Per T.J.'s comment, the scope of the args i and len above will exist your current function. So be careful that you don't make variable conflicts.

A somewhat common (but clunky) way of safeguarding against this is prefixing vars with _. Like this

for (var _i=0, _len=array.length; _i<_len; _i++) { ... }

Upvotes: 7

Related Questions