JavaScript in Plain Language (2015)

PART II: ENTERING THE SECOND REALM

2.3 The anatomy of a function

On the last exercise we kept pressing the Up Arrow to recall the program in order to test it.

What if we didn’t have an Up Arrow? We would have to write the script again and again, correct?

This is where functions come handy. Stop! Don’t think of math when I mention functions in JavaScript. Think of functionality. In JavaScript functions are containers of program routines. We could have saved our if(), else script in a function and just recall it by calling the function. That’s one word, versus 10 lines of text.

Preliminary things to know about a function

a) A function is a closed container like the blue rectangle in the picture seen below.

b) To feed data into a function in order to be processed, we need one or more input parameters.

c) To export data from a function in order to reuse it, we need to implement an interface called return, or alternatively assign some outer variable to the new result.

Fig 6

Scripting a function

A representation of a function goes like this:

function funcName() { stuff to do; }

The above function does not take any input data, it just does stuff.

To create a function that takes an input parameter and processes it, we need to include the parameter inside of the parentheses:

function funcName(inputParameter) { stuff to do; }

When we say to “call a function” it means to have the function execute its magic. All we have to do to call a function, is to write the function’s name and attach a pair of parentheses as a postfix :

funcName();

Or, if the function has an input parameter we must include and argument that will replace the parameter:

funcName(123);
when 123 is a number.

or

funcName(x);
when x is a variable.

or

funcName("Tony");
When Tony is a string of characters.

Here’s a function arbitrarily named sizeMeUp that converts a string value into uppercase:

function sizeMeUp(x){console.log(x.toUpperCase());}

Here, x is the input parameter that gets replaced by the data we pass in when we call the function.

1- Calling the function in order to up case "red white blue":
sizeMeUp("red white blue");
It displays RED WHITE BLUE.

Let’s go back to our previous conditional exercise...

Remember how we had to use the Up Arrow in order to repeat the code for another test run?

We could make things easier by inserting our conditional exercise inside of a function because it saves us from having to retype the script every time we need to test it.
All we have to do is to call the function by its name:

functionName();

Shall we redo it?

Here’s the previous script placed inside of a function named test1:

link ( bit.ly/1wSjW9Z ).

1- Copy the code from the link and paste it on your Console.
(To copy the code from the forum post, click on the two-page icon at the top right side of the code).
After pasting the code on the console, call the function and press ENTER:
test1();

2- Call it again, and again until you realize that the output is always the same because variable x never changes. Use the Up Arrow to recall the function or just call the function manually by writing the function call each time.
Don’t forget to include the parentheses ().

Another cool feature of a function is on the following explanation:

We could create a temporary variable that could be modified by some argument data we pass into the function when we call the function.

Don’t worry about understanding everything right now. We will get there. Just go along with me and try the next step.

3- Let’s modify the function by removing the permanent x variable declaration on the top (before the function script), and placing x as an input parameter. Also change the name of the function to test2. See the next image for more details:

Fig 7 (See original file: here ) bit.ly/1wAbQjv

Now all we have to do is to call the function and pass in a number so that we can test it:

4- Call function test2 and see the results for each one of these numbers: 3,5,15,21:
test2(3);
test2(5);
test2(15);
test2(21);
test2(11);
etc.

The input parameter(s) of a function act as a temporary internal variable. This is really useful because we can send data into a function to be processed. That’s what happened during our test2() function calls.

Once we master the basic syntax of a function we start to create some real cool stuff.

Functions may still be confusing for you. I will cover all the basics as we code along. It is not a difficult subject but it needs to be approached in the proper sequence.

What is a function call?

A picture is worth a gazillion words:

Fig 8 (See original file: here. ) bit.ly/1raw6pT

Looking at figure 8, on the bottom left side we are calling function addTen() and passing an argument data of 4 to the function parameter n.

Then 4 will become the temporary value for parameter n, and the sum of 10 + 4 is executed.

Finally, the return mechanism exports the result which is the numeric value of 14.

We could have used a console.log(n + 10); but the console.log would display the value on the screen without exporting it out of the function. In other words, we would not be able to use the number 14 outside of the function because console.log() does not export data, it actually displays everything as a string value on the screen, even if it looks like a number.

So, return is a very important mechanism in functions. Actually it is native to functions. We cannot use the command return outside of functions. JavaScript will not allow it.

What is the purpose of return?

The purpose of return is twofold:

a) To export data from inside of a function in its raw form.

b) To stop and end the function call. This is important. The return mechanism acts as a break and ends the act of calling a function. Anything written in the function below the return statement will not be processed because JavaScript exits the function as it returns. After the function returns, the function call is wiped out from the working memory. You don’t have to be concerned with this at this moment but it is good to know that function calls don’t linger in memory forever. They free up space by getting out of the way. This could be a third reason to include your code inside of a function: memory efficiency.

What happens to the data when a function returns?

If we want to reuse the data for further processing, we need to catch the returned data. Otherwise it just gets lost in space.

How do we catch the data being returned from a function?

One way to catch it is to assign the returned value to a variable. In other words, assign the function call to a variable.

In the example of figure 8 (see the link below the image), instead of just calling the function:
addTen(4);

We could assign it to some variable:
var y = addTen(4);

Now y holds the value 14. The function call gets wiped out of memory but the value is retained by variable y.

· In summary, data coming from a function needs to be returned and assigned to a variable if we need to use it further down the script. When we output data from a function via a console.log(), alert(), prompt() or confirm(), we are just displaying it, not retaining it.