Northcentral Technical College Introduction To Programming
10-152-310
Introduction to Programming with JavaScript NTC 10-152-310

Learning Plan 6 Function To Function - How Functions Communicate

# Function To Function - How Functions Communicate

#### File: /Learning Plan 6/functionToFunction.html

> Functions can communicate with each other in several ways.

### What's the problem?

- The problem is that Global Variables are limited, fragile, and not very useful anymore.
- We've been using global variables so far in this learning unit. We will still use them for some things. However, all modern programming has the concepts of function parameters and arguments.
- Functions routinely need to use data from another function. This is what is meant when we say that functions communicate with each other.
- We have to communicate in two directions.
  1. When a function calls another function, it sometimes needs to transfer data TO the function it is calling.
  2. When a called function is done processing, sometimes the calling function needs to get data back FROM the called function.
- These two concepts are called:
  - Passing Parameters
  - Returning a Value
- Let's look at how this work with pictures first.

### Sharing Data With Global Variables

- This is the way the approach works. We have to use global variables to get work done.
- Sometimes we have to do this but there can be problems. The global variables will be accessible to every function, even those written by others.
- In large applications, the code and the global variables can be very far apart. This can lead to confusion and mistakes.
- The next technique helps with these problems.

### Parameters and Arguments

pa•ram•e•ter
noun
• a numerical or other measurable factor forming one of a set that defines a system or sets the conditions of its operation : the transmission will not let you downshift unless your speed is within the lower gear's parameters.
• Mathematics a quantity whose value is selected for the particular circumstances and in relation to which other variable quantities may be expressed.
ar•gu•ment
noun technical
• Mathematics: an independent variable associated with a function and determining the value of the function. For example, in the expression y = F(x 1 , x 2 ), the arguments of the function F are x 1 and x 2, and the value is y.
• Computing: a value or address passed to a procedure or function at the time of call.

- So far, we have been writing functions like this:
- There is nothing between the left and right parentheses. But, we can put things in there! What we put between the parentheses are variables:
- These variables are called `Parameters`. They are a special kind of local variable. Just like normal local variables, they can't be accessed by other functions. But, other functions can set the value of parameters in one specific way.
- You can have as many Parameters as you like, all separated by commas. However, if you have lots of them it can get confusing. There are better ways to pass lots of data as we'll see soon.
- Here's how we call the above function:
- The numbers 2 and 3 are `Arguments`. Arguments are data that will be sent or "passed" to the function that is about to be called.
- When this line of code is run, the `2` will be copied into the variable numberOne, and the `3` will be copied into numberTwo.
- When the addTwoNumbers function starts to run it can access the parameters to do the calculation.
- Let's look at how this works in a few different ways. First, just the code:

- Line 13: The program starts running here. This function gets called from somewhere else, like an HTML page.
- Line 15: This is the function call. The `2` will be copied and pasted into the variable `numberOne`. The `3` will be copied and pasted into the variable `numberTwo`.
- Line 2: This function now starts running. The parameters, numberOne and numberTwo, already have the values 2 and 3.
- Lines 3 and 4: Here are some plain old local variables.
- Line 5: Get the display element from the HTML page.
- Line 7: Here's the calculation. The total variable will be assigned to `5`.
- Line 9: Output the total.
- Here's a picture:
- Here's another demo to help understand this.
  - Animated Passing Parameters Demo
- And here's a lab to practice.
  - 6.1 Lab 3
    - 6.1 Assignment 1

### Returning Data From a Function

- Look at the example we just went over. Do you think that a function named `addTwoNumbers()` would just display the result to the screen? I don't either! It would be much handier if the function just did the calculation and gave us the answer. Then we could do anything we wanted with the results.
- Functions can do this. It's called returning a value. Here's what it looks like.
- A function calls another function and sends parameters to it. The called function performs a calculation and returns the results. Very nice! This is very flexible and we could use this function is other circumstances. Code Reuse!
- In JavaScript the syntax for returning data is the word `return`. When you want to return something from a function you just do this:
- When the `return` keyword is reached, the function stops running and whatever is after the return will be sent back to the calling function.
- Remember, after the return, the function stops running!
- The `return` statement has to be the last statement in the function or the last statement in some logic, like an `if` statement.
- How does the calling function get the data back? Usually, the function with the return will be assigned to a variable. We've been doing this all semester with this function:
- The "Enter your name:" part of the call is the argument.
- We get the data back when it is assigned to the name variable.
- Let's redo the above example and add a return to it.
- Line 9: The program starts here.
- Line 10: Here's the variable that will get the returned data.
- Lines 11 and 12: Here's the right place for this code. We get to process the data returned from the function the way we want to.
- Line 14: The function is called and we send it parameters. When `addTwoNumbers()` finishes it will return the results to this function. We can do what we want with it, here we are assigning it to the variable `total`.
- Line 2: Parameters have been passed to this function and it now starts running.
- Line 3: Declare a local variable to hold our calculation.
- Line 4: Perform the calculation on the arguments that were assigned to the parameters. Assign the results to the variable `total`.
- Line 5: Return the total variable to the calling function.
- Line 14: We're back!
- Line 16: Display the results to the page.
- Here's another picture of this:
- You asked for it! Here's the animated version:
  - Animated Passing and Returning Data Demo
- Here's a much bigger example with a new thing: A Form!
  - Example 1 - Calculate Percentage Value
- And now, yet again, here's a lab
  - 6.1 Lab 4
    - 6.1 Assignment 2