Processing Function Output

1. Introduction

2. Printing a function output

          To print an output of a function, we can use the different I/O statements discussed in Module 8.4 (Basic Statements: I/O Statements).  Suppose that we have a code of a function that computes the sum of two numbers below. The output of this function is the sum of the two inputs.

function getSum(a, b){
 sum = a + b;
}

          If we want to print the sum of the two numbers, we can do so by adding an I/O statement within the function block. The code below shows an example of printing the sum inside an HTML element.

<div id="div1"> </div>
<script>
 function getSum(a, b){
	 sum = a + b;
	 document.getElementById('div1').innerHTML = sum;
 }
 getSum(1,2);
</script>

          This next block of code shows how to display the output of the function using an alert box.

<script>
 function getSum(a, b){
          sum = a + b;
          window.alert(sum);  
 }
</script>

          With the two methods learned, notice that the output is accessed only within the function block. Remember that variables created inside the function block are local variables – this means that they can only be accessed within that block. When you try to access that variable outside the function, it will give an undefined value.

3. Using the return statement

          Say for example that you want to use the sum from our first function example for another function or in another operation in the main function. To do this, the value of the output must be passed to outside of the function and a variable outside the function must be declared to store the value being passed from the function. Look at the code below:

<script>
 function getSum(a, b){
        sum = a + b;
        return sum;
 }
 x = getSum(1,2);
</script>

          The return keyword instructs the function to pass the value of sum to outside of the function and return to where the function is called. In the case of the code above, the function will return to the variable x. It is also in variable x that the function output will be stored. You can then process or do operations on the variable x afterwards in the main function of your JavaScript code.

          The example above shows that return statements are used to pass values from inside a function to a variable outside the function. This is not the only use of return though. Return statements are also used as break statements to end the execution of functions or loops before all lines inside the function or loop are executed. The example below shows how a return statement is used in this case. Let’s say that you need to prompt a user to input a non-numeric character. The loop will continue to ask the user for an input until the correct input is provided.

<p id="demo"></p>
<script>
 function myFunction() {
      while (true){
            var number = prompt("Please a letter");
            if (isNaN(number)) {     /* note: the isNaN() test whether the value in number is Not a Number and returns true otherwise it returns false. */
                       document.getElementById("demo").innerHTML ="It is a letter!";
                      return false;
            }
      }
}
myFunction();
</script>

          Aside from using two methods above, you can also directly print the output by calling the function from the print statement. Look at the code below as an example:

          Aside from the printing statement, you can also directly call the function from an operation, instead of using a temporary variable first and then using that variable for an operation.

4. Summary and References

Summary:

          The outputs for functions can be processed in different ways. They are listed as follows: 

• Function outputs can be displayed in the webpage using I/O statements within the function block. 
• The return statement is used to pass the value of the function output to a variable outside of the function block. Once the value is stored in a variable outside the function block, it can be used for operations for lines of code outside of the function block.

References