Course
Function Invocation
JavaScript Tutorial
This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.
Function Invocation
Function Invocation
The function invocation in JavaScript is the process of executing a function. A JavaScript function can be invoked using the function name followed by a pair of parentheses. When you write a function code in JavaScript, it defines the function with expressions and statements. Now, to evaluate these expressions, it is necessary to invoke the function. The function invocation is the synonym of the function call or function execution.
A JavaScript function can be defined using function declaration or function expression. The code inside the curly braces in the function definition are not executed when function is defined. To execute the code, we need to invoke the function.
The call a function and invoke a function are two interchangeable terms are commonly used. But we can invoke a function without calling it. For example, self-invoking functions are invoked without calling them.
Syntax
The syntax of function invocation in JavaScript is as follows
functionName()ORfunctionName(arg1, arg2, ... argN);Here 'functionName' is the function to be invoked. We can pass as many arguments as the number of parameters listed in function definition.
Example
In the example below, we have defined the merge() function taking two parameters. After that, we used the function name to invoke the function by passing the arguments.
<html><body> <p id = "output"> </p> <script> function merge(str1, str2) { return str1 + str2; } document.getElementById("output").innerHTML = merge("Hello", " World!"); </script></body></html>Output
Hello World!Invocation of Function Constructor
When you invoke a function with the 'new' keyword, it works as a function constructor. The function constructor is used to create an object from the function definition.
Syntax
Following is the syntax to invoke the function as a constructor.
const varName = new funcName(arguments);In the above syntax, we invoked the function with a 'new' keyword and passed the arguments.
Example
In the example below, we use the function as an object template. Here, the 'this' keyword represents the function object, and we use it to initialize the variables.
After that, we invoke the function car with the 'new' keyword to create an object using the function template.
<html><body> <p id = "output"> The ODCar object is: </p> <script> function Car(name, model, year) { this.name = name; this.model = model; this.year = year; } const ODCar = new Car("OD", "Q6", 2020); document.getElementById("output").innerHTML += JSON.stringify(ODCar); </script></body></html>Output
The ODCar object is: {"name":"OD","model":"Q6","year":2020}Object Method Invocation
We haven't covered JavaScript objects yet in this tutorial but we will cover it in upcoming chapters. Here, let's learn the object method invocation in short.
The JavaScript object can also contain the function, and it is called the method.
Syntax
Following is the syntax below to invoke the JavaScript object method.
obj.func();In the above syntax, the 'obj' is an object containing the method, and 'func' is a method name to execute.
Example
In the example below, we have defined the 'obj' object containing the 'name' property and the 'getAge()' method.
Outside the object, we access the method by the object reference and invoke the method. In the output, the method prints 10.
<html><body> <p id = "output">The age of John is: </p> <script> const obj = { name: "John", getAge: () => { return 10; } } document.getElementById("output").innerHTML += obj.getAge(); </script></body></html>Output
The age of John is: 10Self-Invoking Functions
The self-invoking functions in JavaScript are executed just after they are defined. There is no need to call these types of function to invoke them. The self-invoking functions are always defined using anonymous function expression. These types of functions are also called immediately invoked function expressions (IIFEs). To invoke these function, we wrap the function expression within a grouping operator (parentheses) and then add a pair of parentheses.
Example
Try the following example. In this example, we define a function to show a "Hello world" message in alert box.
<html> <head> <script> (function () {alert("Hello World")})(); </script> </head> <body> </body></html>Other methods to invoke the function
JavaScript contains two special methods to invoke the function differently. Here, we have explained each method in the table below.
The difference between the
call() and apply() method is how it takes the function arguments. We will learn each of the above methods with examples in the next chapters one by one.