Explaining functions

As a beginner, when you get to the point of learning functions, it may seem a bit difficult at first.
Why? Well, so far, you have worked with concrete things, like assigning value to a variable: age = 20, name = “Joanna” etc.
Loops and conditional statements are also concrete, up to that point.

But functions require you to rise to a new level of abstraction. It’s not much, really, but the jump itself may seem unusual and frightening.

I have found an example which may help you! Spoiler, it involves cakes! so I hope it will appeal both to your brain and your stomach.


Remember you have to do two things with a function: first, you define it. That is, you design your tool. But a tool is useless as long as you don’t use it, right? So the second thing is that you have to call the function: you’re now using it.

  1. Defining a yummy function

ok , so I’m not using any programming language here, just some kind of pseudocode vaguely inspired by JavaScript.

We’ll define a function that makes…cakes! 😀

function makeACake()

This function is like a recipe. You’re the Chef and you’re designing a recipe.
Now, see those parentheses after the name of your function?
This is where you’ll place your ingredients.
For the moment, we will only place generic ingredients, and we will see the specifics later:

function makeACake(flour, sugar, egg, fat)

Alright! Our intention is set: make a cake, and we have listed the ingredients that will be needed. Remember that at this point we are only imagining how to make cakes, we are not actually making a cake.

Now we need to describe the process and the steps to make a cake.

function makeACake(flour, sugar, egg, fat){

(sorry for the indentation that isn’t being displayed…)
Inside the curly brackets, we will put things you have already seen  like defining variables, giving them values, make operations with it etc..

function makeACake(flour, sugar, egg, fat){
var dough = flour + sugar + egg + fat;

Ok, we’ve got the dough! now let’s play a little and add a method to it, to cook that cake. So let’s say your programming language has a built-in function called .bake()

You see that .bake() has parentheses like functions have, and we will use them.

function makeACake(flour, sugar, egg, fat){
var dough = flour + sugar + egg + fat;
var cake = dough.bake(350F, 30min);

YEAH! At this point, the recipe is almost ready. But you need to include one more thing: when you bake a cake, you have to take it out of the oven before you can eat it. That’s what return does. (I very often forget to return the result of my functions…and then wonder why it doesn’t seem to work! :D)

function makeACake(flour, sugar, egg, fat){
var dough = flour + sugar + egg + fat;
var cake = dough.bake(350F, 30min);
return cake;

OK! Your recipe is complete. But we have designed a function, we haven’t made actual cakes with that function, right?

Before we dive in to the next step, let me explain a few things. The things you’ve listed in the function parentheses are called parameters. Parameters = placeholders. They are abstract notions.

Now when you will make actual cake, you will replace those parameters with real things. When you call a function (when you make a real thing) the parameters become arguments. To remember which is which: Argument : Actual, Parameter: Placeholder.

Let’s get into the kitchen and have fun with that function!

    1. Calling that function to get yummy results

Let’s say you have a friend coming over for tea, and your friend is vegan and allergic to gluten. Using your function, you’ll make a cake they can enjoy. This is how you do it:
var veganCake = makeACake(riceFlour, whiteSugar, veganEggReplacement, oil);

Now let’s say you’re helping a friend organizing a HUUUUUUUGE party. You need a huge cake!
var hugeCake = makeACake(whiteFlour, whiteSugar, autruchEgg, butter);

What if you have a friend who only eat organic, unrefined sugar and ghee in place of fat? Piece of cake! (yeah you waited for that one, right?:D)
var organicCake = makeACake(wholemealFlour, brownSugar, commonEgg, ghee);

So you see, you can make an infinite variety of cakes, using only one definition. The definition is abstract and uses placeholders to design the process, but the cakes are real and are made of real things.

A note concerning the parentheses of our .bake() method: we called .bake with actual arguments, right? We didn’t need to define the method with parameters, because it is built in the language. That means it is already defined, and the .bake method has already parameters. all this has been defined by the (imaginary) authors of our pseudolanguage. You can guess those parameters are:
.bake(temperature, time)

If you’re a beginner, I hope this helps. Sometimes documents and course materials are very abstract themselves and it’s not easy to…crack the code. But you’ll get there! At first reading MDN documents was a nightmare but now I get it. Just keep trying and remember to reach out when you’re stuck.

Now excuse me, a cake is waiting for me.


Published by

Aurelie Bayre

Hello! My name is Aurelie Bayre and I am a webdeveloper living in France.

Leave a Reply

Your email address will not be published. Required fields are marked *