CODEWITHSUNDEEP
javascriptinternet-explorerforeacharguments
samarjit samanta
samarjit samanta

Reputation: 1315

Javascript for..in looping over arguments ie.for( arg in arguments) does not work in IE8 but it works in Chrome 8

I faced this strange situation where foreach like construct of javascript does not work in IE but it works in FF. Well not all for..in just this special funciton does not work. I will post the code. Tested in IE8. Tested also with XHTML DTD. 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <HTML>
  <HEAD>
   <TITLE> Test </TITLE>
   <META NAME="Generator" CONTENT="EditPlus">
   <META NAME="Author" CONTENT="">
   <META NAME="Keywords" CONTENT="">
   <META NAME="Description" CONTENT="">
  </HEAD>
 <script type="text/javascript">
 <!--
  String.prototype.format = function() {         
   var formatted = this;       
   var mycars = new Array(); //some 
   mycars[0] = "Saab";
   mycars[1] = "Volvo";
   mycars[2] = "BMW";
    var arg;
     for (arg in mycars) {        alert('it comes here');     
      formatted = formatted.replace("{" + arg + "}", arguments[arg]);         }         
      return formatted;
     };

  String.prototype.format2 = function() {         
  var formatted = this;       
  var arg;
     for (arg in arguments) {        alert('it does not come here');     
      formatted = formatted.replace("{" + arg + "}", arguments[arg]);         }         
      return formatted;    
  };

 function fn() {
  var s = 'The {0} is dead. Don\'t code {0}. Code {1} that is open source!'.format('ASP', 'PHP'); 
  alert('format:'+s);
   var s2 = 'The {0} is dead. Don\'t code {0}. Code {1} that is open source!'.format2('ASP', 'PHP'); 
 alert('format2:'+s2); //does not replace {0}s and {1}s
 } 
 //-->
 </script>
  <BODY>
  <input type="button" value="click " onclick="fn();" />

  </BODY>
 </HTML>

Update I posted a wrong question that it works in FireFox but not in IE8 which was wrong. It does not work in FireFox too. Actually I got this code from post JavaScript equivalent to printf/string.format.

Upvotes: 8

Views: 9078

Answers (6)

K.L Sathish
K.L Sathish

Reputation: 51

use for(i=0;i<length;i++){} because for loop in and of is not working IE. will use normal for loop it will work fine.

Upvotes: 0

stamat
stamat

Reputation: 1979

Some browsers support for..in like Chrome and Firefox 4 to iterate arguments, but other browsers don't see it's parameters while iterating like that. I bet that on these browsers if you did JSON.stringify(arguments) the result would be an empty object. By the specification of JavaScript 1.1 and further arguments have a length parameter, so that means you can iterate them using for (var i = 0; i < arguments.length; i++) and while(i < arguments.length) loops.

Personally once I got burned using for..in for argument iteration I wrote a simple function for argument object iteration that doesn't depend on length, because the arguments are always labeled in order by IDs.

var eachArg = function(args, fn, start_from, end_where) {
    var i = start_from || 0;
    while (args.hasOwnProperty(i)) {
        if (end_where !== undefined && i === end_where)
            return i;
        if (fn !== undefined)
            fn(i, args[i]);
        i++;
    }
    return i;
};

I use it ever since when I iterate arguments and it doesn't fail me. More on about it on my blog post http://stamat.wordpress.com/iterating-arguments-in-javascript/

Upvotes: 0

stivlo
stivlo

Reputation: 85476

From my test, with Firefox 3.6.13 and IE 8 I don't see any difference in behavior, they both don't go in the second loop.

One difference between mycars and arguments is that mycars is an Array, while arguments is an Object.

To demonstrate this:

alert(mycars.constructor);    //shows: "function Array() { [native code] }"
alert(arguments.constructor); //shows: "function Object() { [native code] }"

However, with some test code I can see that "for in" works for Array and Object

var showWithForIn = function (myArgument) {
    for (i in myArgument) {
        alert(myArgument[i]);
    }
};

var testArray = function() {
    var mycars = new Array(); //some 
    mycars[0] = "Saab";
    mycars[1] = "Volvo";
    mycars[2] = "BMW";
    showWithForIn(mycars);
};

var testObject = function() {
    var myFriends = {
        0: 'John',
        1: 'Aileen'
    };
    showWithForIn(myFriends);
};

function testAll() {
    testArray();
    testObject();
}

So, I am not sure how the arguments Object is different from an Object you construct yourself with the curly braces literal. I think it is confusing, because in this test for in works for both the Array and the Object. While the "for in" doesn't work with arguments.

Again, in all tests I didn't notice any difference between FF 3.6 and IE 8.

UPDATE: As I discovered thanks to Ken comments, arguments properties are defined as not enumerable, while when defining an Object literal properties are implicitly defined as enumerable.

Upvotes: 1

Ken Franqueiro
Ken Franqueiro

Reputation: 10559

First of all, while the arguments object available within a function is not an array, it is "array-like" enough such that an incremental for loop (for (var i = 0, len = arguments.length; i < len; i++) { ... }) is preferable - not only because it runs faster, but also because it avoids other pitfalls - one of which is exactly what you're falling into.

To actually answer the question of why the second loop doesn't work, it's important to realize just what for ... in loop does: it iterates through all enumerable properties found in an object. Now, I've bolded 2 words in that statement, because I used these two words purposefully to indicate a couple of nuances that, while they may seem subtle, can drastically affect the behavior of your code if you don't realize what's going on.

First let's focus on all - by which I mean to say, not just properties of the object itself, but also potentially properties said object has inherited from its prototype, or its prototype's prototype, or so on. For this reason, it is very often recommended that you "guard" any for ... in loop by immediately additionally qualifying it with the condition if (obj.hasOwnProperty(p)) (assuming your loop were written for (var p in obj)).

But that's not what you're running into here. For that, let's focus on that second word, enumerable. All properties of objects in JavaScript are either enumerable or non-enumerable, which pretty much directly relates to whether the property shows up in a for ... in loop or not. In browsers such as Firefox and IE, as it turns out, the arguments object's numeric properties are not enumerable (nor is its length as it were), which is precisely why you're not iterating through anything!

But really, in the end, for iterating through anything that is an Array or array-like, you are better off using an incremental loop (as M. Kolodny also stated), and avoiding these shenanigans altogether (not to mention potential cross-browser inconsistencies - I seem to be noticing that in Chrome 10, the numeric properties of arguments objects are enumerable!)

Upvotes: 23

Moshe K.
Moshe K.

Reputation: 710

Try using this as a format function:

String.prototype.format = function() {
    var me = this;
    for (var i = 0; i < arguments.length; i++)
        me = me.replace(new RegExp('\\{' + i + '\\}', 'g'), arguments[i]);
    return me;
}

Now this should work:

alert('The {0} is dead. Don\'t code {0}. Code {1} that is open source!'.format('ASP', 'PHP'))

DEMO

Tested and working in IE

Upvotes: 2

casablanca
casablanca

Reputation: 70701

Well, it's supposed to work, so if it doesn't, the answer is as simple as "it's yet another bug in IE".

But the real question here is why you're using for ... in to iterate over arrays or array-like objects (such as arguments) -- just use a simple for loop instead, which works in all major browsers:

for (var i = 0; i < arguments.length; i++) {
  // do something with arguments[i]
}

Upvotes: -2

Related Questions