CODEWITHSUNDEEP
javascript
kpg
kpg

Reputation: 671

javascript choices for looping over select options

Recently I stole some javascript to select an option in a select element:

    var el=document.getElementById('mySelect');
    var opts=el.options;
    for (var opt, j = 0; opt = opts[j]; j++) {
        if (opt.value == 'Apple') {
          el.selectedIndex = j;
          break;
      }
    }

It works fine, but as I looked at it I realized it was different from what I would have written:

    var el=document.getElementById('mySelect');
    for (var j = 0; j < el.options.length; j++) {
        if (el.options[j].value == 'Apple') {
          el.selectedIndex = j;
          break;
      }
    }

In looking at the first code, what stops the loop if 'Apple' is not found? Which one is 'better'?

Upvotes: 0

Views: 680

Answers (2)

Akrion
Akrion

Reputation: 18515

Long story short:

In your for loop var opt is executed once after which you have subsequent opt = data[i].

This is important because:

var opt, data = [1, 2];    // defined once
console.log(opt = data[0]) // 1
console.log(opt = data[1]) // 2
console.log(opt = data[2]) // undefined

When the for loop condition evaluates to falsy it will halt.

So in your case it does stop when opt = data[i] ends up being a falsy value - undefined

Which is at the point of i being 5 and data[i] becoming undefined and being assigned to opt ... which returns as a final result undefined.

You should also consider using this (if ES6 is an option):

var el=document.getElementById('mySelect');
el.selectedIndex = el.options.findIndex(x => x.value === 'Apple')

It is shorted and easier to read :).

Upvotes: 0

mherzig
mherzig

Reputation: 1587

In either case, the second expression determines if the loop should continue or stop. In yours,

for (var j = 0; j < el.options.length; j++) {}

it's straightforward, j will increment and as long as j is less than the options length it's true, and at some point it is equal to the length and then it stops. In the other one,

for (var opt, j = 0; opt = opts[j]; j++) {}

the difference is that they are declaring a variable opt and in the second expression set it to the (also incrementing) array index. At some point, j goes beyond the bounds of the array, and opts[j] is undefined. And since an equality expression in JS is the value of the right site, that expression is also undefined, which is falsy, and the loop stops.

As for which is better? Both work. But as you had to scratch your head and wonder about one of them, how much do you want to depend on code that's more difficult to read?

Upvotes: 2

Related Questions