JavaScript functions: paramenter vs. argument

don’t yell at your laptop…read this instead :) (photo source)

This was a topic that just last week was really obscure to me. When a parameter and an argument were named with the same word, I would get so confused! I’m happy to share with you what I’ve learned on the subject.

Paramenters

A parameter is used in function declarations. It is a placeholder — a variable. We will assign a value to it when we invoke our function.

For example, given the function below:

function multiplyByTwo(whatever) {
   return whatever * 2;
};

whatever is our parameter. It is used in the code block inside our function as one of the two elements of our expression, the other one being the number 2.

Arguments

An argument is the value that is passed into a function when we invoke it. In the example below, 6 is our argument:

multiplyByTwo(6);

By invoking our function, the number 6 (our argument) is passed to — or substituted to — whatever (our parameter) and used in the function code block wherever we find the word whatever.

By invoking our function in our console, the 6 gets multiplied by 2 and we obtain:

//=> 12

Now let’s play a little bit with the word ‘whatever’…

First of all, let’s create a global variable called whatever and assign it a value of 10:

let whatever = 10;

If we call the variable whatever we obtain 10:

whatever;
//=> 10

Let’s invoke our function again and use whatever (our global variable) as our argument:

multiplyByTwo(whatever);
//=> 20

this is because whatever is equal to 10 and when multiplied by 2, the function returns 20.

Let’s assign a new value to our variable:

whatever = 15;

now, this is what happens if we invoke our function with whatever as our argument:

multiplyByTwo(whatever);
//=> 30

this is because whatever is now equal to 15 and when multiplied by 2, the function returns 30.

Get Elizabeth Porporato’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

If we passed a new argument when we invoked our function (for example the number 8), this is what we would get as a result:

multiplyByTwo(8);
//=> 16

Let’s introduce another function…

…it will accept two parameters (a, b) and add them to each other:

function addTwoNumbers(a, b) {
   return a + b;
}

Let’s invoke our new function and use (1, 2) as our arguments:

addTwoNumbers(1, 2);
//=> 3

Now let’s invoke our multiplyByTwo function and pass our addTwoNumbers function as an argument. addTwoNumbers becomes a callback function:

multiplyByTwo(addTwoNumbers(1, 2));
//=> 6

the numbers 1 and 2 get added to each other in the addTwoNumbers function and the result (3) gets passed into multiplyByTwo as the argument; it then gets multiplied by 2 in the function and the function returns 6.

In summary

This is all the code above together, so that you can follow all the steps without interruptions:

function multiplyByTwo(whatever) {
   return whatever * 2;
};
multiplyByTwo(6);
//=>12
let whatever = 10;
whatever;
//=> 10
multiplyByTwo(whatever);
//=> 20
whatever = 15;
whatever;
//=> 15
multiplyByTwo(whatever);
//=> 30
multiplyByTwo(8);
//=> 16
function addTwoNumbers(a, b) {
   return a + b;
}
addTwoNumbers(1, 2);
//=> 3
multiplyByTwo(addTwoNumbers(1, 2));
//=> 6

It is general good practice to avoid calling variables and parameters with the same name. But if you come across code written like the one above, now you won’t get confuse anymore :)

Here’s a little extra stretching on the subject…

…when a function is given a default parameter:

function readThisPost(answerToTheQuestion = 'yes'){
   console.log(`Do I have to read this post? Answer: ${doIHaveTo}`);
};
readThisPost();
//=> Do I have to read this post? Answer: yes
readThisPost('no');
//=> Do I have to read this post? Answer: no

The parameter answerToTheQuestion is assigned a value of 'yes' by default in the function declaration. When the function is invoked without passing an argument, the function defaults to 'yes' as its argument. But if we pass a parameter of 'no' when we invoke the function, this argument will overwrite the default parameter and be used in the function instead.

I hope this was helpful! If you have any questions please reach out to me :)

-Elizabeth

Sources:

MDN — Functions

MDN — Default parameters

w3schools — Function parameters and arguments

GeeksForGeeks — Javascript Function parameters

Flatiron School Software Engineering curriculum