In the previous tutorial, we learned how to call a function in JavaScript without using parameters.

In all programs, we have created functions without parameters in the script. We have declared no parameters in the parameter list and it is empty.

Now, we will learn how to call a function in JavaScript with passing argument values. We declare functions with any number of parameters, but commas must separate them.

Once the JavaScript function with parameters is declared, we need to pass argument values into a function to change the function’s behavior when it gets called.

In other words, when we call a function, we can pass along some values to it. These values are parameters or arguments. Let’s understand in more detail.

Formal Parameters in JavaScript

---

Function parameters in JavaScript are the local variables declared inside the function definition. They are also called formal parameters.

Each function definition contains a parameter list enclosed in parentheses. Function parameters receive the real values passed when the function gets called.

The general syntax to declare a function along with a parameter list is as:

function functionName(parameter1, parameter2, parameter3...) {
// code to be executed
}

Key points of Formal Parameters in JavaScript:

1. Parameters in the list are optional. So, the parameter list may be empty or it may contain any combination of data types, such as integer, float, character, etc.

2. Since JavaScript is loosely typed, so we do not need to specify data type of parameters, as in C++, Java, and other strictly typed programming languages.

3. Since parameters are local variables for the function, so they exist only inside the function where they defined.

4. JavaScript functions do not perform type checking on the passed argument values.

5. They do not check the number of arguments received.

Consider the following examples.

// Formal parameters in function definition.

Let us consider another example to understand more clearly.

In the above function, x and y are formal parameters.

Arguments in JavaScript

---

Arguments in JavaScript are the actual values or data passed to variables (i.e. parameters) defined in the function definition. Sometimes, argument are also called actual parameters.

A function uses argument values when it gets called. Argument values always go between the function parentheses, and replace those parameters defined during function definition. Then, the body of method executes with these values.

Consider the following examples.

var x = sum(40, 50);
var y = sub(12, 10);

The values 40 and 50 are the arguments with which we will call a function by passing these values.

Note: Argument values passed to the function must list in the same order as the parameters in the function definition.

How to call Function in JavaScript by passing Arguments/Parameters

---

1. Let’s take a simple example program in which we will call a function by passing argument values.

Program code 1:

Output:
     Sum of two numbers: 50

In this example, we have defined a function named sum() with two parameters in the head section of HTML document. When we will call this function by passing argument values, the code inside the function will execute with these values.

---

2. Let’s take another example in which we will calculate an average of three numbers.

Program code 2:

Output:
     Avg of three numbers: 30

How to call Function in JavaScript Onclick

---

To call a function in the html document, we have to make a simple button and using onclick event attribute (which is an event handler) along with it, we will invoke the function by clicking on the button.

1. Let’s create an HTML program where we will pass argument values to a function parameter list during function call. When a user clicks on button, the function will invoke.

Program code 3:

   
Please, click on the given button to call a function
   

In this program, we have defined a function named “display()” with three parameters: name, age, and gender, and defined it in the head section of the HTML document.

To call this function from head, we have used a button in HTML’s body section. When the user clicks that button, the function is called with passing argument values to function parameters and gets executed. The output of this program is as:

Output:
    Name: John Age: 25 Gender: Male

2. Let’s create another HTML program where we will define a function inside the script of head section and call it from inside the script and from the body section using button.

Program code 4:

Output:
     Distance travelled: 125
     Distance travelled: 120 (on clicking button)

Calling Functions by Passing Arguments from inside another Function

---

Let’s create a JavaScript program in which we will call functions by passing arguments from inside another function. We will calculate addition, subtraction, multiplication and division of two numbers.

Program code 5:

Output:
     Sum: 50
     Sub: 20
     Multiply: 200
     Division: 4

Calling Functions with Default Argument Values

---

If we call a function by passing fewer arguments than the number of named parameters, the extra parameters turn up as undefined.

For example, if a function definition contains three parameters, but we call it with two arguments, the third parameter will set with a value of undefined in the function.

Similarly, if we call a function by passing more arguments than the number of parameters, then they ignored.

Consider the following the example program.

Program code 6:

Output:
     Value of x = 25
     Value of y = 20
     Value of z = undefined
     Value of a = 2
     Value of b = 4

As you can observe in the program, the first function contains three parameters, but we call it by passing only two arguments. As a result, the third parameter sets with the value of undefined.

How to Set Default Parameter Values?

JavaScript also allows us to set default values something other than undefined. The most widely supported and accepted way is that first check whether the argument is undefined.

If so, then set the default value. For example, consider the below program where the function has one parameter. Inside the function, we will check whether the argument is undefined. If so, we will set a default value.

Program code 7:

Output:
      friend

ECMAScript 6 also allows to set the default values for parameters inside the function head, as shown in the below code.

Program code 8:

Output:
    Welcome John

Arguments Keyword in JavaScript

---

We can also define a function to accept a variable number of arguments. JavaScript provides an arguments keyword that is a special variable.

This variable allows for a function to accept arguments that dynamically change each time the function is called. For example, the first argument is functionName.arguments[0], the second one is functionName.arguments[1], the third one is functionName.arguments[2], and so on.

JavaScript stores the number of arguments handed to the function in the length property of arguments object. The arguments object contains an array of all arguments passed to the function. The syntax is as:

functionName.arguments.length

Consider the following script code that illustrates this concept:

Program code 9:

Output:
     First argument is 2
     Second argument is 4
     Third argument is 6
     Number of arguments = 3

In this program, arguments.length counts the number of arguments in the array.

We can use for loop or for…in loop to print a list of arguments handed to the function. Let us consider an example based on this concept.

Program code 10:

Output:
     Dhanbad
     New York
     Mumbai
     Sydney
     Tokyo

Let’s create a JavaScript program in which we will sum of all input values.

Program code 11:

Output:
     Sum of all numbers = 210

---

In this tutorial, you learned how to call a function in JavaScript by passing arguments. Hope that you will have understood the concepts of calling a function when a user clicks on a button.
Thanks for reading!!!

The post How to Call Function in JavaScript using Arguments appeared first on Scientech Easy.