Question:

What is a function?

Answer:

A function is a block of statements grouped together to accomplish a single task, such as: initialize images on a web page, calculate students' grades, or validate user input.

Question:

What are the benefits of using functions?

Answer:

Functions keep your code organized and make it easier to modify, should changes be needed in the future. Each function should begin with comments describing its purpose, and any other useful explanations, such as what the parameters are. Functions allow several programmers to work simultaneously on a large project without getting in each others' way, by compartmentalizing development tasks. For example, one programmer might work on images and formatting, while another works on data validation, and a third works on navigation.

Question:

What is the syntax for creating a function?

Answer:

Creating a function is called defining a function. Once completed, it is referred to as the function definition. A function consists of a function header, and a function body. The function header begins with the key word function, followed by a space and the function name (named by the programmer), followed by open and close parentheses.

The function body begins with an open curly-brace, and ends with a close curly-brace. There is no code between the function header and function body. Any code the function performs is placed inside the body.

The parentheses in the header may contain zero or more parameters, each separated by a comma. If a function has parameters, do not declare them again inside the body (with the keyword var), they are implicitly declared inside the parentheses. Example:

    function myFunction(parm1, parm2, parm3)
    {
        // insert function code here
        var sum = parm1 + parm2 + parm3;
    }
    

Notice that there is no semicolon at the end of the parentheses, nor after the closing curly-brace.

Also notice you do not use the var keyword for your parameters, but do use the var keyword for any new variables you declare inside your function.

Question:

How do I use a function?

Answer:

To use a function, you must "call" your function. Calling a function causes the code inside the function body to execute. If a function is not called, code inside the body of that function does not execute.

Question:

How do I call a function?

Answer:

Write the name of the function, followed by parentheses, followed by a semicolon. Do not use the keyword "function" when you call a function.

If the function has parameters, include them inside the parentheses - that is called passing values to the function. The names of the parameters in your function call do not have to match the names of the parameters in the function definition header. The value of the first parameter in your function call will become the value of the first parameter in the function header, and so on.

The parameters in your function call can be variables, objects, literals... Example:

    // define the function
    function mySum(var1, var2, var3)
    {
        // insert code here
        var sum = var1 + var2 + var3;
    }

    var row = 3, col = 7;
    // call the function
    mySum(row, col, 12);

What will be the value of var1?
If you answered 3, you are correct.
What will be the value of var3?
If you answered 12, you are correct.
What will be the value of sum?
If you answered 22, you are correct.

Question:

How many times can I call a function?

Answer:

You can call a function as many times as you need, there is no limit.

Question:

From where do I call a function?

Answer:

For the most part, functions are called from inside other functions. For example, you can call myFunction several times from initFunction, as well as from getTotalsFunction, and from any other function.

Question:

Why would I call a function?

Answer:

Call functions to perform some work, such as print or display something, or to return a value, such as the result of a calculation.

Question:

How do I return a value from a function?

Answer:

Use the keyword return, followed by a space then an expression ending in a semicolon. The expression can be a variable, object, literal, calculation... (determined by the programmer). Example:

    function myAddition(parm1, parm2, parm3)
    {
        // insert function code here
        return (parm1 + parm2 + parm3);
    }

If parm1 is 1, parm2 is 2, and parm3 is 3, then myAddition would return 6. Therefore, the following expression/function call evaluates to 6:

    myAddition(1, 2, 3);

Note: functions are not required to have a return statement. If a function simply prints, or displays text on a page, it may not need to return a value.

Question:

How do I use the return value from a function?

Answer:

The result of your function call evaluates to the value of its return statement. You may assign the result of your function call to a variable. Example:

    function myTotal(var1, var2, var3)
    {
        // insert code here
        var sum = var1 + var2 + var3;
        return sum;
    }

    var nbr1 = 2, nbr2 = 5, nbr3 = 10, myResult, myAnswer;
    // myResult will have a value of 6
    myResult = myTotal(1, 2, 3);
    myAnswer = myTotal(nbr1, nbr2, nbr3);
    

Question:

Can a function have more than one return statement?

Answer:

Yes, but once a return statement is executed, the function is finished and the program returns to the code that called the function. Example:

    function myDivision(parm1, parm2)
    {
        if (parm2 !== 0)
        {
            return (parm1 / parm2);
        }
        return 0;
    }

In the above example, only 1 return statement will execute. If parm1 is not 0, only the first return statement will execute, otherwise only the second return statement will execute. It will never happen that both return statements execute. Furthermore, once a return statement executes, no more code inside that function executes, so if the first return statement executes, any lines of code below it will not execute.

Best Practices - return statements

Many consider it best practice for a function to be designed so that it has only one return statement at the bottom of the body - before the closing curly-brace.

Checkpoint

You should know 6.1

1. How to define a function
2. How do call a function
3. How to pass values to a function
4. How to return a value from a function
5. How to assign the result of your function call to a variable
6. What are a function's header and body
7. What are parameters

Questions 6.1

1. Are functions a way to organize your code?
2. How do you cause the code inside a function to execute?
3. Does a function need to have a return statement?
4. What is the value of myAnswer in the above example?

Exercise 6.1

1. Define a function named getDifference, that takes 2 parameters: nbr1, and nbr2
2. getDifference should return the value of nbr1 minus nbr2
3. Below your function definition, declare 1 variable: answer
4. Call your function, passing the literals 7 and 3, and assign the result of your function call to your variable

web developer toolbox 6.1

Add a link to the JavaScript menu

• Open menu_js.html in your favorite editor
• (Create a new dt tag to) add a category: Functions
• (Create a new a tag inside a new dd tag to) add a link: Calling and returning
• href should be: javascript/functions_return.html

Add a new JavaScript page

• In the javascript folder, open aaa_template.html in your favorite editor, and save-as: functions_return.html
• Below the comment "edit category name", change text from template to Functions
• Below the comment "edit publish and update dates", change both dates to the current date

Update the new page

• Below the comment "edit company name, page title, and page description", change:
  • Company Name to: your name
  • Template to: Calling and returning
  • ...template to: How to call functions and return values
• Update the comments section:
  • <dt>Return</dt>
  • <dd>Use the return keyword, followed by an expression to return the value of that expression</dd>
  • <dd>Assign the result of your function call to a variable</dd>
  • <dd>Note: once the return statement is encountered, no other statements in the function are executed</dd>
• Insert html inside the wxHtmlResults div:
  • <p id="p1"></p>
  • <p id="p2"></p>
  • <p id="p3"></p>

Add JavaScript below the line of asterisks following the text:
** BEGIN DEVELOPER JAVASCRIPT SECTION

• Complete the instructions for Exercise 6.1
• Below your code for Exercise 6.1, assign the value of answer to the innerHTML of p1
• Inside your function before the return statement, assign the literal "This statement executed" to the innerHTML of p2
• Inside your function after the return statement, assign the literal "This statement did not execute" to the innerHTML of p3

Open menu_js.html in your browser and click on your new link

Click on the Run javascript button to test your code