ansaurus

Question

Correct use of a "for...in" loop in javascript?

Answer 1

+4 A:

There are two aspects to your question.

Use "for ... in" only to loop through the property names of objects, and never to loop through arrays (either real arrays, or things that are more-or-less like arrays, such as jQuery objects).
If you're using jQuery, it's counter-idiomatic to do things that way:

    $("select option:selected).each(function() {
      // .. "this" points to each option
    });

If you want to gather up all the settings of all the selects, you could iterate over all the <select> tags, filter out those that are set only to their "default" value, and then collect all the values in a name/value pair array.

Pointy 2010-06-07 19:06:19

+1 for jQuery .each()

Ty W 2010-06-07 19:08:05

ok, thanks, that makes sense, because I need the value of the "value" attribute of each element and "each()" was really not working, neither the "for in", but know I can see why.Thanks

jnkrois 2010-06-07 19:12:28

Answer 2

+12 A:

T.J. Crowder 2010-06-07 19:07:25

Ok, that makes sense. I don't know how many selected options I have to test each time (it changes), but I do know the possible values that can be selected.Would you say that I can hard code an object and then check the selected value against the properties of said object?Thanks

jnkrois 2010-06-07 19:12:52

@jnrois: I've updated to address your specific loop. I got a bit...head's down on the Javascript side of the question. :-)

T.J. Crowder 2010-06-07 19:24:26

That explains why I was getting screwed up results on my particular javascript. useful to know!

Wayne Werner 2010-06-07 19:26:55

`Object.prototype.foo = 1;` is perhaps a better example.

Justin Johnson 2010-06-07 19:30:08

Thanks, your code seems to be a lot smarter than mine, I'll try this variation.

jnkrois 2010-06-07 19:30:59

@Justin: Not a better example, because extending `Object.prototype` is a very, very bad idea. :-) That's why I went with `Thing`.

T.J. Crowder 2010-06-07 23:48:15

It illustrates the idea that unknown properties can be set from unknown locations better. Also, `Object.prototype` is reasonable when not writing a public API.

Justin Johnson 2010-06-08 00:05:12

@Justin: Fair 'nuff, but best not to lead the newbie down the garden path. I'd argue that you're much better off defining a `FooObject` as your base object for your private stuff and working off that. Extending `Object.prototype` basically means you can't, *ever*, use any third party *anything* in your code, private or otherwise, because so much code assumes that `for..in` will not show any properties on `{}`. Obviously this changes a bit (and I haven't worked through the implications) with the new 5th edition stuff where you can make your nifty new properties non-enumerable.

T.J. Crowder 2010-06-08 00:09:50

@T.J. Crowder That's fair, but I'd hope that libraries were with it enough to check `hasOwnProperty` where necessary.

Justin Johnson 2010-06-08 18:54:00

@Justin: Libraries, code snippets from the web, etc., etc. You'd think so, but sadly, not in my experience. :-)

T.J. Crowder 2010-06-08 21:24:53

@The-Internet /sadpanda

Justin Johnson 2010-06-08 22:07:48

Answer 3

+4 A:

You should know that the for-in statement in JavaScript is meant to enumerate object properties.

When you want to iterate over an array-like¹ object, a sequential loop (for, while, do...while) is always recommended.

Why you shouldn't use for-in for array-like objects:

The order of iteration is not guaranteed
Inherited properties are also enumerated

See also:

Iteration VS Enumeration

_{[ 1 ] By array-like I mean any object that contains sequentially numbered properties and a length property.}

CMS 2010-06-07 19:08:36

Thanks, I'll read up this a little more to learn the basics of it.

jnkrois 2010-06-07 19:13:56

+1 One thousand times this! The main difference is between iteration and enumeration. My only suggestion would to be more explicit about the other class of iteration, since there is nothing abnormal about `for..in`. Referring to `for`, `while` and `do..while` as *sequential* or *counting* loops is perhaps more appropriate.

Justin Johnson 2010-06-07 19:26:46

@Justin: Agree, *sequential loop* is the more appropriate term. The problem I think is when people come from other languages where there are constructs that *look* similar (e.g. `foreach` from Java or C#)...

CMS 2010-06-07 20:26:16

Answer 4

+1 A:

I'd do it something like this

<html>
<head>
  <title>Test Page</title>
  <script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  <script type="text/javascript">

  $(function()
  {
    function checkSelected()
    {
      var DEFAULT = "0";
      var selected = [];

      $("select option:selected").each( function()
      {
        var $option = $(this);
        var optionValue = $option.val(); 
        if ( optionValue !== DEFAULT )
        {
          selected.push( {name: $option.parent().attr( 'name' ), value: optionValue } );
        }
      });

      if ( selected.length )
      {
        $.each( selected, function( index, item )
        {
          alert( item.name + ': ' + item.value );        
        });
      } else {
        alert( 'None selected!' );
      }
    }

    // just for this demo
    $('button').click( function( event )
    {
      event.preventDefault();
      checkSelected();
    })
  });


  </script>
</head>

<body>

<select name="one">
  <option value="0">Zero</option>
  <option value="1">One</option>
</select>

<select name="two">
  <option value="0">Zero</option>
  <option value="1">One</option>
</select>

<button>Test It</button>

</body>
</html>

Peter Bailey 2010-06-07 19:17:55

I tested this and it works perfect, I'll study it, so I can understand what you did and the logic behind it. It's funny how sometimes reading code is easier than reading a real explanation.Thanks a lot for your response.

jnkrois 2010-06-07 19:26:42

You should note that I used jQuery's each() method for looping, and not the native `for` or `for..in` loops. Although this example certainly could be done with standard `for` loops.

Peter Bailey 2010-06-07 19:42:06

Noted, I'll try one or the other.

jnkrois 2010-06-07 19:53:09

Answer 5

+1 A:

A simpler way to write (what I think) your trying to achieve using .each()

// this is to know if we want to redirect
var redir = true;
$("select option:selected").each(function() {
  var val = $(this).val();

  if (val > 0) {
    alert('Found one!');
  }      
  if (val != 0) { 
    redir = false;
    // you can return false here if you want to stop processing the each loop too!
  } 
});

if (redir) {
  window.location = "/nextpage";
}

gnarf 2010-06-07 19:23:10

Please forgive my ignorance, but how is "redir" available to me ouside the "each" function, is it because you are declaring it before the each even start?

jnkrois 2010-06-07 19:35:22

@jnkrois - Yes, the variable is in the scope of the containing function, and functions inherit their base variables from their containing function.

gnarf 2010-06-07 19:38:12

Thanks, I've gotten stuck in the past because of this. I'll try it this way. Many thanks

jnkrois 2010-06-07 19:43:50

@jnkrois: Re how `redir` is available within the function passed into `each`: The function is a "closure" that has access to whatever's in scope where it's defined, more: http://blog.niftysnippets.org/2008/02/closures-are-not-complicated.html

T.J. Crowder 2010-06-07 23:55:09

ansaurus

tags:

views:

answers:

Correct use of a "for...in" loop in javascript?

related questions