JavaScript Function Parameters and Arguments

By | October 1, 2021
JavaScript Function Expression and Literals

In the last JavaScript function tutorial, we learned about how we can define a function and parameters along with it. And in this tutorial, we will dive deep into the concept of JavaScript functions and arguments.

Function Parameters and Arguments

There is a subtle difference between the function parameters and arguments.

Vamware

Function parameters are the variable names that we defined during function declaration or definition.

function func_name(parameter1, parameter2, parametr3)

Function arguments are the values that we provide to the function during the function calling.

func_name(arg1, arg2, arg3)

A function doesn’t need to have parameters. Parameters are just used when we want to perform some task based on some dynamic data.

Example

<script>
    function add4(para1, para2, para3, para4)
    {
        total = para1 + para2 + para3 + para4;
        return total 
    }

    let arg1, arg2, arg3, arg4;
    arg1 = 100;
    arg2 = 200;
    arg3 = 300;
    arg4 = 400;

    total = add4(arg1, arg2, arg3, arg4); //call function
    document.write("Total is :"+total);

</script>

Output

Total is :1000

Behind the code

In the above example, first, we define a function add4(para1, para2, para3, para4) with 4 parameters. That adds all the 4 parameters value and return the total.

And when we call the function add4(arg1, arg2, arg3, arg4); there we pass 4 arguments correspond to 4 parameters. The argument values will be set to the function parameters in the same order they are defined, which means para1 will have the value of arg1, para2 has the value of arg 2, and so on.

Important facts about JavaScript functions parameters and arguments.

  1. The JavaScript function declaration does not specify any data types for its parameters.
  2. JavaScript function does not perform any type checking on the passed arguments.
  3. JavaScript function also does not check the number of arguments passed, which means the number of parameters can be less or greater in number than the argument passed.

JavaScript Default parameters

As the JavaScript functions do not check the number of arguments passed, this means if the number of arguments passed is less than the specified parameters then the rest of the parameters will become undefined by default.

<script>
    function func(para1, para2, para3, para4)
    {
        document.write("para1 = "+para1)
        document.write("<br>")
        document.write("para2 = "+para2)
        document.write("<br>")
        document.write("para3 = "+para3)
        document.write("<br>")
        document.write("para4 = "+para4)
        document.write("<br>")
    }

    let arg1, arg2;
    arg1 = 100;
    arg2=200;

    func(arg1, arg2); //pass only 2
</script>

Output

para1 = 100
para2 = 200
para3 = undefined
para4 = undefined

If you do not want to parameters values to undefined, you can set some default values to the parameters using the assignment operator in the function definition.

<script>
    function func(para1, para2, para3 = 300, para4 =400)
    {
        document.write("para1 = "+para1)
        document.write("<br>")

        document.write("para2 = "+para2)
        document.write("<br>")

        document.write("para3 = "+para3)
        document.write("<br>")

        document.write("para4 = "+para4)
        document.write("<br>")
    }

    let arg1, arg2;
    arg1 = 100;
    arg2=200;

    func(arg1, arg2); //pass only 2
</script>

Output

para1 = 100
para2 = 200
para3 = 300
para4 = 400

The default parameters value will be set to passed arguments value if the number of arguments is equal to the number of parameters.

<script>
    function func(para1, para2, para3 = 300, para4 =400)
    {
        document.write("para1 = "+para1)
        document.write("<br>")

        document.write("para2 = "+para2)
        document.write("<br>")

        document.write("para3 = "+para3)
        document.write("<br>")

        document.write("para4 = "+para4)
        document.write("<br>")
    }

    let arg1, arg2, arg3, arg4;
    arg1 = 100;
    arg2=200;
    arg3 =3000;
    arg4 = 4000;
    func(arg1, arg2, arg3, arg4);
</script>

Output

para1 = 100
para2 = 200
para3 = 3000
para4 = 4000

JavaScript Rest Parameters

The Rest Parameters is a special parameter syntax that allows us to represent all the arguments values as an array using a single parameter name.

To use the Rest parameter we use triple dot ... followed by the parameter name.

Example

<script>

    function func(para1, ...paras)
    {
        document.write("para1 = "+para1)
        document.write("<br>")
        document.write("paras = "+ paras)
    }

    let arg1, arg2;
    arg1 = 100;
    arg2=200;
    arg3 =3000;
    arg4 = 4000;
    func(arg1, arg2, arg3, arg4);
</script>

Output

para1 = 100
paras = 200,3000,4000

Behind the code

In the above example when we call the function func(para1, ...paras) using func(arg1, arg2, arg3, arg4); statement. It passes the value of arg1 to para1 and the rest of the arguments arg2, arg3, arg4 as an array to ...paras . That we accessed inside the function using paras name.

Call by value in JavaScript

In JavaScript, it calls its function using call by value technique when the arguments are the primitive type such as number, boolean, and string.

This means the changes that occurred in the function do not affect the actual value of the argument outside the function.

Example

<script>
    function func(para1)
    {
        para1 = 20; 
    }

    let arg1
    arg1 = 100; //number

    func(arg1) ;// call by value 
    document.write("value of arg1= "+arg1)
</script>

Output

value of arg1= 100

Call by value in JavaScript

When the argument value is an object, then the JavaScript calls the function by reference. In which the copy value of the object does not pass to the function instead the reference of the actual object passed to the function. This means if any changes occur in the object value inside the function that will be visible outside the function too.

Example 

<script>
    function func(para1)
    {
        para1.name ="Ravi" //change the name
    }
    let arg1
    arg1 = {name:"Rahul", age:20 }; //object
    func(arg1) ;// call by reference 
    document.write("Value of arg1= "+ arg1.name)
</script>

Output

Value of arg1= Ravi

Behind the code

In the above example, the arg1 is an object and when an object is passed to the function, it passed as a reference. This means the actual object will be passed to the function instead of its values. So if the function makes any changes in the object that will also be seen on the actual argument.

You can also say that the arg1 and para1 both are pointing to the same object memory or both are shining the same object so if para1 make any changes in object arg1 also see the same changes.

Summary

  • Parameters are the name defined during function declaration.
  • Arguments are the values that passed during the function calls.
  • We can set default parameters for unpassed or unmentioned arguments.
  • Rest Parameter represents the rest arguments as an array.
  • Primitive arguments values are passed as call by values.
  • Object arguments are passed as call by reference.

People are also reading:

Leave a Reply

Your email address will not be published. Required fields are marked *