In order for JavaScript functions to be able to do the same thing with different input, they need a way for programmers to give them input. The difference between parameters and arguments can be confusing at first. Here’s how it works:
Parameters are the names you specify in the function definition.
Arguments are the values you pass to the function. They take on the names of the parameters when they are passed.
When you call a function, you include data (arguments) in the places where the function definition has parameters. Note that the arguments passed to the function must be listed in the same order as the parameters in the function definition.
In the following function, two parameters are defined for the myTacos function:
function myTacos(meat,produce){
...
}
When you call this function, you include data (arguments) in the places where the function definition has parameters.
myTacos("beef","onions");
The values passed to the function will become the values of the local variables inside of the function and will be given the names of the function’s parameters.
The code below expands the myTacos function to print out the values of the two arguments to the console. Passing an argument is like using a var statement inside of the function, except that the values can come from outside of the function.
function myTacos(meat,produce){
console.log(meat); // writes "beef"
console.log(produce); // writes "onions"
}
myTacos("beef","onions");
You can specify up to 255 parameters in a function definition. However, you usually don’t need that many parameters. If you find you need a lot of parameters, you should think about whether there’s a better way to do it.
Passing arguments by value
If you use a variable with one of the primitive data types to pass your argument, the argument passes by value. What this means is the new variable created inside the function is totally separate from the variable used to pass the argument, and no matter what happens after the value gets into the function, the variable outside of the function won’t change.
Primitive data types in JavaScript are string, number, Boolean, undefined, and null.
In this code, you see that several variables are created, given values, and then passed into a function. In this case, the parameters of the function have the same names as the variables used to pass the arguments. Even though the values of the variables inside the function get changed, the values of the original variables remain the same.
<html>
<head>
<title>Arguments Passed By Value</title>
</head>
<body>
<script>
/**
* Increments two numbers
* @param {number} number1
* @param {number} number2
*/
function addToMyNumbers(number1,number2){
number1++;
number2++;
console.log("number 1: " + number1);
console.log("number 2: " + number2);
}
var number1 = 3;
var number2 = 12;
addToMyNumbers(number1,number2); // pass the arguments
console.log("original number1: " + number1);
console.log("original number2: " + number2);
</script>
</body>
</html>
Here’s the output of this program in the JavaScript console.
Passing arguments by reference
Whereas JavaScript primitive variables are passed to functions by value, JavaScript objects are passed by reference. What this means is that if you pass an object as an argument to a function, any changes to that object within the function will also change the value outside of the function.
Calling a function without all the arguments
You don’t need to always call a function with the same number of parameters as are listed in the function definition. If a function definition contains three parameters, but you call it with only two, the third parameter will create a variable with a value of undefined in the function.
Setting default parameter values
If you want arguments to default to something other than undefined, you can set default values. The most widely supported and generally accepted way to do this is to test the arguments inside of the function value and set default values if the data type of the argument is undefined.
For example, this function takes one parameter. Inside the function, a test is done to check whether the argument is undefined. If so, it will be set to a default value.
function welcome(yourName){
if (typeof yourName === ‘undefined’){
yourName = "friend";
}
In the next version of JavaScript, called ECMAScript 6, you will be able to set default values for parameters inside the function head.
function welcome(yourName = "friend") {
document.write("Hello," + yourName);
}
EMCAScript 6 isn’t yet supported in every browser. For this reason, it’s still best to use the more compatible method of setting defaults.
Calling a function with more argument than parameters
If you call a function with more arguments than the number of parameters, local variables won’t be created for the additional arguments because the function has no way of knowing what to call them.
There is a neat trick that you can use to retrieve the values of arguments that are passed to a function but don’t have a matching parameter: the Argument object.
Getting into arguments with the arguments object
When you don’t know how many arguments will be passed into a function, you can use the argument object, which is built-in to functions by JavaScript, to retrieve all the arguments and make use of them.
The Arguments object contains an array of all the arguments passed to a function. By looping through the array, you can make use of every argument, even if the number of arguments may change each time the function is called.
This code demonstrates the use of the Arguments object to present a welcome message to someone with two middle names as well as someone with one middle name.
<html>
<head>
<title>Welcome Message</title>
</head>
<body>
<script>
/**
*Flexible Welcome Message
*/
function flexibleWelcome(){
var welcome = "Welcome,";
for (i = 0; I < arguments.length; i++) {
welcome = welcome + arguments[i] + "";
}
return welcome;
}
document.write(flexibleWelcome("Christopher" , <br/>"James" , "Phoenix" , "Minnick") + "<br>");
document. write(flexibleWelcome("Eva" , "Ann" , "Holland") + "<br>");
</script>
</body>
</html>