Functions

When programming, we often need the computer to do a lot of the same thing over and over. In some cases, we need different parts of the program to run through the same scenario. In these cases, we want to use functions. A function is a subroutine or a block of code that can be called to run whenever you need it.

Declaring a Function

We use the keyword function to declare one. We then need the name of the function, possible parameters, and a code block {} that runs when the function is called.

Syntax:

function nameOfFunction([parameters])
{
- //code block
}
//Note: Do not use a semicolon here (except inside the code block).

JavaScript reads through your file twice. First, it looks for function declarations like these and loads them into memory. The second time, it runs your code and calls the functions as needed, since they're in memory. Because of this, you can have these function in any order in your code.

Example:

Think of it like getting dressed. You know how to put on a shirt and socks and shoes. But you don't need to know how to do that all throughout the day, only when it's time to change something, like putting on a jacket. You could have a function that controls how you put on your jacket. The rest of your day doesn't care how you do it, just that it gets done. Putting on your jacket would be a function.

function putOnJacket()
{
- //instructions for putting on the jacket go here
- alert("Ah, warm!");
}

Alternative Function Declaration

You can also assign an unnamed (anonymous) function to a variable like this. These will not be loaded into memory the first time JavaScript scans your file. Therefore, if you use this method, then the function must be declared before it gets called.

let say = function(sayWhat)
{
- alert(sayWhat);
}

The function can be as complex as you want it to be and you can have parameters in there or not.

Rule of thumb:

Keep your functions small if you can. Ideally, each function should serve a single purpose. Sometimes this might mean you only have one line of code inside a function. That may seem kind of silly, but it can help to make your code more readable and more flexible.

As an example, let's say you're making a game, like The Room Adventure. The player has ten tasks to complete. Each time a task is completed, the counter is reduced by one, and when it gets to zero, the player wins the game. You could check this with a single line of code.

function checkGameOver()
{
- return player.itemsLeftToFix === 0;
}

This makes a true/false comparison to see if there's nothing left to fix. If we had wanted to, we could have put this in the part of the game that calls the function instead of creating this seemingly needless extra function.

However, what if we change the endgame? What if we make more requirements before the player finishes the game? By having this function separated out, all we need to do is come here to change it. The rest of the game only needs to know if the game is over or not, not how it's checked. What if two different parts of the game need to see if you've won? Having this separated out makes it easier to adapt to these things.

Calling a function

In order to call (or run) the function, you must use parentheses. If you leave those out, you just get the function itself back. That has its uses too, but you probably won't use it often while you're starting out.

//calling a function so it runs and does its job
putOnJacket(); //a popup says: Ah, warm!
//without parentheses, you just get the function back
putOnJacket; //[Function: putOnJacket]

Auto-running Anonymous functions

This is used more in advanced coding, rather than when you're just learning. Remember, we need a set of parentheses to call a function? Well if you wrap a function in parentheses and add a set of "caller" parentheses after, you get an anonymous function that runs automatically. Let's say you want to alert a user as soon as they run your program, you could do this.

(function(sayWhat)
{
- alert(sayWhat);
}("Hello!")

This automatically pops up a box that says "Hello!" when you run your code.

Where do I put my functions?

Functions can basically go anywhere in your file.

When a JavaScript file is run, it gets looked at twice. The first time, it scans the file for all functions and sets them aside so they can be called later. Then it goes back a second time and starts actually running your code, which would include calling those functions.

It's like having a list of contacts in your phone. You know which number is which, so when you want to call someone, you can look them up by name and give them a call. But if you didn't have that list, you'd have no idea how to call your friends when you need to (assuming you didn't memorize their numbers).

In short, they can go pretty much anywhere. There's different advice on how to organize your code. Putting all functions at the bottom is a decent practice. Trying to keep them in a logical order can be tough.

As long as you don't accidentally shove one function inside another, you can put it at the top or bottom or middle of your file.

But can I put a function inside a function?

Yes, absolutely. And it's beneficial to do this at times too. Let's go back to our calculateArea() example. What if you wanted to make sure the numbers were positive numbers? You could create a helper function inside the calculateArea() function. The difference is, it could only be called from within the calculateArea() function. If you try to call it from outside, it'll give you an error because it's outside the function's scope.

function calculateArea(length, width)
{
- length = makePositive(length);
- width = makePositive(width);
- let area = length * width;
- function makePositive(number)
- {
  - return Math.abs(number); //sends absolute value
- }
- return area;
}
//let's call the main function with a negative in it
calculateArea(-10, 5); //50 (positive!)
//now let's try to call the inner function
makePositive(-10); //ReferenceError: makePositive is not defined

Because the function makePositive is inside the other function, you can only use it inside the other function, but you can't use it outside the function. This is an issue of scope.

Notice, I put return area; under the makePositive function, but it could have gone above it instead and it still would have worked just fine. That's because the function is interpreted first before the code starts running.