Why is javascript saying my function is not defined?

Sometimes, you may come across JavaScript function is not defined error that looks like the following:

Uncaught ReferenceError: doAction is not defined

The ReferenceError as in the case above is caused when you call something that’s not defined in JavaScript. Let me show you several things you can do to fix the error.

Make sure the function is defined inside your script

One of the small mistakes that could cause the error is that you haven’t defined the function properly. You need to define the function using either the function keyword:

function doAction[] {
  // your function code here
}

Or using the arrow function syntax as follows:

const doAction = [] => {
  // your function code here
};

Please keep in mind that functions defined through function expressions must be defined before the call. Function expressions are functions that you defined through a variable keyword as follows:

var fnAction = function [] {};
// or
let fnAction = [] => {};

From the example code above, the variable fnAction will be hoisted, but the function declaration is not, so it will be undefined as shown below:

fnAction[]; // fnAction is not defined
let fnAction = [] => {
  console.log["Executing action"];
};

See also: JavaScript hoisting behavior

That’s why it’s always better to define the function before calling it.

When you have defined the function, try calling it immediately below the declaration to see if it works:

function doAction[] {
  // your function code here
}

doAction[]; // test the function call

If it’s running without any error, then you may have several lines of code after the declaration that causes the script to malfunction.

Make sure the entire script has no error

If you’re putting the function into a script and calling it from an HTML tag, you need to make sure that the entire script has no error or the function won’t be loaded.

For example, notice how there is an extra ] right next to getElementById call:

  
    Function not defined
  
  
    Click me
    
      document.getElementById["action"]]; // extra ']' here
      function fnAction[]{
        console.log["Executing action"];
      }
    
  

Although there’s no error on the fnAction[] code, an error in any part of the script will cause the browser to ignore the rest of that script. You need to fix the error first so the rest of the code can be executed by the browser.

One way to see if you have any error is to run the HTML page and check on the console as follows:

You may find the ReferenceError fixed itself as you fix JavaScript errors from your scripts.

Make sure the script is loaded before the call.

Finally, the function is not defined error can also be caused by calling the function before the script is loaded to the browser. Suppose you have a JavaScript file separated from your HTML file as follows:

// script.js
function fnAction[] {
  console.log["executing action"];
}

Then you load the script into your HTML file, but you call the fnAction function before you load the script as follows:

  Load script demo
  
    fnAction[];
    // Uncaught ReferenceError: fnAction is not defined
  
  

The same also happens when you call it on the tag:

  Function not defined
  
    fnAction[];
  
  

To fix this, you need to call the function below the call:

  Function not defined
  
  
    fnAction[];
  

Those are the three ways you can try to fix function is not defined error in JavaScript.