1

I have the following code in document.ready()

if ($("#site-master").length > 0) {

    setMinContentHeight();

    function setMinContentHeight() {

        // removed for clarity
    }
}

I simply check if the page is correct (#site-master), then call my minimum height function, however I'm getting the following error in firebug: ReferenceError: setMinContentHeight is not defined.

I'm no javascript expert, but how can this be? The function works if I move it outside of document.ready(). I have checked and the code inside the if statement is reached.

Also, is this the best way of achieving what I want?

Thanks in advance.

8
  • 1
    put your function above the call
    – Jake Zeitz
    Mar 22, 2013 at 14:48
  • 1
    you should define that function before you use it Mar 22, 2013 at 14:48
  • 2
    That's an invalid location for a function declaration.
    – Bergi
    Mar 22, 2013 at 14:48
  • 1
    Your function is called before it is declared, which would not happen if you moved it to the global scope (ie outside document.ready())
    – darma
    Mar 22, 2013 at 14:48
  • 3
    It's invalid to have function declaration in blocks which are not function declaration blocs. Different browsers handle that case differently. Mar 22, 2013 at 14:48

5 Answers 5

10

Never declare your functions inside if or for statements:

function setMinContentHeight() {
    // removed for clarity
}

if ($("#site-master").length > 0) {
    setMinContentHeight();
}

If we address the ECMAScript specification, according to Chapter 12, if clause is considered to be a Statement (as well as for, while, with, try/catch, etc).

Hence, following the NOTE from Semantics section:

Several widely used implementations of ECMAScript are known to support the use of FunctionDeclaration as a Statement. However there are significant and irreconcilable variations among the implementations in the semantics applied to such FunctionDeclarations. Because of these irreconcilable differences, the use of a FunctionDeclaration as a Statement results in code that is not reliably portable among implementations. It is recommended that ECMAScript implementations either disallow this usage of FunctionDeclaration or issue a warning when such a usage is encountered. Future editions of ECMAScript may define alternative portable means for declaring functions in a Statement context.

It means that we cannot guarantee the consistent behavior in such cases, and, as a result, we will always get exception in strict mode in case if function was declared inside the statement.

5
  • @dystroy Is it the best of the worst? :)
    – VisioN
    Mar 22, 2013 at 14:53
  • No, it's right. You could precise that browsers handle function declared in conditioned blocks in different ways. And an ecmascript reference would probably bring more rep. Mar 22, 2013 at 14:54
  • @dystroy: It's not explicitly mentioned in the spec. You can just point to the production of SourceElement
    – Bergi
    Mar 22, 2013 at 15:03
  • 1
    @Bergi Well, there is some sort of note in Chapter 12. I have added the note to the answer.
    – VisioN
    Mar 22, 2013 at 15:17
  • 1
    Thanks for adding the notes about FunctionDeclaration vs Statement and the incompatible syntax extensions in various browsers. It is a useful lesson!
    – dsh
    Mar 22, 2013 at 16:35
4

First, read on the difference between var functionName = function() {} and function functionName() {} to understand function declarations vs expressions. Now what do you have? Nothing of the two, since function declarations need to be on the top level of function/script code - nesting them in blocks is not allowed. It's called a function statement, is nonstandard and working differently.

Put it outside the if-block:

// here
if ($("#site-master").length > 0) {
    setMinContentHeight();
}
// or here:
function setMinContentHeight() {
    …
}
3
if ($("#site-master").length > 0) {
    setMinContentHeight();
}
function setMinContentHeight() {
        // removed for clarity
}

You need to declare your function in the global scope.

1
  • 6
    No, not the global scope : just at the root level of the scope, which might be a function. Mar 22, 2013 at 14:50
2

Place the call after you've defined the function and don't define functions inside an if block:

function setMinContentHeight() {
    // removed for clarity
}

if ($("#site-master").length > 0) {
    setMinContentHeight();
}
0

Maybe you have problems with browser compatibility, but it works like this:

right:

n();
function n(){ alert('1'); }

wrong:

n();
var n = function(){ alert('1'); }
4
  • No : that's only valid at the root level of the scope, not in an inner conditionned scope. Mar 22, 2013 at 14:52
  • @dystroy this works too: if(true){ n(); function n(){alert('1');} }
    – karaxuna
    Mar 22, 2013 at 15:03
  • Please read the links Bergi provides : kangax.github.com/nfe/#function-declarations-in-blocks Mar 22, 2013 at 15:06
  • @dystroy thanks, I have learned something new. But in question code everything should work
    – karaxuna
    Mar 22, 2013 at 16:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.