Optional Function Arguments

Contact Us or call 1-877-932-8228
Optional Function Arguments

Optional Function Arguments

When we declare a function in JavaScript, we normally include a list of the arguments the function expects.

Code Sample:

AdvancedTechniques/Demos/sumAll-1.html
---- C O D E   O M I T T E D ----
	function sumValues(val1, val2, val3) {
		return val1 + val2 + val3;
	}
---- C O D E   O M I T T E D ----

But this does not guarantee that our function will always be called with three arguments. It's perfectly valid for someone to call our function passing fewer or more than three arguments.

var result1 = sumValues(3, 5, 6, 2, 7);
var result2 = sumValues(12, 20);

Both calls will return surprising results (surprising from the caller's perspective).

In the first case, since we are not expecting more than three arguments, the extra values, 2 and 7, will simply be ignored. It's bad because the returned value is probably not what the calling code expected.

It's even worse when we look at the second example. We are passing only two arguments. What happens to val3? It will have the value of undefined. This will cause the resulting sum to be NaN, which is clearly undesirable.

Let's fix our function to deal with these types of situations.

Code Sample:

AdvancedTechniques/Demos/sumAll-2.html
---- C O D E   O M I T T E D ----

	function sumValues(val1, val2, val3) {
		if (val1 === undefined) {
			val1 = 0;
		}

		if (val2 === undefined) {
			val2 = 0;
		}

		if (val3 === undefined) {
			val3 = 0;
		}

		return val1 + val2 + val3;
	}

	var result1 = sumValues(3, 5, 6, 2, 7);
	var result2 = sumValues(12, 20);

	alert(result1);
	alert(result2);
---- C O D E   O M I T T E D ----

If we run our example again, we will see that we no longer get NaN for the second function call. Instead we get 32, which is probably what the calling code expected.

We now have a pretty robust function that adds three numbers but it still doesn't feel all that useful. Sooner or later we will need to add four or five numbers and we don't want to be updating our function to accept additional parameters. That would be a less than desirable maintenance task. Fortunately, JavaScript can help us with that too.

Every function, when called, has a variable called arguments, which is an array of all the arguments passed to the function. Back to our example, the first time we call sumValues, the arguments array will contain [3, 5, 6, 2, 7] and in the second call [12, 20].

What this means is that we can ignore the passed parameters altogether an deal only with the arguments array. Let's update our function once again.

Code Sample:

AdvancedTechniques/Demos/sumAll-3.html
---- C O D E   O M I T T E D ----

	function sumValues() {
		var sum = 0;
		for (var i = 0; i < arguments.length; i++) {
			sum += arguments[i];
		}
		return sum;
	}

	var result1 = sumValues(3, 5, 6, 2, 7);
	var result2 = sumValues(12, 20);

	alert(result1);
	alert(result2);
---- C O D E   O M I T T E D ----

Note how we got rid of the parameter list and now we get the values directly from the arguments array. When we run our example now we see that the returned values are correct and precisely what was expected by the caller. We now have a function that accepts as many parameters as are thrown at it and will always return the sum of all those arguments.

Next