How to check if a JavaScript function is defined?

Front End TechnologyJavascriptWeb Development

In this tutorial, we will learn to check whether the JavaScript function is defined or not. If a programmer calls the JavaScript function without defining it, they will see the reference error with the message like “function is not defined.”

To overcome the problem, the programmer can check whether the function is defined and call the function.

We will look at the various approaches to check if the function is defined or not in JavaScript below.

Using the typeof Operator

In JavaScript, the typeof operator is useful to check the type of the variable, function, objects, etc. When we use the function name as the operand of the typeof variable, it returns the ‘function’ string, and we can check whether the function is defined. If function is not defined, typeof operator returns the ‘undefined’.

Syntax

Following is the syntax of the typeof operator.

let isFunction = typeof function_name === 'function'

Parameters

  • function_name − It is a function name without parenthesis, for which users want to check if function is defined or not.

Example

In the example below, we will create the function named test(). We will use the typeofoperator to check whether the test() function is defined or not. If function is defined, we will call the function. Otherwise, we will print the message, like ‘function is not defined.’

<html> <head> </head> <body> <h2>Check if function is defined in Javascript.</h2> <h4>Check if function is defined using <i> typeof operator.</i></h4> <div id = "output"></div> <script> var output = document.getElementById("output"); function test() { output.innerHTML = "function test() is defined."; } if (typeof test === 'function') { test(); } else { output.innerHTML = "function is not defined."; } </script> </body> </html>

In the above output, users can see that control goes inside the if statement as function is defined and prints the message from the function.

Using the instanceof Operator

In JavaScript, the instanceof operator is used to check the type of the variables of the object types. The function, object, array, etc., are JavaScript object types. So, programmers can use it with the instanceof operator.

We will use the Function object at the right operand of the instanceof operator and the function name as the left operand. It returns true if variable is of function type otherwise false.

Syntax

Users can use the syntax below to check whether the function is defined or not using the instanceof operator

let isFunction =function_name instanceof Function;

Example

The below example demonstrates the use of the instanceof operator with the function objects. We have created the demo() function and checked if it is defined or not using the instanceof operator.

<html> <head> </head> <body> <h2>Check if function is defined in JavaScript.</h2> <h4>Check if function is defined using <i> instanceof operator.</i></h4> <div id = "output"></div> <script> var output = document.getElementById("output"); function demo() { output.innerHTML = "Inside the function call."; } if (demo instanceof Function) { demo(); } else { output.innerHTML = "function is not defined."; } </script> </body> </html>

Using the try-catch block

In JavaScript, the try-catch block is useful for error handling. JavaScript produces a reference error when the programmer calls the function without defining it. We will invoke the function call in the try block to handle the error. If the function is not defined, control automatically goes to the catch block to handle the error and terminates the program's execution.

Syntax

Users can follow the syntax below to use the try-catch block to check function is defined or not.

try {
   
   // call the function here
} catch (e) {
   
   // if the function is not defined, control comes here.
}

Example

The below example demonstrates the use of the try-catch block with the function call. We have defined the demo() function and called the test() function from the try block. It will produce the error, and control will go into the catch block.

<html> <head> </head> <body> <h2>Check if function is defined in Javascript.</h2> <h4>Check if function is defined using <i> try-catch </i> block.</h4> <div id = "output"></div> <script> var output = document.getElementById("output"); function func() { output.inerHTML = "Inside the function call."; } try { test(); } catch (e) { output.innerHTML = "Inside the catch block. <br/>"; output.innerHTML += "function is not defined."; } </script> </body> </html>

In the above output, users can see that test() function is not defined, so control goes to the catch block and prints all messages of the catch() block.

We have learned the three different approaches to check whether the function is defined or not. The first and second approaches are pretty similar as both check the object type. The third approach doesn’t check for the type of variable, but if any error occurs while calling the function, it sends the control to catch block.

raja
Updated on 08-Aug-2022 08:40:53

Advertisements