CODEWITHSUNDEEP
javascriptloopsfor-loop
Nicholas Barry
Nicholas Barry

Reputation: 568

What is the exact order of execution of Javascript's for loop?

I'm a bit stumped by the exact order of execution of a particular for loop I'm playing with, in Codepen. Check out these two loops, which both do the same thing:

var a = ['orange','apple']; 
for (var i=0; i<2;i++) {
    alert(a[i]);
}

for (var j=0, fruit; fruit = a[j++];) {
    alert(fruit);
}

You can see this in action here: http://codepen.io/nickbarry/pen/MYNzLP/

The first loop is the standard, vanilla way of writing a for loop. As expected, it alerts "orange", then "apple".

I wrote the second loop using a suggestion from MDN (search for "idiom", here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript ).

It works, but I don't quite understand why. My understanding of for loops, which is obviously incorrect in some way (more than one way?) is that: * The for loop evaluates the truthiness of the second expression before it runs the first time. So it seems that when the for loop is evaluating the truthiness of the second expression, it should increment j before setting the value of fruit. So the first time through the loop, fruit should equal "apple". * And the loop should only run once, because after the first time through, when it's evaluating the second expression again to see if it's still true, it should once again increment j before it returns a value to fruit, and since there is no value at index position 2, it should return a falsy result, and exit the loop.

I don't understand what actually IS happening. Does the for loop run once before the second expression is evaluated? But that seems impossible, because if that happened, the alert would alert nothing the first time through, since fruit wouldn't yet have a value.

Also, the author of the MDN article seemed to like the second way of writing the loop - is there a reason that way is better? It uses fewer characters, which is good, I guess. Does skipping the third expression in the for loop save significant time? Or is it just a "it's cool because it's clever" sort of thing?

Upvotes: 1

Views: 1084

Answers (3)

shmuli
shmuli

Reputation: 5192

You can follow through the order of execution of JavaScript's for loop using SlowmoJS: http://toolness.github.io/slowmo-js/

The homepage already has the for loop loaded into the console for demonstration purposes, but you evaluate the order of operation of any code, as you see fit.

Upvotes: 0

Tesseract
Tesseract

Reputation: 8139

A for loop is really just a shorthand way of writing a while loop. e.g. this loop

for(var i = 0, j = 10; i < 10; i++, j++) {
  alert(i + ", " + j);
}

is just a shorter way of writing

var i = 0, j = 10;
while(i < 10) {
  alert(i + ", " + j);
  i++; j++;
}

So that mans this loop

for(var j=0, fruit; fruit = a[j++];) {
    alert(fruit);
}

is the same as this

var j = 0, fruit;
while(fruit = a[j++]) {
  alert(fruit);
}

Upvotes: 0

zerkms
zerkms

Reputation: 254916

for (var j=0, fruit; fruit = a[j++];) {
    alert(fruit);
}

In pseudocode is equal to:

initialize j = 0 and fruit = undefined

assign fruit = a[j] (j = 0, fruit = 'orange')
j = j + 1 (j = 1)
check fruit for being truthy (true)

alert(fruit) ('orange')

assign fruit = a[j] (j = 1, fruit = 'apple')
j = j + 1 (j = 2)
check fruit for being truthy (true)

alert(fruit) ('apple')

assign fruit = a[j] (j = 2, fruit = undefined)
j = j + 1 (j = 3)
check fruit for being truthy (false)

exit loop

Important note:

The postfix unary ++ operator works as:

  1. We return the current value of the variable
  2. We increment the value of the variable

Does skipping the third expression in the for loop save significant time?

It does not save anything at all

Also, the author of the MDN article seemed to like the second way of writing the loop - is there a reason that way is better?

It's not better in any way. Author just thinks it's cool and author likes to be cool (while they are not).

Upvotes: 4

Related Questions