First Expression in a Javascript For Loop - what's with the comma?

Question

I'm working through an HTML5 drag and drop example http://www.sitepoint.com/html5-file-drag-and-drop/, but can't figure out exactly what is happening in the loop at the end of this function-

function FileSelectHandler(e) {

    // cancel event and hover styling
    FileDragHover(e);

    // fetch FileList object
    var files = e.target.files || e.dataTransfer.files;

    // process all File objects
    for (var i = 0, f; f = files[i]; i++) {
        ParseFile(f);
    }

}

As far as I know, the first expression should just be i=0. What is happening with the , f? As long as the files array contains key i, i gets incremented, f is parsed and it then looks for files[i] again, right?

T.J. Crowder · Accepted Answer · 2011-11-23 22:25:16Z

5

In a for loop, you can have multiple initializers separated by commas. That's what you have there, combined with a lazy (and misleading) var. In this particular case, it's equivalent to:

function FileSelectHandler(e) {
    var i, f, files;

    // cancel event and hover styling
    FileDragHover(e);

    // fetch FileList object
    files = e.target.files || e.dataTransfer.files;

    // process all File objects
    for (i = 0; f = files[i]; i++) {
        ParseFile(f);
    }
}

...because var is badly misunderstood in JavaScript. But probably a better example of using multiple initializers would be:

var a = [1, 2, 3], index, len;

for (index = 0, len = a.length; index < len; ++index) {
    // Do something with a[index]
}

There, with the misleading var removed, we can see that there are two distinct initializers at the beginning of the for statement.

answered Nov 23, 2011 at 22:25

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

1 Comment

Adam Rackis Over a year ago

+1 to you, both for your previous corrections to me, and your more complete answer

Justin Niessner · Accepted Answer · 2011-11-23 22:23:49Z

2

, f simply declares another var f. The condition runs until the index i is not found in the assignment f = files[i] (the assignment returns false breaking the loop). That loop is the equivalent of:

for(var i=0; i < files.length; i++){
    var f = files[i];
    // rest of code
}

answered Nov 23, 2011 at 22:23

Justin Niessner

246k40 gold badges416 silver badges546 bronze badges

Comments

stusmith · Accepted Answer · 2011-11-23 22:25:30Z

2

It's just declaring a local variable named f.

A (slightly) more jslint-friendly version might be:

function FileSelectHandler(e) {
    var files, i, f;

    // cancel event and hover styling
    FileDragHover(e);

    // fetch FileList object
    files = e.target.files || e.dataTransfer.files;

    // process all File objects
    for (i = 0; f = files[i]; i++) {
        ParseFile(f);
    }
}

Variables in JavaScript have function-scope, and hence declaring them at the top of the function makes that clearer.

(Incidentally, naming ordinary functions with a capital letter is confusing - that's normally used for constructors).

answered Nov 23, 2011 at 22:25

stusmith

14.1k9 gold badges59 silver badges89 bronze badges

Comments

Adam Rackis · Accepted Answer · 2011-11-23 22:43:11Z

1

That's just another variable initialization that runs before your for loop starts.

Since all declarations in JavaScript are hoisted, i and f are declared at the top of the function; both are initially set to undefined. The loop then initializes i to zero, and f remains undefined.

At each pass of the loop, f is set to files[i]. If this new value of f is "falsy"—null, undefined, false, empty string, NaN—the loop terminates. Otherwise the loop executes again.

edited Nov 23, 2011 at 22:43

answered Nov 23, 2011 at 22:22

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

11 Comments

Mark Over a year ago

Oh my. That's so obvious now. Guess I'm used to not declaring vars in the loop. Is that a bad thing? Either way, guess I'll change the way I do it now. Thanks, @Adam.

T.J. Crowder Over a year ago

+1, but: "The for loop is declaring i, and initializing it to 0, and declaring f" Actually, the for loop is doing nothing to declare those variables. The declaration is independent of (and precedes) the for loop; it happens upon entry into the function, long before the for loop happens.

Cruachan Over a year ago

@Mark I think the fact you had to ask makes it a bad thing.

Adam Rackis Over a year ago

@T.J.Crowder - I said conceptually to try to help OP understand. Thank you for correcting me (again) on terminology regarding the loop not initializing f.

T.J. Crowder Over a year ago

@AdamRackis: You're very patient. ;-)

|

Bill Blankenship · Accepted Answer · 2011-11-23 22:24:30Z

0

The , f is just a declaration of a var. Within the first set of semicolons (var i = 0, f;) is where declarations occur.

answered Nov 23, 2011 at 22:24

Bill Blankenship

3,3667 gold badges46 silver badges75 bronze badges

Comments

Dennis · Accepted Answer · 2011-11-23 22:25:12Z

0

var i=0, f declares the variables i and f (and initializes the first to 0).

If you do not declare f, it becomes a global variable which could generate conflicts.

answered Nov 23, 2011 at 22:25

Dennis

14.5k3 gold badges51 silver badges58 bronze badges

Collectives™ on Stack Overflow

First Expression in a Javascript For Loop - what's with the comma?

6 Answers 6

1 Comment

Comments

Comments

11 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

11 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related