Making beautiful business applications

functions(), variables; memory and coffee

maxresdefaultWith my previous post I looked at brackets – all except the rounded ones (). I will in this post discuss variables, memory and functions so that we can understand how the things work together.


We all know that a PC has limited memory. There’s nothing as annoying as seeing this error that it ran into a problem, and it is now no longer working the way we think it should. Often times things go wrong because the computer thinks it knows how much you need, but actually it doesnt. The computer tries to guess this – sometimes not very accurately!

What does this mean in coffee though? Well, think of it like this – you have a small espresso cup. You have a coffee machine. The coffee machine knows how much it should take – or you hope so. Once you start pouring and you dont watch it, it overflows! This is in code is called a stack overflow exception, and is where the website stackoverflow gets its name from.

The computer tries to be clever though. It tries and allocate the glasses as best it can.


In steps variables. Variables are cups  – we tell the computer to leave some space in the memory for something that you would want to place there. The JavaScript syntax for this is simple:


var nameOfSpace;



Note that I am adding the javascript in script tags. This will tell HTML that the things inside is not HTML, but Javascript. The compiler will know how to interpret this. Back to the declaration – var tells Javascript that i am going to need some space in memory. The thing after the var will be the name that I am able to get that piece of memory in code. Remember, I need to remember what I want to allocate space to!

In reality, what is space/memory used for?

Yeah, I thought you would ask this question. This could be used for loads of things. Here are some examples:

  • PDFs, images, files like excel
  • data like your facebook posts, your browser history
  • the thing that you copied and trying to paste (control + C, control + V)

I have some allocated space in a variable. What do I do now?

Action! Well, you can perform some actions on it. Think of it like this: You have all your ingredients for the perfect cup of coffee. You now need to do now is MAKE it! In comes functions (also called methods). Under the hood you tell the PC – allocate some space for a method – I will use it later for something. You declare functions with the following syntax:


function NameOfFunction()




Wow! There’s a lot here. Let’s break it down:

  • The script tag (which is in the HTML will tell the compiler that it is Javascript)
  • The word function tells the compiler what this is
  • The NameOfFunction is something we know how to reference the thing
  • The () tells the compiler if there are any parameters (to be discussed below)
  • The {} brackets tells the compiler the beginning and the end of the function code that will be run (executed) when the function is called

Back to the round brackets.

What are these things called parameters? Think of them as more variables. When you make coffee, you need things to make coffee – the coffee machine needs coffee beans and water as a start. In code we call these things input parameters – I put the parameters into the function, and it would know what to make with it.


function NameOfFunction(coffeebeans, hotWater)
return coffeebeans + hotWater;


This makes a bit more sense – we pass in the things needed to make coffee.

Now that I have the function in memory, how do I call it? Simple! Here are some examples.


var thingToAnimate = "Animate Me!" ;





The rule of thumb is call your function ACTION WORDS. Often time we use things like make. 


In the real world – where do we use functions?

Where do we not use functions?? Here’s a few places we use functions on the “front end”:

  • Validation – did you put your name into the contact form? if not display an error
  • Animations – Make a “subscribe” popup display after x seconds of you landing on a website
  • hiding and showing content/text
  • clocks – make things count down every x seconds

Events also goes hand in hand with funtions more often than not. But that one can be handled in a different post altogether!

What have we learnt?

  • Whenever we write/declare code, computer memory is allocated to it.
  • we can declare variables and functions.
    • variables – var – are things to store data in short term memory.
    • function – function(){} – is a way of allocating memory – yet I am able to call (use/action it ) this code to make it do something like animate, makeCoffee, or validate that a person entered their credit card details.



Leave a Reply

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