Functions: Why, How, and Anatomy (in JS)

Jennifer Nordell
Dec 6, 2018 · 6 min read

First things first: why do we even need a function? Let’s suppose for a moment that you’ve completed much of your studies and you are now a developer. You’re really good. You’re so good, in fact, that you have a brilliant idea and begin making your new app. Suddenly, you’re getting investors and venture capital. Now you need a team. And eventually, you’re spending less time coding and more time schmoozing with people who can fund you and creative teams.

With all the telephone calls and business meetings you decide it’s time to get an assistant. Some days you have important lunches with team members and investors, but on any other day, you generally get lunch from a restaurant down the street. You decide that it’s time that your assistant do this for you.

Your brand new assistant arrives and the first day you tell them to go get you a bacon cheeseburger, onion rings, and a Coca-Cola at the restaurant down the street. You give your assistant the name of the restaurant, driving directions, explain to them how to charge the meal to the company and tell them to return with your food. Everything goes according to plan and you’re happily using the extra time answering your pile of emails while the assistant does the tedious stuff.

A couple of days later you have no business meetings scheduled and you ask your assistant to go get your lunch. At this point, you would expect the assistant to know which restaurant you mean, which food, the directions to the restaurant and how to charge it to your company. If the assistant couldn’t remember this basic information and you had to give it every single time you asked for lunch, then that assistant would likely be fired shortly.

Enter the function. We want our assistant to do the same series of tasks by saying one short command “Go get me lunch”. In code, this might look something like this:

function goGetMeLunch()

This is the definition of a function. It begins with the word “function”. The function is named “goGetMeLunch”. The parentheses will later hold what are known as “parameters” but we’ll get to those later.

This function definition specifies the series of events that should happen every time we tell it to run. It is a block of code that is in a state of waiting and will not execute until we “call” it. Programmers typically talk about “calling” a function. This means that we are executing the function.

So how do we call/execute/invoke a function? We simply say its name and include a pair of parentheses.

function “call” or “call site”

This is the console output:

first console.log()

So now we have a function set up for our assistant. Every time we say goGetMeLunch(); they will perform the set of tasks that ultimately bring your lunch back to you.

But at this point, you may notice a problem Every time you ask them to go get you lunch they perform all those tasks exactly as written. It also means that all you ever get back is a bacon cheeseburger, onion rings, and a Coca-Cola. At this point, the code for that may look a bit like this:

function with hard-coded variables

And this is the console output:

second console.log()

Currently, there is no code to change your order. Maybe you don’t want the same thing all the time. We also need a way to tell our assistant to change our food order to whatever we want at the time we call it.

Enter parameters and arguments. Parameters appear in the parentheses after the function name in the function definition. These will “catch” our arguments. Arguments are the information we’re sending into the function. Parameters are variables that will last as long as the function is executing. So where we have the variable declarations inside the function that are set to always be the same thing, we can move those into the definition as parameters.

Here I’ve moved the variables up into the parentheses by the function name. These are now parameters. Remember, nothing happens with this function until we call it. Currently, mainDish, side, and drink have no values. But we’re about to give them some and we do this at the moment we call/execute the function. Note that I’ve now changed the comment about ordering my usual lunch to reflect that they are going to order a main dish, a side, and a drink regardless of what those are that day.

function with hard-coded variables remade to flexible parameters
calls to the function with varying arguments

Here we have three separate days that we send our assistant to get lunch. Each time we’re ordering something different. The strings inside the parentheses are what we’re ordering and they are known as “arguments”. These are what we’re sending into the function for it to work with. Our parameters and our arguments will match up one to one.

illustration of how arguments match up to parameters

On Tuesday mainDish will be assigned “barbeque chicken”, side will be assigned “corn on the cob”, and “ice tea” willl be assigned to drink. On Wednesday, mainDish will be assigned “caesar salad”, side will be assigned “baked potato”, and drink will be assigned “lemonade”. This same pattern happens for Thursday. The parameters accept the arguments coming into the function and work as a variable declaration.

And here is the console output. As you see, because the function was run three times, there will be three logs to the console.

the d set of console.log()

We always want our assistant to drive to the restaurant, order our food, wait for the food, pick up the order, and come back to us with it. It would be ridiculous and redundant to have to specify those things every time. But we still need it flexible enough that we can change part of that information to suit our needs at the time we require it.

A function is a way to repeat a certain sequence of events every time we ask it to run. Some of the information may change and some may not. It can also be used to give us back some result if we’re doing a calculation or an evaluation of some data. But I hope this helps explain a bit both about why we use them and how we use them.

19