How to invoke a JavaScript Function as a function?

Javascript Web Development Front End Technology

In this tutorial, we will learn how to invoke a JavaScript Function as a function.

Functions are a set of reusable codes that perform a specific task and may return a value. In JavaScript, functions are defined by the keyword function. A function has different parts, like a function name, parameter list, function body, and return statement. A function may not have any parameters and may also not have any return statement. In JavaScript, we also have functions with no function names, called anonymous functions.

Users can follow the syntax below to declare a function.

// function declaration
function function_name(parameter1, parameter2, ...){

   //function body
}
// anonymous function
let aFunc = function(paremeter1, parameter2, ...){

   //function body
}

In the above syntax, "function_name" is the name of the function, and for the anonymous function, we need a variable to store it. In this case, the variable is "aFunc". The "parameter1", and "parameter2", … are the parameters of the function. It can be zero or multiple. If the function has any return value, then after the function body, we need to return that value.

Invoke Function as function Without Parameters

Parameters are the sets of information or data that we pass into a function while calling it. A function can have a single parameter, multiple parameters, or no parameters at all. We must write the function name and put opening and closing brackets to invoke a function. For the anonymous function, we need to write the variable that stores the function and then open and close brackets.

Users can follow the syntax below to invoke a JavaScript function without parameters.

Syntax

// Function call
function_name()

// Anonymous Function call
aFunc()

In the above syntax, the "function_name" is the function name, and "aFunc" is the variable name that stores an anonymous function.

Example

In the below example, we have invoked a JavaScript function as a function. We use two buttons' click events to call the functions. The "Hide Element" button will hide the "root" element using the "hide" function, and the "Show Element" button will show the "root" element using the "show" variable call, which stores an anonymous function.


<html>
<body>
   <h3>Invoking a JavaScript Function as a function</h3>
   <button onclick="hide()">Hide Element</button>
   <button onclick="show()">Show Element</button>
   <div id="root" style="border: 1px solid black; padding: 10px; margin-top: 10px;">Welcome to Tutorialspoint</div>
   <script>
      let root = document.getElementById('root')
      function hide(){
         // hiding the element
         root.style.display = 'none'
      }
      let show = function(){
         // showing the element
         root.style.display = 'block'
      }
   </script>
</body>
</html>

Invoke Function as function with Parameters

The function parameters are the inputs in a function, and by using these parameters, the function does its task and may return some values. A function can have multiple parameters, and each parameter name should be unique. The real values of parameters are called arguments.

Users can follow the syntax below to invoke a JavaScript function with parameters.

Syntax

// Function call
function_name(a, b, ...)

// Anonymous Function call
aFunc(a, b, ...)

In the above syntax, "function_name" is the function name, and "aFunc" is the variable name that stores an anonymous function. "a", "b", ... are the parameters/arguments of the function.

Example

In the below example, we have invoked a JavaScript function as a function. We use two buttons' click events to call the functions summation and subtraction. Each function takes two parameters, "num1" and "num2", By clicking on the "Check Summation" button, we are executing the summation function, which takes the parameters and returns their summation value. We execute the subtraction function by clicking on the "Check Subtraction" button, which takes the parameters and returns their subtraction value. We are outputting the functions' return values on the web page.


<html>
<body>
   <h3>Invoking a JavaScript Function as a function</h3>
   <p>Calculate the value of Summation and Subtraction of 10 and 4</p>
   <button onclick = "summation(10, 4)">Check Summation</button>
   <button onclick = "subtraction(10,4)">Check Subtraction</button>
   <h4 id="root" style="margin-top: 10px;"></h4>
   <script>
      let root = document.getElementById('root')
      function summation(num1, num2){
         let result = num1 + num2;
         root.innerHTML = "Summation Result: " + result;
      }
      let subtraction = function(num1, num2){
         let result = num1 - num2;
         root.innerHTML = "Subtraction Result: " + result;
      }
   </script>
</body>
</html>

In this tutorial, we learned how to invoke a JavaScript function as function with and without parameters. Users should use this type of function invocation for easy function execution and task completion. It is recommended to use the parameters of the function to get some input into a function rather than calling an outer scoped variable.