I need to use Atom to solve this.

Module: Javascript Functions

In Javascript (and other programming languages), a function is simply an object that contains code that can be run over and over again. The idea of a function is to create a reusable piece of code as opposed to rewriting the code over and over again whenever you need it.

There are two parts to using a function in programs:

Part 1. Define the function

Part 2. Call the function

A function is usually defined once (and updated as necessary to improve the code / add functionality / etc.) and then called one or more times.

When you call a function multiple times, it is called reuse because you are reusing it over and over again. Another design approach is the concept of Dont Repeat Yourself (also known as DRY in programming circles). Basically, this approach is popular for software developers and essentially means that dont do work you have already done. Functions help in a DRY strategy.

Technically, you can create a function and never call it but that defeats the purpose of creating the function in the first place. Sometimes, you also create functions that get used and because you change the code, the function no longer gets used. Software programmers often remove functions from the code that no longer serve a purpose.

Javascript Function Syntax

In Javascript, you create a function with the following syntax:

function () {

// code block in the function

}

The following is an example of a simple print function:

function printHello() {

document.write(Hello);

}

Alternatively, you can pass information into the function:

function printHello(name) {

document.write(Hello + name);

}

Calling Javascript Functions

Note, when we define a function, Javascript knows about it but it will not run the function automatically.

Instead, we would need to call the function. For the example above, lets call the function with a name:

printHello(Professor Michael);

Can you guess what would happen with the call above?

It should print Hello Professor Michael on your web page.

Additionally, you can call it with any parameter you want

printHello(Michael);

printHello(James);

printHello(Ella);

printHello(Lance);

In the case above, you are reusing code over and over again. Notice that the strings you are passing in are being stored in the parameter called name in the function printHello. That parameter is essentially a variable that is available for your function.

Javascript Parameters - Things you pass into a Function

You can create a function that takes in more than one parameter. Notice, I am going to create a new function that extends the previous function:

function printHelloVersion2(name, age) {

document.write(Hello + name + . Your age is + age);

}

You can then call it with the values you want to pass in:

printHelloVersion2(Ethan, 17);

Note, you must put commas between the parameters in the function and when you call it. It also must align to the order that the function requires. For instance, if I switched Ethan and 17 to the following:

printHelloVersion2(17, Ethan);

The function will still work but it may come up with different results than you expect.

Document.Write - Object function called method

Most of the time, you want to create functions that save you time. In our case, creating a function to do one thing isnt going to save you time as document.write can be easily written instead.

Also, you can call functions within functions. This is often done and in fact, most of the time you should be using functions that are already available instead of you creating your own.

The document.write call is a special type of function called a method. Methods are functions associated with objects. The object document has a method called write. We will discuss the document object in more detail and the explanation of the document object is in your textbook.

Here is a function that executes a more complex calculation:

More Advanced Functions

function calculateEquation(num1, num2) {

var num3 = num1 + num2;

num3 += 10;

num3 = num3 / num1;

num3 = num3 * num2;

return num3;

}

If you had to write the calculation above, it would be time consuming to write this code every time you needed to calculate the equation above. It would also be error phone and hard to change if the equation needed to change.

Notice how we also use the return statement to return the results of the calculation. Most of the time, you want a function to do a special thing and return the results that can be used later in the program.

What would be the result of the previous code?

var result = calculateEquation(10, 5);

It would perform the calculation and store the result in the result variable.

Also notice that I could break this program by simply passing 0 instead of 5. This is because the calculation tries to divide the number by the second parameter. As a programmer, you often need to test the parameters prior to processing the data.

function calculateEquation(num1, num2) {

if (num2 == 0) {

// will stop processing because num2 should never be zero.

return null;

}

var num3 = num1 + num2;

num3 += 10;

num3 = num3 / num1;

num3 = num3 * num2;

return num3;

}

Javascript Function Variables

Alternative way to declare a function would be to put the function in a variable:

var calculateAddition = function (num1, num2) {

return num1 + num2;

}

var addedResult = calculateAddition(1, 2);

In this code block, we didnt even name the function we declared. Instead we defined the function an an anonymous function and declared 2 variables. We took the function and assigned it to a variable called calculateAddition.

The benefit of assigning a function to a variable is that you can replace the function with another function by reassigning the variable. For instance, lets say you wanted to change the behavior of calculateAddition , you should do the following:

calculateAddition = function (num1, num2) {

// replaces the variable with this adjusted function

return num1 + num2 + 3;

}

You can even pass in functions as a parameter into another function:

var printResults(num1, num2, functionName) {

document.write(The results of the function are: + functionName(num1, num2));

}

printResults(2, 4, calculateAddition);