Home > Articles > Open Source > Ajax & JavaScript

Functions and Statements in JavaScript

This sample chapter shows how you can store code by creating your own functions, and how you can control the flow of a script. You will also learn about some of the conveniently built-in pieces of code found in JavaScript.
This chapter is from the book

Week 1: Day 3: Functions and Statements

This chapter begins by looking at how you can store code by creating your own functions, and how you can control the flow of a script. This will provide the other "half" of the basics you will need to create useful scripts (in addition to what you learned about variables in Chapter 2, "Working with Data"). You will also find out about some of the conveniently built-in pieces of code found in JavaScript.

In this chapter you will learn the following:

  • What functions are

  • How to create a function

  • How to use a function

  • About predefined global functions

  • What statements are

  • Conditional statements

  • Loop statements

User Defined Functions

A user-defined function is a function that you create, as opposed to one of the built-in JavaScript functions. JavaScript provides both built-in functions and the tools to create your own. Both have their place, but for the moment, let's concentrate on learning what functions are and how we can build and use our own.

What Is a Function?

Chapter 2 started by looking at how variables and constants can be used to store data until it is needed or it can be used again. Although this is an essential part of programming, to create truly useful scripts you also need to be able to store code (as opposed to data). So far, the code we have worked with runs as soon as the page loads or is reloaded. Frequently, though, you may want to use the same piece of code multiple times or run it some time after the page has loaded in response to a user action. To do this, a function is used. Just as you can think of variables as data containers that can be used to store data, think of functions as code containers used to store pieces of code. Let's take a look at how they work.

Creating a Function

In much the same way as variables are declared with the var keyword, functions are declared using the function keyword followed by the name you wish to give to the function. However, when you declare a function you are required to include two additional items: a pair of parentheses and a pair of curly braces, as shown in the example below:

function functionName(){}

NOTE

JavaScript functions are named according to the same rules that are used for naming variables. They can contain alphanumeric characters, the underscore character, and the dollar sign as long as you do not use a JavaScript keyword. The first character cannot be a number. Remember also to give your functions meaningful names.

We will discuss the function of the parentheses shortly, so let's concentrate on the curly braces for now. The curly braces (or "curly brackets" as they are sometimes called) act as code containers. All the code that is to be contained by the function (termed the function body) has to be placed between them. Essentially, the curly braces tell the JavaScript interpreter where the function body starts and where it ends. Here is an example of a function with some code:

function myFirstFunction(){ alert("I'm in a function!") }

As functions usually contain more than a single line of code, it is usual to break the curly braces over more than one line, as shown below:

function myFunction(){
 .
 code
 .
}

or sometimes the code is written like this:

function myFunction()
{
   .
   code
   .
}

CAUTION

Do not put a semi-colon (;) after the parentheses or after the curly braces. This will cause an error.

The JavaScript interpreter will treat both methods of code layout the same way. The JavaScript interpreter knows that functions aren't finished until it has reached a closing curly brace so it ignores the extraneous white space. The aim of spreading code across several lines and indenting statements is to make the start and end of your function stand out so that when you scan large sections of code you can immediately pick out function names and where their code begins and ends. Which method you use is up to you.

Let's create a page that contains a function that will greet a visitor by name. Use the template in Listing 1.6 and add to it the function in the following code. After you have created the page, save it, and load it into your browser. See Listing 3.1.

Listing 3.1 Creating a Function (storedGreeting.htm)

<html>
<head>
<title>Function Demo</title>

<script language="javascript" type="text/javascript">
<!--

function greetVisitor()
{
   var myName = prompt("Please enter your name.", "");
   alert("Welcome " + myName + "!")
}

//-->
</script>
</head>
<body>

<h1>Function Demo</h1>

</body>
</html>

As you will see, the page loads without an error but the JavaScript contained within the function body doesn't run. Hopefully this was what you expected. Remember, functions store code—we have yet to learn how to evaluate the code.

Using Functions

To evaluate the function's code (or as we are going to refer to it from now on, "to call the function"), we need to write out something termed a function call. To do this, simply write the function's name followed by opening and closing parentheses. The parentheses tell the JavaScript interpreter to call the function immediately and to run its code before it does anything else. Therefore to call the function in your page, simply write the following line under the function declaration:

greetVisitor();

If you load your page with these changes, the function should be called, and you then will be prompted for your name and greeted.

CAUTION

As with the var keyword for variables, the function keyword is only used one time—the first time you declare a function. It is not used when you call it.

Function calls can be placed anywhere in a script block (and can be placed in event handlers, as you will learn later in the book). For the moment, though, to call our functions, we are going to use the ability of anchor tags to execute JavaScript using their href attribute. To do this, simply write "javascript" followed by a colon and a JavaScript statement between the href's quote marks. To see this at work, add the following line to the body of an HTML document and click on the hyperlink it produces.

<a href="javascript:alert('You clicked on the link!')">Click Here!</a>

This can be used to call functions simply by replacing the alert function with a function call to one of your own functions.

Go back to your page for greeting a visitor and add a hyperlink that calls the function as shown in Listing 3.2. Resave the page, and then open it with your browser.

Listing 3.2 Creating a Function (storedGreeting2.htm)

<html>
<head>
<title>Calling a Function</title>

<script language="javascript" type="text/javascript">
<!--

function greetVisitor()
{
   var myName = prompt("Please enter your name.", "");
   alert("Welcome " + myName + "!")
}

//-->
</script>

</head>
<body>

<h1>Please click below and enter your name when prompted.</h1>

<p><a href="javascript:greetVisitor()">Click for a greeting</a></p>

</body>
</html>

As you will see, the page loads without the alert box displaying. Now try clicking on the hyperlink. This will call the function, and the prompt for your name should appear as shown in Figure 3.1.

Figure 3.1 A prompt box requests your name.

Fill in your name and an alert box will appear to greet you. You will see later in the chapter how to handle situations when someone may not fill in the prompt or they may click Cancel.

Hopefully you now see how simple functions are created and used, and you understand why they are so essential. Without functions JavaScript couldn't do anything after the page had loaded. With them, you can create countless interactive or useful enhancements.

Sending Data to Functions

Frequently, when creating a function you will want to give it some data on which to work. This allows you to perform the same process repeatedly on different sets of data. The process of sending data to a function is termed passing data to a function, which means that the data to be passed is written into the parentheses of the function call. For example, to send the numeric value 10 to a function called squareNum() you would write:

squareNum(10);

Sometimes you will need to extend this process so that more than one piece of data can be passed to a function. This can be accomplished by placing each piece of data to be passed to the function within the parentheses, and separating each of them with a comma. For example, if you wanted to send two different strings followed by the number 3 and the Boolean value true to a function called processThis(), you would write:

processThis("1st string", "2nd string", 3, true);

As you will see later, the order in which these pieces of data are written between the parentheses is important to the correct functioning of a function.

All these pieces of data that are sent to a function for use in the code that the function contains are known as arguments (or parameters) of the function. Now that you can pass arguments to a function, let's see how you can use them in the function body.

Using Arguments

There are two ways of grabbing the arguments that are passed to functions. For the moment, we will deal with the simpler and more popular of the two.

The usual method of accessing arguments is to write names into the parentheses of the function declaration that correspond to the arguments written into the function call. For example, say you have a function called numOddOrEven() that calculates whether the single numeric argument that is passed to it is odd or even. To call the function and send it the number 9, you would write the following:

numOddOrEven(9);

To use this number in the function, a name must have been written in the parentheses when the function was defined. For example, if the name theNum was used, it might look like this:

function numOddOrEven(theNum)
{	
   numType = (theNum % 2)? "odd": "even";
   alert("The number " +theNum+ " is an " +numType+ " number.");
}

For the moment, you don't need to worry about how the function works. The important thing to note is the way that theNum is used repeatedly throughout the function block. Effectively, the name (or names) contained within the parentheses acts exactly like a variable. Wherever it is used in the function body, the theNum is replaced by the data that was sent to the function as an argument (in this case the number 9).

The method of separating arguments with commas is also used to separate the argument names in the function declaration's parentheses. To use two arguments in the function, you would declare it as shown below:

function numsOddOrEven(num1, num2)
{
   numType1 = (num1 % 2)? "odd": "even";
   numType2 = (num2 % 2)? "odd": "even";
   alert("The number " +num1+ " is an " +numType1+ " number.");
   alert("The number " +num2+ " is an " +numType2+ " number.");
}

To call this function and send it the numbers 5 and 10, you would write the function call as shown below:

numsOddOrEven(5, 10);

This would result in the two alert boxes shown in Figures 3.2 and 3.3.

Figure 3.2 Alert showing the type of the first argument passed to the numsOddOrEven() function.

Figure 3.3 Alert showing the type of the second argument passed to the numsOddOrEven() function.

Note the order in which the alert boxes appear. The argument name num1, which comes first in the parentheses of the function declaration, takes the value 5, which was given first in the function call. Likewise num2, which came second in the function declaration, takes the value 10, which came second in the function call.

CAUTION

Always be careful to provide data in the correct order. If you confuse the order in which you provide the arguments to a function, you will likely get an unexpected result or an error.

Another thing to note is that if you have declared your function with argument names in the parentheses, you do not necessarily have to send them data with the function call. If arguments aren't sent, then the argument names will simply have the value undefined. For example, try calling the following function both with and without an argument:

function checkForArg(myArg)
{
   var msg = "The function argument was "; // Start message
   // Add ending based on whether an argument has been sent
     msg += myArg? myArg: "not sent!";
   alert(msg);
}
checkForArg();

The conditional operator concatenates the argument passed to the function to the variable msg, if an argument has been passed to the function. If no argument has been passed to the function, then the string "not sent!" is concatenated to the msg variable.

This feature can be useful if for some reason you want to code your function so it does not rely on being sent arguments. But that would be an unusual situation.

CAUTION

Be careful about passing the correct number of arguments to a function, since most of your functions will only operate correctly if the correct number of parameters is passed to the function. With no parameters or an incorrect number passed to the function an unexpected result or an error may occur.

Returning Data from a Function

Very often you will want functions to give back data after they have processed the data that was sent to them. To do this we use the return statement. Take a look at this example before we walk through it:

function getModulus(theNum)
{
   var theModulus = (theNum>=0)? theNum: -theNum;
   return theModulus;
}

var myNum = -12;
  myNum = getModulus(myNum);
alert(myNum);

Notice that the function call is on the right-hand side of an assignment to a variable called myNum, and that the function is sent the original value of myNum as an argument. The first line of the function processes the number to find its modulus (the number 12) prior to storing it in the variable theModulus.

NOTE

The modulus of a number is the same as the number if the number is greater than zero. If the number is less than zero, then its modulus is the negation of the number—that is, the modulus of -5 is 5. The modulus is sometimes referred to as the absolute value of the number.

It is the next line that is really of interest here. It uses the return keyword to return the value of the variable theModulus to the point in the code where the function call is situated. In this case, the function call was to the right of the = assignment operator. Therefore the value 12 is assigned to the variable myNum replacing its original value of -12. This is shown when the alert box displays myNum's value (see Figure 3.4).

Figure 3.4 An alert showing the value of myNum, which is the value returned by the getModulus () function.

The return statement does indeed return data from the function to wherever the function call was located. However, there is another characteristic of the return statement that the above example doesn't clearly demonstrate. When the return statement is evaluated it stops any further evaluation of the function body. Enter the following into the template from Listing 1.6 and try it out:

function returnTest()
{
   alert("This will alert.");
   return;
   alert("This won't alert.");
   alert("Neither will this.");
   alert("Or this.");
}
returnTest();

In this example, the first alert would be the only one to be evaluated, and therefore displayed, because the return statement stops the function from continuing to the end of the function body.

A return statement can have two effects. When a return keyword is encountered it always stops a function from further evaluation. If provided with some data, the return statement will return the data to the place in the code where the function call is situated. If the return statement is not provided with data, it will simply return undefined—just as a function without a return statement would.

Variable Scope

As promised in Chapter 2, let's now look more closely at the differences that including or omitting the var keyword during declaration of a variable would make on the variables in your JavaScript code. The reason for putting this examination off until now is because it is in functions that your choice of including or omitting the var keyword has the most significant effect.

Before we go on to find out more about the scope of a function, let's first take a look at the meaning of the word scope.

The word scope refers to the limits inside which something is applicable. For example, in the United States there are two types of law: federal law and state law. State law is only applicable in individual states and therefore due to its geographical limitation, it might be referred to as having "local" scope. Federal law, on the other hand, isn't limited by state boundaries. It governs the whole country, so it might be said that, as far as the United States is concerned, it has "global" scope.

The idea of local and global scopes also exists for JavaScript variables. When a variable is termed a global variable it means that it can be accessed and used by any part of any of the scripts in the same HTML document. In addition, you also can use global variables in scripts that are in a different frame or browser window (although we haven't covered that yet). All variables declared in the script block, but outside of functions, have global scope.

Variables defined inside a function are different. Their scope depends on whether you do or do not declare them with the var keyword. If a variable is declared within a function without the var keyword, then its scope is global. If a variable is declared within a function using the var keyword, then its scope is local.

The problem with creating global variables from inside a function may not be immediately apparent. What tends to happen is that functions use temporary variables that are of use only while the function is evaluating. Outside the function they aren't needed. It is easy in a long piece of code to forget some of the global variable names and give one or more of the variables inside a function the same name as a global variable which already exists. If you have not included the var keyword when a variable is declared within a function, then the variable is global in scope and the data in the global variable with the same name outside the function is overwritten. This can play havoc with your scripts, and it can be very hard to track down the problem, as error messages that may be generated won't tell you from where the problem stems. The JavaScript interpreter is doing what you told it to do, but it is doing something that you may well not have expected it to do.

Creating local variables enables you to eliminate the possibility that this type of problem will ever arise. If you happen to unintentionally use the same name for a variable in a function and a variable in the main script block, then as long as you used the var keyword an entirely different local variable is created inside the function.

NOTE

Local variables are not only limited to the function in which they were defined, but they also only exist for the time it takes for the function to execute. As soon as the function body has been evaluated, local variables cease to exist and the data they contained is discarded.

Here is an example that will show you the effect of declaring a variable within a function. Run it both with and without the var keyword in front of the variable testVariable in the function.

First, if you run it with the var keyword within the function, the value of the global variable will not be overwritten.

var testVariable = "Global variable was NOT overwritten!";
function someFunction()
{
   var testVariable = "Global variable WAS overwritten!";
}
someFunction();
alert(testVariable);

However, if you run the following code with the var keyword omitted in the declaration of the variable within the function, then the global variable will be overwritten.

var testVariable = "Global variable was NOT overwritten!";
function someFunction()
{
   testVariable = "Global variable WAS overwritten!";
}
someFunction();
alert(testVariable);

In summary, unless you specifically want the function to change the value of a global variable you should always declare variables inside of functions with the var keyword. It may seem tedious, but if you get into this good habit of using the var keyword all the time, you will ensure that you don't accidentally overwrite an important global variable in a long complex script.

CAUTION

If you are using publicly available JavaScript code written by someone else with your own code, you need to be particularly careful. The way the other script author uses variables could be similar to your own, and one of your local variables could overwrite one of his global variables, causing problems that could be very difficult to track down.

InformIT Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from InformIT and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites, develop new products and services, conduct educational research and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email information@informit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by InformIT. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.informit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020