Zach’s ugly mug (his face) Zach Leatherman

Internet Explorer Array.sort Unreliable

February 24, 2010

What would you expect to be the result of executing the following code?

    // Create a medium size array, at least 100 items
    var obj = [];
    for(var j=0, k=150; j<k; j++) {
        // the value here doesn't matter.
        obj.push('ABCD'+j);
    }

    // Sort the array alphabetically.
    obj.sort(function(m,p){
        m=(''+m).toLowerCase();
        p=(''+p).toLowerCase();

        if(m > p) return 1;
        if(m < p) return -1;
        return 0;
    });

The obj Array should now be sorted, in alphabetical order based on value. BUT, in our best friend Internet Explorer, a Number Expected error may be the result. Don’t be fooled if your test array behaves correctly, it only happens intermittently for arrays of varying size!

So, I whipped up a quick test to check the damage. Iterating over array sizes from 1 to 150, running the Array sort algorithm. The following failures resulted:

Browser Failures *
Internet Explorer 6 4 sizes out of 150
Internet Explorer 7 18 sizes out of 150
Internet Explorer 8 (and Compatibility Mode) 2 sizes out of 150
Internet Explorer 9 (and Compatibility Mode) 0 sizes out of 150 (Fixed!)

* Failures may vary to the specifications of the test machine.

Of course, the Number Expected error is going to result whenever your code doesn’t return a number inside of the function callback. But the problem here is something deeper than simple application code failure. The problem is in JScript itself. Any modification to the sort arguments may result in the Number Expected error.

    // modifies the argument m and is unreliable.
    m=(''+m).toLowerCase();

This problem will manifest itself more frequently if you use the Google Closure Compiler, which restructures JavaScript to reuse argument variables if possible, probably to save the 4 character penalty of a “var ” declaration.

Normally, reusing argument variables is a safe practice for primitives, since they are passed by value and not by reference, as is the case in this Array sort example 1. So, what exactly is going on here? One commenter at the Google Closure Compiler bug seems to think that the actual array values are being passed by reference instead of by value. I’m not completely convinced that’s the case.

The Fix

Don’t reuse the argument variables inside of an Array sort function.

    // Changing the above example
    obj.sort(function(m1,p1){
        var m=(''+m1).toLowerCase(),
            p=(''+p1).toLowerCase();

        if(m > p) return 1;
        if(m < p) return -1;
        return 0;
    });

Check the source code of the demo file to see the different methods of modifying the arguments that I attempted.

  1. If you want to learn more about passing by value or reference, Jonathan Snook has a nice explanation.

Internet Explorer can’t make you do anything, it can only make you wish you hadn’t.

Updated: Added note about Internet Explorer 9 and its Compatibility View. Looks like it’s fixed!


< Newer
Point, Charset, Match: Character Encoding in JavaScript
Older >
If the Menu Fitts, We Must Acquit

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He is the creator and maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 79 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

13 Comments
  1. ishtar Disqus

    25 Feb 2010
    Nice write-up. I wonder if your suggestion can be incorporated into the compiled code Google Closure compiler outputs. I noticed that the same solution (of not reassigning the argument variables) fixes the issue in IE for the problem that led me to post that ticket.
  2. Zach Leatherman Disqus

    25 Feb 2010
    I don't see why they wouldn't incorporate it, since it is introducing bugs in all versions of Internet Explorer. We'll see how your report pans out. I've submitted a bug before to the Closure Compiler team and it was fixed right away.
  3. Pritesh Patel Disqus

    24 Apr 2010
    Thanks for this. I got my sort function working in IE8 because of this. Otherwise, it was only working in Firefox and Google Chrome.
  4. Valentin Iliescu Disqus

    05 Sep 2010
    IE 9 Preview seems to be fine, ran the test several times with no failures.
  5. JKL Disqus

    04 Jan 2011
    Excellent post. In my case this bug caused the first parameter to become undefined. Inspecting it in the script debugger gave a "Variable uses an Automation type not supported in JScript" error. The typeof operator returned "unkown."
  6. JKL Disqus

    04 Jan 2011
    For the benefit of Google, that last sentence should have been:The typeof operator returned “unknown.”
  7. Mario Zito Disqus

    22 Feb 2011
    GREAT POSTIt just has happened me after having worked ok in my scripts for some time and was quite confussed about the cause. This saved me MANY hours of debugging in IE.THANKS !
  8. mort Disqus

    03 Mar 2011
    Thank you. Thank you. Thank you!
  9. Aldonio Disqus

    16 Jun 2011
    Really thanks for your article, that issue of IE was driving me crazy.What I did to fix it before reading your article was to put the same code in a try/catch statepent but I wasn't happy with that solution :Phttp://pastebin.com/wCKbuuDV
  10. Marcus Disqus

    10 Nov 2011
    Thanks for this. I bumped to the similar problem. I thought surely sort-functions the same in all browser, but should've known better.In my case the switchingreturn (a.label > b.label);to return (a.label > b.label ? 1 : -1);made IE work.
    1. deepa Disqus

      11 Apr 2014
      this helped! thank you!
  11. Al Disqus

    09 Jan 2012
    Thanks so much for posting this. I was banging my head against the wall before I came across this.
  12. YuC Disqus

    17 Dec 2012
    Hi Zach, i am having the same issue on IE and can't be reproduced, i will try your solution and test if it's OK, and do more test on this, thanks
Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)