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. 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 :1000Behind 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.
- The JavaScript function declaration does not specify any data types for its parameters.
- JavaScript function does not perform any type checking on the passed arguments.
- 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,4000Behind 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>
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= RaviBehind 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.