IE8 Object doesn’t support property or method ‘map’

One function that I used very frequently in Functional Programming language like F# is map. For C# I can use Select function in LINQ to do the same thing. With ECMAScript5, JavaScript also comes with built-in map function.

Here are how map functions looks like in JavaScript:

var sqrt = function(x){ return x*x;};
var numbers = [1,2,3];
var squares = numbers.map(sqrt);
// squares is [1,4,9]

However, if you still have to support IE8, unfortunately, it doesn’t support map function.

To make IE8 supports the map function, you can add a Polyfill that you can find on this page. Or if you use either jQuery or Lo-Dash, you can use jQuery.map or _.map as well.

// jQuery
var squares = jQuery.map(numbers, sqrt);

// Lo-Dash
var squares = _.map(numbers, sqrt);

$(window).resize() and Internet Explorer 8

I am almost done with my consumer preview (aka beta) of my interactive HTML5 chart using Raphahël SVG (which I post about it last week). Then I realize that I should test the chart again on IE8.

I use the IE Developer tools (which you can activate by pressing F12 key) to change my current IE9 to 7 and 8 which majority of my users are still using. I have tested the chart before and for IE7 and IE8 which does not support SVG, Raphaël just generates VML and the chart looks pretty much the same.

To make it more responsive to different size of the user’s browser windows as well as their screen resolution, later, I use the JQuery resize() function to detect the window resize event and act accordingly (i.e., clear the chart, re-calculate chart items size and location, and redraw those items).

What happen was that IE8 fires resize event even when any elements on the page is resized which can be triggered by changes of many things such as height, style attributes, and so on. So when my JavaScript/Raphaël performs redraw actions, the resize event is fired again and again and again (infinite loop)!

Fortunately, this can be resolved by simple tricks of checking if the width or height of the browser window really change or not. Here is the code.


var currentHeight;
var currentWidth;

$(window).resize(function () {
   var windowHeight = $(window).height();
   var windowWidth = $(window).width();

   if (currentHeight == undefined || currentHeight != windowHeight
      || currentWidth == undefined || currentWidth != windowWidth) {

      // redraw the chart here will make IE8 fire resize event again
      // ...

      currentHeight = windowHeight;
      currentWidth = windowWidth;
   }
});

That is it. You might remember the old day with all alert statement in your JavaScript code. Debugging JavaScript was very painful when before Firebug has been introduced. Thankfully, we can easily debug JavaScript today as most new browsers are now equipped with JavaScript debugger. Enjoy coding!