Arguments vs Parameters is quite a confusing topic not only for beginners but experienced dev also. Even though they use this on daily basis but couldn't explain theoretically.
Today we gonna discus about it.
One thing you must know before reading further
Parameter --> variable
Arguments --> Data
One of the fundamental building blocks in JavaScript programming is a function. It's a block of code designed to perform a particular task.
Functions are reusable code which you can use anywhere in your program. They eliminate the need to repeat the same code all the time.
To use functions in a powerful way, you can pass values in a function to use them.
Here is an example of a function:
function add(){
return 2+3;
}
add()
This is a function declaration, the name of the function is add, and it was called after the function with add() . The result of the function will be 5.
How to use parameter and arguments in a function
Take a look at the function down below
function add(x,y){
return x+y;
}
add(2,3);
We have introduced x and y here and changed the location of the 2 and 3. x and y are the parameters while 2 and 3 are the arguments here.
A parameter is one of the variables in a function. And when a method is called, the arguments are the data you pass into the method's parameters.
When the function is called with add(2, 3) the arguments 2 and 3 are assigned to x and y, respectively. This means that in the function, x will be replaced with 2 and y will be replaced with 3.
If the function is called with a different argument, the same applies. Parameters are like placeholders for function arguments.
The Power of Arguments
We can use arguments more efficiently when we want to make functions more re-useable, or when we want to make calling functions inside another functions more powerful.
Here is an example:
function add(x, y){
return x + y
}
function multiply(a, b, c){ // a = 1, b = 2, c = 3
const num1 = add(a, b) // num1 = add(1, 2) = 3
const num2 = add(b, c) // num2 = add(2, 3) = 5
return num1 * num2 // 15
}
multiply(1, 2, 3)
// returns 15
The first function add() has two parameters, x and y. The function returns the addition of the two parameters.
The second function multiply() has three parameters: inside the function, two variables are declared in it, num1 and num2. num1 will store the value of the result of add(a, b), and num2 will store the value of the result of add(b, c). At the end the multiply function will return the value of num1 multiplied by num2.
multiply is called with three arguments which are 1, 2 and 3. add(a, b) will be add(1, 2) which will return 3. add(b, c) will be add(2, 3) which will return 5.
num1 will have the value of 3 while num2 will be 5. num1 * num2 will return 15.
Arguments are passed in the multiply function which are also used as arguments for the add function.
Top comments (4)
Hi, one way to think about the relationship between parameters and arguments is to consider what happens when a function is called. The argument values are bound to the parameter references. Until then, with the exception of default parameter values, the parameters were without value.
I hope this perspective helps.
Regards, Tracy
Indeed, I fully agree. But if you say these words to a beginner or a student , these words might gonna over his/her head. I tried to explain it as simple as possible because this is how I can understand when I was a student. Beginners often confuse when we use words like reference, functional call, stack memory ,heap memory , callback que etc. I highly appreciate your comment. Thanks
I accept your post might be targeting a novice audience but I make no apologies for using the correct terminology. If people do not understand they should ask for an explanation rather than dumbing-down, after all learning is the nature of the industry, and asking is the way to learn.
Agreed. But not everyone in same , So I hope this post might help somebody to understand the concept and they can dig in deep.