We often want to be able to re-execute blocks of code when we are writing programs, without having to re-write the block of code entirely. We need a way of grouping code together and giving it a name, so that we can call it by that name later, and that's what we call a function.
To create a function, we must first declare it and give it a name, the same way we'd create any variable, and then we follow it by a function definition:
We could put any code inside that function - one statement, multiple statements - depends on what we want to do. In this function, we could just output a message at a random location:
Now, if all we do is declare the function, nothing will happen. In order for the program to execute the code that's inside the function, we actually have to "call" the function, by writing its name followed by empty parentheses:
And then we could call it whenever we wanted, as many times as we wanted!
Function Parameters
We often want to be able to customize functions, to tell the program "well, do all of this code, but change a few things about how you do it." That way we have code that is both reusable and flexible, the best of both worlds. We can achieve that by specifying "arguments" for a function, using those arguments to change how the function works, and passing them in when we call the function.
For example, what if we wanted to be able to say exactly where we want the message displayed, just like we can say exactly where we want to draw rect()s and ellipse()s? We could imagine calling it like so, to put the message at two precise coordinates:
To make that work, we need to change our sayHello function definition so it knows that it will receive zero, one, two or more arguments, and then uses them inside:
We could also decided that we wanted to change our function to accept a name to say hello to:
And then we would have called it like so:
We could combine those ideas, and have it accept three arguments, for the name and positions
Function Return Values
There's another powerful thing we can do with functions - we can use them to take in some values, compute them, and return a new value. Think about all the things you can do with a calculator - add values, subtract, calculate square root, multiply, etc. All of those would be done with functions that took in the input and output the result. The functions would take in the input as arguments and output the result using a return statement. Here's a function that adds two numbers and returns the result:
The return statement does two things: it gives a value back to whoever called it (which is why we could store it in the sum variable), and it immediately exits the function. That means it'd be silly if we had something like this, because that last line would never get executed:
Functions with return values are quite useful for manipulating data in programs, and they can be combined together in expressions, too:
You can even call functions inside function calls, although that can get hard to read at times.
Local and Global Variables
Now that you know how to create functions that wrap around blocks of code, we have to bring up an important concept: local variables versus global variables.
When we declare a new variable inside a function, we say that it is local to that function. That's because only that function can see that variable - the rest of the program outside of it cannot. Once we're outside that function, it's like it no longer exists. In the following function, localResult is a local variable:
When we run that code, we'll get an error on the final line: "localResult is not defined." The variable is only defined inside the function, because that's where we declared it with the var localResult = line, and is not defined outside of it.
When we declare a variable outside our functions, we say that it is a global variable. That's because all functions can now access it and do whatever they want with it.
When we run the above code, we will not get an error, because we declared globalResult outside of the function, so we can access it wherever we want.
⚠️You might be tempted to use global variables for everything, since you'll never get an error that they're undefined. But actually, global variables are a common source of hard-to-find errors. In larger programs or collaborative programs, it’s easy to lose track of where and how you (or others!) used those global variables. When possible, use local variables.
Every programming language is different, but for JavaScript, it's important to know that variables have "function scope" - a function can see the local variables that were declared inside of it and the global variables that were declared outside of it, but it cannot see the local variables inside other functions.