JavaScript Functions Explained by Making a Recipe [Interactive Explanation]

If you have ever cooked using a recipe, then you can understand functions in JavaScript

Functions are one of the key pieces of any programming language. But, if JavaScript is your first language, it can still take a little bit of effort to get used to their syntax and the different possible inputs and outputs.

As you perhaps know already, the CodeAnalogies site is dedicated to teaching web development with analogies. But, there is one common analogy that every uses for functions: recipes from a cookbook!

So, I am going to build off that analogy and use a couple interactive diagrams to make each part as clear as possible.

In order to understand this tutorial, you will need to understand variables in JavaScript first. Check out my guide to variables here if you need to.

What is a function?

Let's think about the general concept of cooking with a recipe first. Using a recipe means that:

  1. You start with a specific set of ingredients
  2. You perform a specific procedure using those ingredients
  3. You will get a reliable product at the end

A function is also a reusable recipe that performs the same set of actions over and over again on a set of ingredients.

Those ingredients are called parameters . You can see them in the diagram below.

Some functions return a value. That means that they give you a new value that you can then use throughout your script. Other functions do not return a value. Instead, they might change a value that already exists in your script. Think of it like chopping onions. There is no "new" product, just the same product in a new format.

Check out the example below to see the general layout of a function. In this example, we are declaring a makeSandwich function. It does return a value- a full sandwich. In other words, we are documenting the recipe on how to make a sandwich.

Example 1- Boiling Water

Let's get into the first example. Let's say that you are trying to write a function for boiling water. In this example, we are going to start with some pasta, water and a pot. Since we are not really creating anything new, there will be no return value in this one. Here is what the function looks like.

So, in order for the sentence to make sense, the parameters water and pot must be numbers, while the parameter pasta must be a string.

Now we have a recipe for boiling water. Groundbreaking stuff, I know. But we have only declared the function. Now, we need to call it in order to get the water boiling. That has a different notation. It strictly uses the function name.

Here is a full example. We are going to boil spaghetti in 30 ounces of water in a 120 ounce pot. Hover or click on each part of the function to learn more about each part.

Since the last line is where we call the boilWater function, you want to start reading from there to learn what values will be fed into the function. The final result is:

"We are going to boil 30 ounces of water with spaghetti in a 120 ounce pot"

One quick note. Did you notice that we introduced a new term here? We introduced the argument . The argument is the value that is being used when we call the function.

This is the difference- the three parameters are non-negotiable. Water. Pasta. Pot. But the volume of water? The type of pasta? The size of the pot? You can change those. Those are the arguments.

Example 2- Making a Sandwich

Unlike the boilWater recipe, many functions have a return value. That means that they output a single value, array, object or other function. They don't just change the variables that already exist in your script.

We are going to create a makeSandiwch function that will take three parameters- a meat, a vegetable and bread. It will output a completed sandwich. Each one must be a string. Pretty straightforward. Here is that function.

We are going to do two things differently than the boilWater example when we execute this function. First, we need a new variable to store the final sandwich that we have after the return line. We will call that hamSandwich (there's a hint about the ingredients)

But, when we call the function, we are going to use variables as arguments . In boilWater, we directly inputted values when we called the function. We are going to use variables to better show the flexibility of the makeSandwich function. You can make a sandwich with any variation of these three ingredients. In this case, we are making a ham sandwich with ham, lettuce and wheat bread.

Hover or click on each part of the code to trace the values.

When you start reading the interactive diagram above, you should start by looking at the second to last line, where we call the makeSandwich function and store the result in hamSandwich.

After seeing the three arguments, you should check out the variables at the top to see the actual values we are using.

Finally, you should look at the function declaration to see how those three arguments are modified into the final product- sandwich. Here is another diagram.

Did you enjoy this

Check out the rest of the CodeAnalogies tutorials on HTML, CSS, JavaScript if you enjoy this teaching style.