From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript

Chapter 4.13: Functions

DRY, which stands for Don’t Repeat Yourself, is a coding philosophy that tries to avoid cut and paste coding. Code in two or more different places that does the same thing can be a source of bugs if you change one version but forget to change another. This is the basis for functions which are known as methods in Java, are named blocks of code that can be called by using the name of the function. This allows you to create a block of code that can be re-used without having to duplicate the code every time it is used.

Functions are defined by using the function keyword. You specify the name of the function, which is similar to a variable name but instead of referring to a variable it is the name of the function. Common practice is to name functions with a lowercase character. While this is not a requirement, it is highly recommended for reasons that will become clear in later chapters.

Say you were writing a program that would be printing lots of text to the console (or to a text field, something that will be covered later). We could simply have a console.log statement placed wherever we wanted to have the line separator, but what happens if we decide that we need to change what the separator looks like? We would have to search through all our code to find where we wrote a separator and replace it with our new version. Had we used a function to draw the separator, we could then simply change the separator by changing the function. A separator function would probably look something like this:

And to use the function we would do something like this:

You will notice this is like how the Math functions work, but without the library preface. This is because Math is an object that contains functions. Objects are essentially a combination of variables combined with the functions used to manipulate those variables. This, along with the topic of creating objects, will be covered in chapter 7.

The above function can be handy if the code just does one thing. Often, though, we want to have code deal with conditions or other stateful operations. While we could have the function use global variables to determine what it wants to do, this is obviously dangerous and would result in hard to understand code. To enable functions to handle variables without resorting to global variables we can give the function parameters. Parameters are values that the function can use. You can have a function use as many parameters as you need by separating them with commas. For example, lets say you wanted to automate the generation of ranges of numbers by writing a function to generate a random number within a range of integers. We can do this:

This lets us generate random numbers in a specified range, but has the downside that the results are sent to the console. What if we wanted to get the result and do something with it? Functions may also optionally return a value by using the return keyword. An example of a function would be:

It is also possible to assign a function to a variable, allowing you to pass a function to another function. In the earlier section you seen a function being created in-line to be assigned to a variable. To assign an already existing function to a variable you simply uses the function’s name without any parentheses and followed by a semicolon.

You can see that we can use the variable version of this function just like it were a function. This is because it is. We will cover more about this in future chapters but I am sure many readers will be asking why you would want to pass a function to a function. This is a very powerful technique for advanced programming. This lets you create functions that use one or more passed function to perform some of their actions, meaning that you can have several different functions, each of which does something slightly different and use the appropriate function when calling the original function. This is the procedural equivalent of the strategy pattern, but design patters are a topic beyond the scope of this book.

Let’s demonstrate this by creating a character for a roll-playing game. By having the method of rolling as a function that is passed into the generator, we can change how we generate the stats by simply specifying the rolling method you will be using. We can also demonstrate default parameters. The last parameters you call can have default values used. In our case, we want to be able to specify the character to use to end the line so that the demo html page can use the same generator as the console. HTML uses <br> to end lines instead of a “\n” line return character that would be treated as whitespace in HTML

You will notice that we can call using the variable we created or call the function using the function name without any parameters just like we did when creating the variable version of the function. And if we wanted to create a new function that rolls 4 dice and keeps the highest 3 we would do the following:

You can also go to the extreme and create the called function right inside the parameter list for the function instead of creating a function. This is useful if you are only ever going to use that function once. Here is my ultimate cheat version.

Of course, functions aren’t the only way of eliminating duplicate code, another very powerful feature of programming languages is the concept of a loop, which is what we will be looking at next.