Question

A very weird problem occurred, when I was trying to enable a lib (Beard.js) to support the javascript template engine Haml.

Haml could not be loaded correctly. I tracked down the code and find out that Haml has never been loaded into the page. After a lot of try and fail, I happened to make it work. The weird thing I found is:

in origin Haml lib, it is:

var Haml;

(function(){
    ...

    Haml = function(){ ... }

    ...
}());

I changed the code to :

var Haml;

(function(){
    ...

    window.Haml = function(){ ... }

    ...
}());

then it works..

WHY??? Shouldn’t Haml be automatically recognized as defined in the global scope?

Environment – IE8
Haml.js – https://github.com/creationix/haml-js
Bear.js – https://github.com/jspopisno1/Beard

————– UPDATE —————

in Haml.js, it is:

var Haml;

(function(){
    ...

    Haml = function Haml(){ ... }

    ...
}());

I guess in the javascript, the statement “function Haml(){}” makes Haml a local var. However, why can Haml be loaded correctly in Firefox & Chrome????

Answer 1

> var Haml;
> (function(){
>     ...
>     Haml = function Haml(){ ... }
>     ... 
> }());

That code does not throw any errors in IE 8 for me. The part you are missing in your question is a following statement:

alert(typeof Haml);

which shows undefined in IE and function in Firefox and others.

The assignment to Haml is a named function expression (the name is optional) and yes, IE will create a variable in the current scope with the name, other browsers don’t.