In the introduction to this chapter, we used the metaphor of the function machine, noting that the machine takes input and provides output. This section focuses on the details of these two aspects of function behavior.
Some functions return values that are useful. In particular, the type conversion functions convert input to the specified data type and return the result---calling Number("3.14") returns the value 3.14.
To return a value from functions that we create, we can use a return statement. A return statement has the form:
return someVal;
where someVal is any value.
Example
This function has a single parameter, n, which is expected to be a
positive integer. It returns the sum 1+2+...+n.
1function sumToN(n) {
2 let sum = 0;
3 for (let i = 0; i <= n; i++) {
4 sum += i;
5 }
6 return sum;
7}
8
9console.log(sumToN(3));
Console Output
6
Notice that sumToN does not print anything; the output comes from the final
line of the program, which prints the value returned by the function call
sumToN(3).
Now that we have return statements in our coding toolbox, we will very rarely print anything within a function. If we want to see the value returned by a function then we must print it after calling the function.
Question
The function sumToN uses a pattern that we have seen previously. What is
it called?
return is Optional¶As we saw with our initial examples of function definitions, not every function explicitly returns a value. At its simplest, a function can even have an empty body.
function doNothing() {}
As written, this function is completely valid, but useless. Although the
function doesn't have a return statement, JavaScript still implicitly
returns a value.
Example
A function without a return statement returns the special value
undefined.
1function doNothing() {}
2
3let returnVal = doNothing();
4console.log(returnVal);
Console Output
undefined
return Terminates Function Execution¶When a return statement executes, the function terminates, regardless of whether or not there is any code following the return statement. This means that you must be careful to use return only when the work of the function has been completed.
Example
This console.log statement in this function never executes, since the function returns before it is reached.
1function pastThePointOfReturn() {
2 return "I'm done!";
3 console.log("This will not be printed");
4}
5
6console.log(pastThePointOfReturn());
Console Output
I'm done!
We can use the fact that return stops the execution of a function intentionally, to force a function to stop execution.
Example
This function prints out the integers 1...n using an infinite while loop, which nonetheless terminates when the return statement is executed.
1function countToN(n) {
2 let count = 1;
3 while (true) {
4 if (count > n) {
5 return;
6 }
7 console.log(count);
8 count++;
9 }
10}
A function that returns a boolean value is known as a boolean function. Perhaps the simplest such function is one that tests an integer to determine if it is even.
Example
1function isEven(n) {
2 if (n % 2 === 0) {
3 return true;
4 } else {
5 return false;
6 }
7}
8
9console.log(isEven(4));
10console.log(isEven(7));
Console Output
true
false
It is conventional to name boolean functions by starting with either is or has, which creates a nice semantic effect when reading the code. For example, reading isEven(4) communicates to the reader that the function should answer the question, "Is 4 even?" This is a convention so widely used by programmers that it extends to nearly every language.
Let's return to the isEven function above, to see how we can use the power of return statements to make it even better.
Since return terminates the function, we can leave out the else clause and have the same effect. This is because if n is even, the return statement in the if block will execute and the function will end. If n is odd, the if block will be skipped and the second return statement will execute.
1function isEven(n) {
2 if (n % 2 === 0) {
3 return true;
4 }
5 return false;
6}
This updated version works exactly the same as our initial function.
Additionally, notice that the function returns true when n % 2 === 0 returns true, and it returns false when n % 2 === 0 returns false. In other words, the return value is exactly the same as the value of n % 2 === 0. This means that we can simplify the function even further by returning the value of this expression.
1function isEven(n) {
2 return n % 2 === 0;
3}
This version of isEven is better than the first two, not because it is shorter (shorter isn't always better), but because it is simpler to read. We don't have to break down the conditional logic to see what is being returned.
Most boolean functions can be written so that they return the value of a boolean expression, rather than explicitly returning true or false.
Over the past few sections, we introduced two function-related concepts that are very similar, and are often confusing to distinguish: arguments and parameters. The difference between the two is subtle, so we will attempt to clear that up now.
The easiest way to talk about the difference between arguments and parameters is by referring to an example.
Example
The function hello takes a single value, which we expect to be a person's name, and returns a message that greets that person.
1function hello(name) {
2 return `Hello, ${name}!`;
3}
4
5console.log(hello("Lamar"));
Console Output
Hello, Lamar!
In this example, name is a parameter. It is part of the function definition, and behaves like a variable that exists only within the function.
The value "Lamar" that is used when we invoke the function on line 5 is an argument. It is a specific value that is used during the function call.
The difference between a parameter and an argument is the same as that between a variable and a value. A variable refers to a specific value, just like a parameter refers to a specific argument when a function is called. Like a value, an argument is a concrete piece of data.
A function may be defined with several parameters, or with no parameters at all. Even if a function is defined with parameters, JavaScript will not complain if the function is called without specifying the value of each parameter.
Example
1function hello(name) {
2 return `Hello, ${name}!`;
3}
4
5console.log(hello());
Console Output
Hello, undefined!
We defined hello to have one parameter, name. When calling it, however, we did not provide any arguments. Regardless, the program ran without error.
Arguments are optional when calling a function. When a function is called
without specifying a full set of arguments, any parameters that are left
without values will have the value undefined.
If your function will not work properly without one or more of its parameters defined, then you should define a default value for these parameters. The default value can be provided next to the parameter name, after =.
Example
This example modifies the hello function to use a default value for name. If name is not defined when hello is called, it will use the default value.
1function hello(name = "World") {
2 return `Hello, ${name}!`;
3}
4
5console.log(hello());
6console.log(hello("Lamar"));
Console Output
Hello, World!
Hello, Lamar!
While this may seem new, we have already seen a function that allows for some arguments to be omitted---the string method slice.
Example
The string method slice allows the second argument to be left off.
When this happens, the method behaves as if the value of the second
argument is the length of the string.
1// returns "Launch"
2"LaunchCode".slice(0, 6);
3
4// returns "Code"
5"LaunchCode".slice(6);
6
7// also returns "Code"
8"LaunchCode".slice(6, 10);
Just as it is possible to call a function with fewer arguments than it has parameters, we can also call a function with more arguments than it has parameters. In this case, such parameters are not available as a named variable.
Example
This example calls hello with two arguments, even though it is defined with only one parameter.
1function hello(name = "World") {
2 return `Hello, ${name}!`;
3}
4
5console.log(hello("Jim", "McKelvey"));
Console Output
Hello, Jim!
Fun Fact
These "extra" arguments can still be accessed using a special object named arguments, which is made available to every function. If you are curious, read more at MDN. However, we will not need to use this advanced JavaScript feature in this course.
Question
What does the following code output?
1function plusTwo(num) {
2 return num + 2;
3}
4
5let a = 2;
6
7for (let i=0; i < 4; i++) {
8 a = plusTwo(a);
9}
10
11console.log(a);
Question
What does the following function return?
1function repeater(str) {
2 let repeated = str + str;
3 console.log(repeated);
4}
5
6repeater('Bob');
"BobBob"undefinedBobQuestion
What does the following code output?
1function repeater(str) {
2 let repeated = str + str;
3 console.log(repeated);
4}
5
6repeater('Bob');
"BobBob"undefinedBob