Student Instructions

Using Output from Functions

We already know that parameters provide input values to our functions. It is also possible for functions to generate output values which can be used to change the logical flow of the program.

We have already seen many examples of functions that generate output, including:

• randomNumber
• includes
• promptNum
• getText
• toUpperCase
• toLowerCase

You may not have thought of it at the time, but when you called these functions you treated them as if they were a value. In reality you were using the value returned by these functions.

Examples of Return Functions Used as Values

Using the randomNumber function as a number

Using the getText function as a string

Let's have a look at how we can write functions like this ourselves.

The return Command

When you call a function, you are telling the computer to run a piece of code elsewhere in your program. When that function is finished running, execution of the program returns to the point in the code where the function was called. In some programming languages you must explicitly tell the program to return at the end of a function, but in JavaScript this just happens automatically when you reach the closing } of your function.

It is possible to make your program return at any point using the return command. This command tells the function to stop executing immediately, skipping any commands that appear afterwards within the function. This example shows how a console.log statement after a return is never executed. It will even generate a warning in your program.

Most of the time we want every line of our functions to run, and so we wouldn't write functions with commands after a return statement. If we had ever used return, it would have been as the last line in our functions, and since reaching the closing curly brace will automatically do the same thing as a return command, there's been no reason to use it at all.

Returning Values

There is one critical difference between reaching the last line of your function and using return. When you use return you are also able to specify a single value that will be "returned" to whatever code called the function in the first place. The effect is that the function acts like any expression that evaluates to a single value. You can think of it as though the value simply replaces the function where it was called in the code.

When your function is done executing it will be replaced by whatever value you return, just like randomNumber is replaced by a randomly generated number and getText is replaced by the text of one of your UI elements. This is how your functions can generate output that other parts of your program can use.

Notice that we need to place our new function inside of a console.log statement in order to display the value it returned. Without this statement, the value would be calculated, but it would not be used anywhere in your program. This is no different than if you were to call randomNumber and not use the value generated. It is up to you, the programmer, to decide how this returned value will be used in the rest of your program.

You will typically write a function that returns a value when you have a calculation that you perform many times in your code (for example, finding the minimum value in an array). Your function would use parameters to provide inputs, would calculate a result, and would return that result as output. To help you get started writing your own functions that return values, here are some simple guidelines to follow.

Guidelines for Writing Functions with Return Values

• Decide what values you need as input to your computation. Make these parameters of your function.
• Use your parameters to calculate your result and save that result in a single variable.
• Return that variable on the last line of your function.

Continue

Student Instructions

Using Functions that Return Values

We have used functions that return values many times before, but in this exercise you will see how they are actually created by using the return command. The function minVal accepts two numbers as input and returns the minimum of the two as output. You can call this function just like any other, and because it returns a number, you can treat the function call as if it were a number.

Do This:

• Starter code has been provided that creates the function minVal and generates two random values.
• Inspect the code of minVal to understand the logic of this function.
• On the console.log line call the function using rand1 and rand2 as parameters and ensure the minimum value is returned. You should treat the function call as if it were a number.

• Check that the program generates output similar to the output shown below.

Student Instructions

Writing Functions that Return Values

Now you are going to write your own function that returns a value, maxVal. This function should return the maximum of two values provided as input. The code for minVal is provided so that you can replicate the pattern used in this function.

Pattern for Functions that Return Values Use parameters to provide input. Declare a variable that will be used as output, possibly initializing its value. Update the value in your output variable throughout your program. Return your output variable on the last line of your function.

You may actually recognize many similarities between how we wrote functions that process arrays and functions that return values. These patterns aren't rules of programming, but they help make your code easy to read and understand.

Do This:

• Starter code has been provided which stubs out maxVal and generates two random values. minVal is still provided so that you can replicate the pattern used.
• Write maxVal, replicating the pattern used to write minVal.
• Use maxVal within the console.log statement as if it were a number to generate the output similar to the one shown below.

Student Instructions

Debugging and Multiple Return Statements

Having multiple return statements in a program can lead to tricky situations. You may use multiple return statements, but it makes it easier to introduce logical errors into your program. We're going to look at some examples of functions with return values that include logical errors and debug them. The goal is to recognize common errors with return values now so you can avoid them when writing your own programs.

There is a logical error somewhere in the version of maxVal you are about to see which uses multiple return statements. As a result, the function works correctly for some inputs but not all. You'll need to inspect the code to understand what the issue is and make changes accordingly. In particular, look closely for conditions that are not currently handled by the program.

Do This:

• Run the program and identify the errors generated in the output.
• Inspect the logic of maxVal to identify the logical error.
• Correct the logical error so that the function returns the correct value for all inputs.

Student Instructions

Debugging and Multiple Return Statements: constrain

We're going to debug another function that uses multiple return statements. The function is called constrain and is used to limit an input number to a certain range. The function accepts three parameters.

• input : the number to be constrained.
• low : the lower bound of the range. If input is below this value, the function should return the value of low.
• high : the upper bound of the range. If input is above this value, the function should return the value of high.

Do This:

• Run the program and identify the errors generated in the output.
• Inspect the logic of constrain to identify the logical errors.
• Rewrite constrain to make use of the pattern for functions that return values, shown above.
• Run the program to ensure it is now running as you expect.

Student Instructions

Use a Function that Returns a Value in an App

We create functions to contain blocks of code that will be used multiple times within our program. The same is true with functions that return values. Let's see an example of how we might use one of the functions we've written.

This exercise comes with starter code that creates a simple turtle driver app. The x and y location of the turtle are stored in the variables xloc and yloc. An event handler is used to update these values when the arrow keys are pressed, and then a separate updateTurtle function is called to draw the turtle on the screen.

Currently the turtle can drive off the screen. If we are clever about how we use our constrain function, however, we can prevent this from happening.

Do This:

• Starter code is provided which allows the turtle to move. Additionally a working version of constrain is provided.
• Call the constrain function twice within the updateTurtle function to prevent the turtle from going outside the screen.
  • One call to the function for xloc and one time for yloc.
  • Recall the screen is 320 by 450 pixels.
• Run your app and confirm the turtle cannot leave the screen.

Student Instructions

Use a Function that Returns a Value in an App - Part 2

This time, you're going to write a function that returns a value to add functionality to the turtle driver. The updateTurtle function now is making a call to a function called wrap that has not been written yet. It accepts three parameters and should work in the following way:

• input: the input value to the function. If it is within the range it should just be returned.
• low: the lower bound of the range. If input is below this value the output should be the value of high.
• high: the upper bound of the range. If input is above this value the output should be the value of low.

By using this function you can create the illusion that the screen "wraps" around, so when the turtle leaves the top of the screen it appears again at the bottom.

Do This:

• Starter code is provided which allows the turtle to move.
• The updateTurtle function now makes two calls to wrap, but the function is not yet written.
• Write the wrap function so that it implements the logic described above.
• Run your app and confirm the turtle now "wraps" when it leaves the screen.