Javascript function cannot be found

Question

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.

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 '13 at 14:48
it's valid...... myalert(); function myalert(){ alert('asd'); } — karaxuna, Mar 22 '13 at 14:48
It's invalid to have function declaration in blocks which are not function declaration blocs. Different browsers handle that case differently. — Denys Séguret, Mar 22 '13 at 14:48
@dystroy - is it better to put the function outside of document.ready() or not? — dotnetnoob, Mar 22 '13 at 15:00
@dotnetnoob as you want. Inside is fine. Just don't put it in the `if` block. — Denys Séguret, Mar 22 '13 at 15:02

VisioN · Accepted Answer · 2013-03-22T15:26:37.247

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.

edited Mar 22 '13 at 15:26

answered Mar 22 '13 at 14:48

VisioN

132,029
27
254
262

@dystroy Is it the best of the worst? :) – VisioN Mar 22 '13 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. – Denys Séguret Mar 22 '13 at 14:54
@dystroy: It's not explicitly mentioned in the spec. You can just point to the production of [`SourceElement`](http://es5.github.com/#x14) – Bergi Mar 22 '13 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 '13 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 '13 at 16:35

score 4 · Answer 2 · edited May 23 '17 at 12:34

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() {
    …
}

score 3 · Answer 3 · answered Mar 22 '13 at 14:48

3

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

You need to declare your function in the global scope.

answered Mar 22 '13 at 14:48

Brad M

7,689
1
19
37

6

No, not the global scope : just at the root level of the scope, which might be a function. – Denys Séguret Mar 22 '13 at 14:50

dsgriffin · Answer 4 · 2013-03-22T14:55:54.297

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();
}

edited Mar 22 '13 at 14:55

answered Mar 22 '13 at 14:48

dsgriffin

61,907
17
128
134

score 0 · Answer 5 · answered Mar 22 '13 at 14:51

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'); }

answered Mar 22 '13 at 14:51

karaxuna

25,822
11
76
111

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

Javascript function cannot be found

5 Answers5

Linked

Related