08 - Functions

JavaScript Functions

Creating Functions

Functions are primary building blocks of JavaScript. They allow us to write programs in a more efficient and scalable manner. Functions help us to manage complexity by containing and grouping operations under a single executable name. We already know how to call functions by using the p5.js predefined functions such as ellipse or background. We even created our own functions as p5.js forces us to put our code into two function declarations, setup and draw. If we wanted to create our own functions, we would be following the same convention that we have been using for the creation, or declaration, of these functions.

To create (or to declare) a new function, we would start off by using the function keyword and then give the function a name of our choosing that ideally describes the behaviour or purpose of the function.

	function functionName() {
		// function body
	}

Next, to the function name we would open brackets. If we want to build a function that works with user input, we can define parameters inside the brackets that would act as placeholder variable names for the future user input. We will see how this works in a bit.

Then we have curly braces. Inside curly braces can be referred to as the function body. In there, we would write the code that would construct the logic of the function. We can also make use of the parameters, the variable names we defined inside the brackets next to the function name, as part of the operations we want to perform inside the function body.

Let’s look at a simple example. Notice how p5.js has an ellipse function but not a circle function. This is not really an issue since we can easily create a circle by providing the ellipse function with same width and height values. For argument’s sake, though, let’s create a circle function that would work with three values: the x and y position that we want to draw our circle at and the diameter of the circle.

Here is how to do it. Inside the brackets, we will be writing down variable names that would eventually be provided when this function is called. These names are called parameters as they parameterize the functionality of the operation we are creating. We will be using these parameters inside our function to be able to let the user control the inner workings of the function.

	function circle(x, y, diameter) {
		ellipse(x, y, diameter, diameter);
	}

We can choose anything as parameter names, but it usually makes sense to use names that communicate the intent clearly. So in our case, using the names; x, y, and radius makes sense.

After defining this function, we can call it by using its name and providing it with values. Values provided to the function are called arguments to the function. Notice that the function might fail or not work as expected if all the required arguments are not provided.

	circle(width/2, height/2, 100);

Don’t worry too much if you feel like the terminology is confusing. It might take some time to get used to it. The parameters of a function can be thought as the values that the user would eventually provide when they are using the function. Those same values that are provided when calling the function are referred to as arguments.

With the circle function, we don’t need to worry about using the ellipse function to draw circles anymore. We can just use our own function to draw those perfectly round circles. Having implemented the circle function ourselves, we know that it actually uses the ellipse function under the hood to draw those circles. But the neat thing about functions is that we don’t really need to know how they work once they are available to us. We can just use them without thinking how they are implemented. ellipse function that is implemented by the smart people that created p5.js might be using all sorts of things inside to draw an ellipse, but as far as we are concerned it draws an ellipse when it is called, and that’s all that matters.

In this example, creating a circle function doesn’t buy us too much efficiency. As a matter of fact, we can just pass three arguments to the ellipse function instead of four to draw a circle instead. But functions become really important to use when we are building more complex programs as they help us to manage the complexity by containing and grouping operations under a single executable name. Functions are essentially blackboxes. They encapsulate the code that they contain and whatever variables that are declared using the var keyword inside the function are not visible from outside the function.

Get hands-on with 1200+ tech skills courses.