Head First JavaScript Programming (2014)

Chapter 3. Introducing Functions: Getting functional

Get ready for your first superpower. You’ve got some programming under your belt; now it’s time to really move things along with functions. Functions give you the power to write code that can be applied to all sorts of different circumstances, code that can be reused over and over, code that is much more manageable, code that can be abstracted away and given a simple name so you can forget all the complexity and get on with the important stuff. You’re going to find not only that functions are your gateway from scripter to programmer, they’re the key to the JavaScript programming style. In this chapter we’re going to start with the basics: the mechanics, the ins and outs of how functions really work, and then you’ll keep honing your function skills throughout the rest of the book. So, let’s get a good foundation started, now.

NOTE

More on this as we progress through the book.

SHARPEN YOUR PENCIL

Do a little analysis of the code below. How does it look? Choose as many of the options below as you like, or write in your own analysis:

var dogName = "rover";

var dogWeight = 23;

if (dogWeight > 20) {

console.log(dogName + " says WOOF WOOF");

} else {

console.log(dogName + " says woof woof");

}

dogName = "spot";

dogWeight = 13;

if (dogWeight > 20) {

console.log(dogName + " says WOOF WOOF");

} else {

console.log(dogName + " says woof woof");

}

dogName = "spike";

dogWeight = 53;

if (dogWeight > 20) {

console.log(dogName + " says WOOF WOOF");

} else {

console.log(dogName + " says woof woof");

}

dogName = "lady";

dogWeight = 17;

if (dogWeight > 20) {

console.log(dogName + " says WOOF WOOF");

} else {

console.log(dogName + " says woof woof");

}

What’s wrong with the code anyway?

We just looked at some code that got used over and over. What’s wrong with that? Well, at face value, nothing. After all, it works, right? Let’s have a closer look at the code in question:

Sure, this code looks innocent enough, but it’s tedious to write, a pain to read and will be problematic if your code needs to change, over time. That last point will ring true more and more as you gain experience in programming—all code changes over time and the code above is a nightmare waiting to happen because we’ve got the same logic repeated over and over, and if you need to change that logic, you’ll have to change it in multiple places. And the bigger the program gets, the more changes you’ll have to make, leading to more opportunities for mistakes. What we really want is a way to take redundant code like this and to put it in one place where it can be easily re-used whenever we need it.

BRAIN POWER

How can we improve this code? Take a few minutes to think of a few possibilities. Does JavaScript have something that could help?

By the way, did we happen to mention FUNCTIONS?

Meet functions. JavaScript functions allow you to take a bit of code, give it a name, and then refer to it over and over whenever we need it. That sounds like just the medicine we need.

Say you’re writing some code that does a lot of “barking.” If your code is dealing with a big dog then the bark is a big “WOOF WOOF”. And if it’s a small dog, the bark is a tiny “woof woof”. You’re going to need to use this barking functionality many times in your code. Let’s write a barkfunction you can use over and over:

Now we need to write the code for the function; our code will check the weight and output the appropriate sized bark.

Okay, but how does it actually work?

First, let’s rework our code using the new function bark:

Wow, that’s a lot less code—and it’s so much more readable to your co-worker who needs to go into your code and make a quick change. We’ve also got all the logic in one convenient location.

Okay, but how exactly does it all come together and actually work? Let’s go through it step by step.

First we have the function.

So we’ve got the bark function right at the top of the code. The browser reads this code, sees it’s a function and then takes a look at the statements in the body. The browser knows it isn’t executing the function statements now; it’ll wait until the function is called from somewhere else in the code.

Notice too that the function is parameterized, meaning it takes a dog’s name and weight when it is called. That allows you to call this function for as many different dogs as you like. Each time you do, the logic applies to the name and weight you pass to the function call.

Now let’s call the function.

To call, or invoke, a function, just use its name, followed by an open parenthesis, then any values you need to pass it, separated by commas, and finally a closing parenthesis. The values in the parentheses are arguments. For the bark function we need two arguments: the dog’s name and the dog’s weight.

NOTE

“Invoking a function” is just a fancy way of saying “calling a function.” Feel free to mix and match, especially when your new boss is around.

Here’s how the call works:

After you call the function, the body of the function does all the work.

After we know the value for each parameter—like name is “rover” and weight is 23—then we’re ready to execute the function body.

Statements in the function body are executed from top to bottom, just like all the other code you’ve been writing. The only difference is that the parameter names name and weight have been assigned the values of the arguments you passed into the function.

And when it’s done... The logic of the body has been carried out (and, in this example, you’ll see that Rover, being 23 pounds, sounds like “WOOF WOOF”), and the function is done. After the function completes, then control is returned to the statement following our call to bark.

SHARPEN YOUR PENCIL

We’ve got some more calls to bark below. Next to each call, write what you think the output should be, or if you think the code will cause an error. Check your answer at the end of the chapter before you go on.

CODE MAGNETS

This working JavaScript code is all scrambled up on the fridge. Can you reconstruct the code snippets to make a working program that produces the output listed below? Notice, there may be some extra code on the fridge, so you may not use all the magnets. Check your answer at the end of the chapter.

JAVASCRIPT CONSOLE

Wear a jacket

Wear a t-shirt

Wear a sweater

We’re using this to represent a generic console.

THE FUNCTION EXPOSED

This week’s interview: the intimate side of functions...

Head First: Welcome Function! We’re looking forward to digging in and finding out what you’re all about.

Function: Glad to be here.

Head First: Now we’ve noticed many JavaScript newbies tend to ignore you. They just get in and write their code, line by line, top to bottom, no functions at all. Are you really needed?

Function: Those newbies are missing out. That’s unfortunate because I’m powerful. Think about me like this: I give you a way to take code, write it once, and then reuse it over and over.

Head First: Well, excuse me for saying this, but if you’re just giving them the ability to do the same thing, over and over... that’s a little boring isn’t it?

Function: No no, functions are parameterized—in other words, each time you use the function, you pass it arguments so it can compute something that’s relevant to what you need.

Head First: Err, example?

Function: Let’s say you need to show a user how much the items in his shopping cart are going to cost, so you write a function computeShoppingCartTotal. Then you can pass that function the shopping carts of many users and each time I compute the amount of each specific shopping cart.

Head First: If you’re so great, why aren’t more new coders using you?

Function: That’s not even a true statement; they use me all the time: alert, prompt, Math.random, document.write. It’s hard to write anything meaningful without using functions. It’s not so much that new users don’t use functions, they just aren’t defining their own functions.

Head First: Well, right, alert and prompt, those make sense, but take Math.random—that doesn’t look quite like a function.

Function: Math.random is a function, but it happens to be attached to another powerful thing new coders don’t make a lot of use of: objects.

Head First: Oh yes, objects. I believe our readers are learning about those in a later chapter.

Function: Fair enough, I’ll save my breath on that one for later.

Head First: Now this argument/parameter stuff all seems a little confusing.

Function: Think about it like this: each parameter acts like a variable throughout the body of the function. When you call the function, each value you pass in is assigned to a corresponding parameter.

Head First: And arguments are what?

Function: Oh, that’s just another name for the values you pass into a function... they’re the arguments of the function call.

Head First: Well you don’t seem all that great; I mean, okay you allow me to reuse code, and you have this way of passing values as parameters. Is that it? I don’t get the mystery around you.

Function: Oh, that’s just the basics, there’s so much more: I can return values, I can masquerade around your code anonymously, I can do a neat trick called closures, and I have an intimate relationship with objects.

Head First: Ohhhhh REALLY?! Can we get an exclusive on that relationship for our next interview?

Function: We’ll talk...

What can you pass to a function?

When you call a function you pass it arguments and those arguments then get matched up with the parameters in the function definition. You can pass pretty much any JavaScript value as an argument, like a string, a boolean, or a number:

You can also pass variables as arguments, and that’s often the more common case. Here’s the same function call using variables:

And, you can even use expressions as arguments:

No, they’re different.

When you define a function you can define it with one or more parameters.

When you call a function, you call it with arguments:

So you’ll only define your parameters once, but you’ll probably call your function with many different arguments.

BRAIN POWER

What does this code output? Are you sure?

function doIt(param) {

param = 2;

}

var test = 1;

doIt(test);

console.log(test);

EXERCISE

Below you’ll find some JavaScript code, including variables, function definitions and function calls. Your job is to identify all the variables, functions, arguments and parameters. Write the names of each in the appropriate boxes on the right. Check your answer at the end of the chapter before you go on.

JavaScript is pass-by-value.

That means pass-by-copy.

It’s important to understand how JavaScript passes arguments. JavaScript passes arguments to a function using pass-by-value. What that means is that each argument is copied into the parameter variable. Let’s look at a simple example to see how this works.

1. Let’s declare a variable age, and initialize it to the value 7.

var age = 7;

2. Now let’s declare a function addOne, with a parameter named x, that adds 1 to the value of x.

3. function addOne(x) {

4. x = x + 1;

}

5. Now let’s call the function addOne, pass it the variable age as the argument. The value in age is copied into the parameter x.

addOne(age);

6. Now the value of x is incremented by one. But remember x is a copy, so only x is incremented, not age.

We’re glad you’re thinking about it. Understanding how JavaScript passes values to functions is important. On the one hand it is pretty straightforward: when an argument is passed to a function its value is first copied and then assigned to the corresponding parameter. But, if you don’t understand this, you can make some wrong assumptions about how functions, arguments and parameters all work together.

The real impact of pass-by-value is that any changes to a parameter’s value within the function will affect only the parameter, not the original variable passed to the function. That’s pretty much it.

But of course, there’s an exception to every rule, and we’re going to have to talk about this topic again when we learn objects, which we’ll talk about in a couple of chapters. But no worries, with a solid understanding of pass-by-value, you’re in good shape to have that discussion.

And, for now, just remember that because of pass-by-value, whatever happens to a parameter in the function, stays in the function. Kinda like Vegas.

BRAIN POWER REVISITED

Remember this Brain Power? Do you think about it differently now, knowing about pass by value? Or did you guess correctly the first time?

function doIt(param) {

param = 2;

}

var test = 1;

doIt(test);

console.log(test);

Weird Functions

So far you’ve seen the normal way to use functions, but what happens when you experiment a little by, say, passing too many arguments to a function? Or not enough? Sounds dangerous. Let’s see what happens:

EXPERIMENT #1: what happens when we don’t pass enough arguments?

Sounds dicey, but all that really happens is each parameter that doesn’t have a matching argument is set to undefined. Here’s an example:

EXPERIMENT #2: what happens when we pass too many argments?

Ah, in this case JavaScript just ignores the extra. Here’s an example:

EXPERIMENT #3: what happens when we have NO parameters?

No worries, many functions have no parameters!

function barkAtTheMoon() {

console.log("Woooooooooooooo!");

}

barkAtTheMoon();

JAVASCRIPT CONSOLE

Woooooooooooooo!

Functions can return things too

You know how to communicate with your functions in one direction; that is, you know how to pass arguments to functions. But what about the other way? Can a function communicate back? Let’s check out the return statement:

Tracing through a function with a return statement

Now that you know how arguments and parameters work, and how you can return a value from a function, let’s trace through a function call from start to finish to see what happens at every step along the way. Be sure to follow the steps in order.

ANATOMY OF A FUNCTION

Now that you know how to define and call a function, let’s make sure we’ve got the syntax down cold. Here are all the parts of a function’s anatomy:

THERE ARE NO DUMB QUESTIONS

Good catch. Yes and no.

These declarations work exactly the same within a function as they do outside a function, in the sense that you are initializing a new variable to a value. However, the difference between a variable declared outside a function and a variable declared inside a function is where that variable can be used—in other words, where in your JavaScript code you can reference the variable. If the variable is declared outside a function, then you can use it anywhere in your code. If a variable is declared inside a function, then you can use it only within that function. This is known as a variable’s scope. There are two kinds of scope: global and local.

Global and local variables

Know the difference or risk humiliation

You already know that you can declare a variable by using the var keyword and a name anywhere in your script:

And you’ve seen that you can also declare variables inside a function:

If a variable is declared outside a function, it’s GLOBAL. If it’s declared inside a function, it’s LOCAL.

But what does it matter? Variables are variables, right? Well, where you declare your variables determines how visible they are to other parts of your code, and, later, understanding how these two kinds of variables operate will help you write more maintainable code (not to mention, help you understand the code of others).

Another good catch.

There’s a long history of using the letter i as the variable you iterate with. This convention developed back in the days when space was limited (like when we used punched cards to write code), and there was an advantage to short variable names. Now it’s a convention all programmers understand. You’ll also commonly see j, k, and sometimes even x and y used in this manner. However, this is one of the only exceptions to the best practice of choosing meaningful variable names.

Knowing the scope of your local and global variables

Where you define your variables determines their scope; that is, where they’re visible to your code and where they aren’t. Let’s look at an example of both locally and globally scoped variables—remember, the variables you define outside a function are globally scoped, and the function variables are locally scoped: These four variables are globally scoped. That means they are defined and visible in all the code below.

The short lives of variables

When you’re a variable, you work hard and life can be short. That is, unless you’re a global variable, but even with globals, life has its limits. But what determines the life of a variable? Think about it like this:

Globals live as long as the page. A global variable begins life when its JavaScript is loaded into the page. But, your global variable’s life ends when the page goes away. Even if you reload the same page, all your global variables are destroyed and then recreated in the newly loaded page.

Local variables typically disappear when your function ends. Local variables are created when your function is first called and live until the function returns (with a value or not). That said, you can take the values of your local variables and return them from the function before the variables meet their digital maker.

NOTE

We say “typically” because there are some advanced ways to retain locals a little longer, but we’re not going to worry about them now.

So, there really is NO escape from the page is there? If you’re a local variable, your life comes and goes quickly, and if you’re lucky enough to be a global, you’re good as long as that browser doesn’t reload the page.

Don’t forget to declare your locals!

If you use a variable without declaring it first, that variable will be global. That means that even if you use a variable for the first time inside a function (because you meant for it to be local), the variable will actually be global, and be available outside the function too (which might cause confusion later). So, don’t forget to declare your locals!

If you forget to declare a variable before using it, the variable will always be global (even if the first time you use it is in a function).

This program behaves as if you’d written this instead:

You “shadow” your global.

Here’s what that means: say you have a global variable beanCounter and you then declare a function, like this:

When you do this, any references to beanCounter within the function refer to the local variable and not the global. So we say the global variable is in the shadow of the local variable (in other words we can’t see the global variable because the local version is in our way).

NOTE

Note that the local and global variables have no effect on each other: if you change one, it has no effect on the other. They are independent variables.

EXERCISE

Below you’ll find some JavaScript code, including variables, function definitions and function calls. Your job is to identify the variables used in all the arguments, parameters, local variables and global variables. Write the variable names in the appropriate boxes on the right. Then circle any variables that are shadowed. Check your answer at the end of the chapter.

FIRESIDE CHAT

Tonight’s talk: Global and Local variables argue over who is most important in a program.

THERE ARE NO DUMB QUESTIONS

Actually, you can put your functions anywhere in your JavaScript file.

JavaScript doesn’t care if your functions are declared before or after you use them. For instance, check out this code:

This might seem really odd, especially if you remember when the browser loads your page, it starts executing the JavaScript from the top to the bottom of your file. But, the truth is JavaScript actually makes two passes over your page: in the first pass it reads all the function definitions, and in the second it begins executing your code. So, that allows you to place functions anywhere in your file.

EXERCISE

The Thing-A-Ma-Jig

The Thing-A-Ma-Jig is quite a contraption—it clanks and clunks and even thunks, but what it really does, well, you’ve got us stumped. Coders claim they know how it works. Can you uncrack the code and find its quirks?

WEBVILLE GUIDE TO CODE HYGIENE

In Webville we like to keep things clean, organized and ready for expansion. There’s no place that needs to be better maintained than your code, and JavaScript can seem pretty loosey-goosey when it comes to organizing your variables and functions. So we’ve put together a neat little guide for you that makes a few recommendations for those new to Webville. Take one, they’re FREE.

Global variables, right at the TOP!

It’s a good idea to keep your globals grouped together as much as possible, and if they’re all up at the top, it’s easy to find them. Now you don’t have to do this, but isn’t it easier for you and others to locate the variables used in your code if they’re all at the top?

Functions like to sit together.

Well, not really; they actually don’t care, they’re just functions. But, if you keep your functions together, it’s a lot easier to locate them. As you know, the browser actually scans your JavaScript for the functions before it does anything else. So you can place them at the top or bottom of the file, but if you keep them in one place your life will be easier. Here in Webville, we often start with our global variables and then put our functions next.

Let your local variables be declared at the TOP of the function they’re in.

Put all your local variable declarations at the beginning of the function body. This makes them easy to find and ensures they are all declared properly before use.

That’s it, just be safe and we hope you enjoy your time coding in Webville!

WHO AM I?

A bunch of JavaScript attendees, in full costume, are playing a party game, “Who am I?” They give you a clue, and you try to guess who they are, based on what they say. Assume they always tell the truth about themselves. Fill in the blank next to each sentence with the name of one attendee.

Tonight’s attendees:

function, argument, return, scope, local variable, global variable, pass-by-value, parameter, function call, Math.random, built-in functions, code reuse.

I get passed into a function. ______________________________

I send values back to the calling code. ______________________________

I’m the all important keyword. ______________________________

I’m what receives arguments. ______________________________

It really means ‘make a copy’. ______________________________

I’m everywhere. ______________________________

Another phrase for invoking a function. ______________________________

Example of a function attached to an object. ______________________________

alert and prompt are examples. ______________________________

What functions are great for. ______________________________

Where I can be seen. ______________________________

I’m around when my function is. ______________________________

FIVE MINUTE MYSTERY

The case of the attempted robbery not worth investigating

Sherlock finished his phone call with the bumbling chief of police, Lestrade, and sat down in front of the fireplace to resume reading the newspaper. Watson looked at him expectantly.

“What?” said Sherlock, not looking up from the paper.

“Well? What did Lestrade have to say?” Watson asked.

“Oh, he said they found a bit of rogue code in the bank account where the suspicious activity was taking place.”

“And?” Watson said, trying to hide his frustration.

“Lestrade emailed me the code, and I told him it wasn’t worth pursuing. The criminal made a fatal flaw and will never be able to actually steal the money,” Sherlock said.

“How do you know?” Watson asked.

“It’s obvious if you know where to look,” Sherlock exclaimed. “Now stop bothering me with questions and let me finish this paper.”

With Sherlock absorbed in the latest news, Watson snuck a peek at Sherlock’s phone and pulled up Lestrade’s email to look at the code.

Why did Sherlock decide not to investigate the case? How could he know that the criminal would never be able to steal the money just by looking at the code? Is there one problem with the code? Or more?

BULLET POINTS

§ Declare a function using the function keyword, followed by the name of the function.

§ Use parentheses to enclose any parameters a function has. Use empty parentheses if there are no parameters.

§ Enclose the body of the function in curly braces.

§ The statements in the body of a function are executed when you call a function.

§ Calling a function and invoking a function are the same thing.

§ You call a function by using its name and passing arguments to the function’s parameters (if any).

§ A function can optionally return a value using the return statement.

§ A function creates a local scope for parameters and any local variables the function uses.

§ Variables are either in the global scope (visible everywhere in your program) or in the local scope (visible only in the function where they are declared).

§ Declare local variables at the top of the body of your function.

§ If you forget to declare a local variable using var, that variable will be global, which could have unintended consequences in your program.

§ Functions are a good way to organize your code and create reusable chunks of code.

§ You can customize the code in a function by passing in arguments to parameters (and using different arguments to get different results).

§ Functions are also a good way to reduce or eliminate duplicate code.

§ You can use JavaScript’s many built-in functions, like alert, prompt, and Math.random, to do work in your programs.

§ Using built-in functions means using existing code you don’t have to write yourself.

§ It’s a good idea to organize your code so your functions are together, and your global variables are together, at the top of your JavaScript file.

JAVASCRIPT CROSS

In this chapter you got functional. Now use some brain functions to do this crossword.

SHARPEN YOUR PENCIL SOLUTION

Do a little analysis of the code below. How does it look? Choose as many of the options below as you like, or write in your own analysis. Here’s our solution.

var dogName = "rover";

var dogWeight = 23;

if (dogWeight > 20) {

console.log(dogName + " says WOOF WOOF");

} else {

console.log(dogName + " says woof woof");

}

dogName = "spot";

dogWeight = 13;

if (dogWeight > 20) {

console.log(dogName + " says WOOF WOOF");

} else {

console.log(dogName + " says woof woof");

}

dogName = "spike";

dogWeight = 53;

if (dogWeight > 20) {

console.log(dogName + " says WOOF WOOF");

} else {

console.log(dogName + " says woof woof");

}

dogName = "lady";

dogWeight = 17;

if (dogWeight > 20) {

console.log(dogName + " says WOOF WOOF");

} else {

console.log(dogName + " says woof woof");

}

NOTE

We chose all of them!

SHARPEN YOUR PENCIL SOLUTION

We’ve got some more calls to bark below. Next to each call, write what you think the output should be, or if you think the code will cause an error. Here’s our solution.

CODE MAGNETS SOLUTION

This working JavaScript code is all scrambled up on the fridge. Can you reconstruct the code snippets to make a working program that produces the output listed below? Notice, there may be some extra code on the fridge, so you may not use all the magnets. Here’s our solution.

JAVASCRIPT CONSOLE

Wear a jacket

Wear a t-shirt

Wear a sweater

EXERCISE SOLUTION

Below you’ll find some JavaScript code, including variables, function definitions and function calls. Your job is to identify all the variables, functions, arguments and parameters. Write the names of each in the appropriate boxes on the right. Here’s our solution.

EXERCISE SOLUTION

Below you’ll find some JavaScript code, including variables, function definitions and function calls. Your job is to identify the variables used in all the arguments, parameters, local variables and global variables. Write the variable names in the appropriate boxes on the right. Then circle any variables that are shadowed. Here’s our solution.

EXERCISE SOLUTION

The Thing-A-Ma-Jig

The Thing-A-Ma-Jig is quite a contraption—it clanks and clunks and even thunks, but what it really does, well, you’ve got us stumped. Coders claim they know how it works. Can you uncrack the code and find its quirks?

FIVE MINUTE MYSTERY SOLUTION

Why did Sherlock decide not to investigate the case? How could he know that the criminal would never be able to steal the money just by looking at the code? Is there one problem with the code? Or more? Here’s our solution.

WHO AM I? SOLUTION

A bunch of JavaScript attendees, in full costume, are playing a party game, “Who am I?” They give you a clue, and you try to guess who they are, based on what they say. Assume they always tell the truth about themselves. Fill in the blank next to each sentence with the name of one attendee. Here’s our solution.

Tonight’s attendees:

function, argument, return, scope, local variable, global variable, pass-by-value, parameter, function call, Math.random, built-in functions, code reuse.

I get passed into a function. argument

I send values back to the calling code. return

I’m the all important keyword. function

I’m what receives arguments. parameter

It really means ‘make a copy’. pass-by-value

I’m everywhere. global variable

Another phrase for invoking a function. function call

Example of a function attached to an object. Math.random

alert and prompt are examples. built-in functions

What functions are great for. code reuse

Where I can be seen. scope

I’m around when my function is. local variable

JAVASCRIPT CROSS SOLUTION