Parameters and Arguments

When talking about functions, one of the first things we mentioned was the word parameters. In this reading we will be covering what exactly a parameter is - as well as the differentiation between parameters and arguments.

When you finish this reading, you should be able to:

• Identify the difference between parameters and arguments.
• Write a function that utilizes declared parameters.
• Invoke a function with passed in arguments.

The difference between Parameters and Arguments

Let's start off by talking about the difference between arguments and parameters and how to identify which is which.

• Parameters are comma separated variables specified as part of a function's declaration.
• Arguments are values passed to the function when it is invoked.

So by defining parameters when we declare our function we are effectively setting accessible variables within the function:

function add(firstParameter, secondParameter) {
  console.log(firstParameter + secondParameter);
}

// the add function declares two parameters
> add(1, 2); //=> 3
    

In the above example we declared our parameters when we declared our function. Now arguments work slightly differently - when the function is invoked we are passing in arguments. So in the above example when we invoked add(1, 2) the (1,2) were the arguments being passed in. So when a function is invoked the values of the passed in arguments are assigned to the declared parameters.

You can think of parameters and arguments like a recipe. A recipe is a list of ingredients (parameters) and list of steps (the code to be run). When someone cooks the recipe (invokes the function), they add the ingredients they actually have (arguments). The result of cooking the recipe is the delicious return value!

Extra arguments

In JavaScript a function will not throw an error if the number of arguments passed during a function invocation is different than the number of parameters listed during function declaration. This is very important to know!

Let's use the above function to demonstrate:

function add(firstParameter, secondParameter) {
  console.log(firstParameter + secondParameter);
}

// this will ignore the 17 & 14
// the first two arguments passed in will be assigned to the first two parameters
> add(1, 2, 17, 14); //=> 3
    

Notice in the above example we passed in 4 arguments (1, 2, 17, 14) to add. Since the function was only looking for two parameters that is all it uses.

Not enough arguments

Now what happens if we pass in fewer arguments then needed?

function add(firstParameter, secondParameter) {
  console.log(firstParameter + secondParameter);
}

> add(5); //=> NaN
    

Whoa what happened there? Let's do a play-by-play:

1. firstParameter was set to equal the first passed in argument which in the above case is 5.
2. Since there is no second argument, secondParameter is declared as a variable but is set to the default value of undefined.
3. The function then tries to add 5 to undefined which is definitely not a number! So we get NaN (which means Not A Number) printed to the console.

As you write more functions, you'll grow very comfortable using both arguments and parameters to accomplish your function's goal.

What you learned

• Parameters are variables defined as a part of a function's declaration.
• Arguments are values passed to the function when it is invoked.
• JavaScript functions can accept a different number of arguments than the number of parameters listed during function declaration.