[javascript] Why is my JavaScript function sometimes "not defined"?

I call my JavaScript function. Why do I sometimes get the error 'myFunction is not defined' when it is defined?

For example. I'll occasionally get 'copyArray is not defined' even in this example:

function copyArray( pa ) {
    var la = [];
    for (var i=0; i < pa.length; i++)
        la.push( pa[i] );
    return la;
}

Function.prototype.bind = function( po ) {
    var __method = this;
    var __args = [];

    // Sometimes errors -- in practice I inline the function as a workaround.
    __args = copyArray( arguments );

    return function() {
        /* bind logic omitted for brevity */
    }
}

As you can see, copyArray is defined right there, so this can't be about the order in which script files load.

I've been getting this in situations that are harder to work around, where the calling function is located in another file that should be loaded after the called function. But this was the simplest case I could present, and appears to be the same problem.

It doesn't happen 100% of the time, so I do suspect some kind of load-timing-related problem. But I have no idea what.

@Hojou: That's part of the problem. The function in which I'm now getting this error is itself my addLoadEvent, which is basically a standard version of the common library function.

@James: I understand that, and there is no syntax error in the function. When that is the case, the syntax error is reported as well. In this case, I am getting only the 'not defined' error.

@David: The script in this case resides in an external file that is referenced using the normal <script src="file.js"></script> method in the page's head section.

@Douglas: Interesting idea, but if this were the case, how could we ever call a user-defined function with confidence? In any event, I tried this and it didn't work.

@sk: This technique has been tested across browsers and is basically copied from the Prototype library.

I'm afraid, when you add a new method to a Function class (by prtotyping), you are actually adding it to all declared functions, AS WELL AS to your copyArray(). In result your copyArray() function gets recursivelly self-referenced. I.e. there should exist copyArray().bind() method, which is calling itself.

In this case some browsers might prevent you from creating such reference loops and fire "function not defined" error.

Inline code would be better solution in such case.

My guess is, somehow the document is not fully loaded by the time the method is called. Have your code executing after the document is ready event.

If you're changing the prototype of the built-in 'function' object it's possible you're running into a browser bug or race condition by modifying a fundamental built-in object.

Test it in multiple browsers to find out.

A syntax error in the function -- or in the code above it -- may cause it to be undefined.

This has probably been corrected, but... apparently firefox has a caching problem which is the cause of javascript functions not being recognized.. I really don't know the specifics, but if you clear your cache that will fix the problem (until your cache is full again... not a good solution).. I've been looking around to see if firefox has a real solution to this, but so far nothing... oh not all versions, I think it may be only in some 3.6.x versions, not sure...

Verify your code with JSLint. It will usually find a ton of small errors, so the warning "JSLint may hurt your feelings" is pretty spot on. =)

I had this function not being recognized as defined in latest Firefox for Linux, though Chromium was dealing fine with it.

What happened in my case was that I had a former SCRIPT block, before the block that defined the function with problem, stated in the following way:

<SCRIPT src="mycode.js"/>

(That is, without the closing tag.)

I had to redeclare this block in the following way.

<SCRIPT src="mycode.js"></SCRIPT>

And then what followed worked fine... weird huh?

This can happen when using framesets. In one frame, my variables and methods were defined. In another, they were not. It was especially confusing when using the debugger and seeing my variable defined, then undefined at a breakpoint inside a frame.

Verify your code with JSLint. It will usually find a ton of small errors, so the warning "JSLint may hurt your feelings" is pretty spot on. =)

Use an anonymous function to protect your local symbol table. Something like:

(function() {
    function copyArray(pa) {
        // Details
    }

    Function.prototype.bind = function ( po ) {
        __args = copyArray( arguments );
    }
})();

This will create a closure that includes your function in the local symbol table, and you won't have to depend on it being available in the global namespace when you call the function.

Solved by removing a "async" load:

  <script type="text/javascript" src="{% static 'js/my_js_file.js' %}" async></script>

changed for:

  <script type="text/javascript" src="{% static 'js/my_js_file.js' %}"></script>

This doesn't solve your original problem, but you could always replace the call to copyArray() with:

__args = Array.prototype.slice.call(arguments);

More information available from Google.

I've tested the above in the following browsers: IE6, 7 & 8B2, Firefox 2.0.0.17 & 3.0.3, Opera 9.52, Safari for Windows 3.1.2 and Google Chrome (whatever the latest version was at the time of this post) and it works across all browsers.

I think your javascript code should be placed between tag,there is need of document load