How to Call a Function in JavaScript?

Learn via video course
FREE
View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Topics Covered

In JavaScript, there are multiple ways to call a function.

Here are the different methods:

  1. Using Parenthesis: The most common way to call a function is by using parentheses after its name, passing any required arguments inside the parentheses.
  2. Using the call() function: The call() function is a method available on all JavaScript functions. It allows you to invoke a function, specifying the value of this and passing arguments individually.
  3. Using the apply() function: Similar to call(), the apply() function is used to call a function, but it accepts arguments as an array. This is useful when the number of arguments is unknown or variable.
  4. Using the bind() function: The bind() function is used to create a new function with a specified this value and any initial arguments. It allows you to bind a function to a particular object, which can be useful for event handlers or callback functions.

Let's understand each method with an example.

Method 1: Using Parenthesis

To call a function in JavaScript, you need to use parentheses after the function name, following the function's definition or reference. The parentheses are used to pass arguments (if any) to the function. Here's an example:

In this example, the function greet is defined with a parameter name that represents a person's name. To call the function and pass an argument, you use parentheses after the function name (greet). Inside the parentheses, you provide the value for the name parameter, which in this case is the string "John". The function call greet("John") will execute the code inside the function, printing "Hello, John!" to the console.

Note: If a function does not require any arguments, you still need to include empty parentheses when calling it, like myFunction(). This ensures that the function is invoked and its code is executed.

Moving ahead, there are various arguments that can be passed to get desired results let's look into each one of them.

Without Arguments

To call a function without arguments, simply write the function name followed by parentheses. For example:

In this example, the function sayHello() is defined to print "Hello!" to the console. To call the function, we write sayHello().

With Arguments

To call a function with arguments, provide the values inside the parentheses.

For example:

In this example, the function multiply() takes two arguments (a and b) and it returns the product of two. To call the function and pass the arguments, we write multiply(5, 3). The returned result is then stored in the variable result and printed to the console using console.log()

Calling a Function with Variable Arguments

JavaScript allows functions to accept a variable numbers of the arguments using the arguments object or rest parameter syntax (...).

Example using arguments object:

Example using rest parameter syntax:

In summary, to call a function in JavaScript, you use parentheses after the function name, and for functions with arguments, you pass the values within the parentheses, separated by commas. For variable arguments, you can use the arguments object or the rest parameter syntax.

Method 2: Using call() Function

Let us look at an example to understand how the call method in JavaScript can be used to create a function call.

Output

In the above example, we are defining a function square that takes one input and returns the square of the number. To call the function, we have used the call() method and passed 2 as the function argument. In this case, by default, this is set to be the global object.

A dedicated article on call function can be found here

Method 3: Using Apply() Function

The apply() function in JavaScript allows you to call a function with a specified this value and an array of arguments. It is useful when you have an array or an array-like object that you want to pass as arguments to a function.

Example:

In this example, apply() is used to call the greet() function with the arguments from the person array. The first argument to apply() is null as we don't need to set a specific this value for the function. The function is called with the arguments "John" and 25, resulting in the output: "Hello, John! You are 25 years old."

By using apply(), you can dynamically pass arguments to a function, making it helpful when the number of arguments or their values are not known in advance.

A dedicated article on apply() function can be found here

Method 4: Using bind() Function

Using the bind() function in JavaScript, you can create a new function with a specified this value and pre-set arguments. It is useful when you want to bind a function to a specific context.

Example:

In this example, bind() is used to create a new function greetJohn based on the greet function. The first argument passed to bind() is null, setting the this value to the global object. The second argument "John" is pre-set as the argument for greetJohn.

When greetJohn() is called, it outputs "Hello, John!".

The bind() function allows you to create functions with a specific context and pre-set arguments, facilitating partial application of arguments.

Conclusion

  • Functions are the block of code that performs a pre-defined operation on the passed arguments and returns a value.
  • JavaScript provides a method call() to create function calls.
  • Call methods accept two parameters, i.e., this argument and function arguments (optional).
  • Functions in JavaScript can be invoked without using the call() method and directly using the function name.
  • In JavaScript, all the functions are object methods, and if any function is not written as a method of the JavaScript object, it is treated as a method of a global object.