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 ¹. 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.

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!

13,337 Views

< Newer
Older >

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

13 Comments

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.
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.
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.
Valentin Iliescu Disqus
05 Sep 2010

IE 9 Preview seems to be fine, ran the test several times with no failures.
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."
JKL Disqus
04 Jan 2011

For the benefit of Google, that last sentence should have been:The typeof operator returned “unknown.”
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 !
mort Disqus
03 Mar 2011

Thank you. Thank you. Thank you!
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
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!
Al Disqus
09 Jan 2012

Thanks so much for posting this. I was banging my head against the wall before I came across this.
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