Functions

Learning Goals

• Be familiar with the syntax to write and call a function
• Explain the flow of arguments/variables through a function

Technical Vocabulary

• Argument
• Call/Run
• Declare
• Function
• Parameter
• Return Value

Warm Up

With your partner, choose one application or website that you both like to use.

You will have one minute to click through the application as you normally would while using it.

• Partner A should be the “user” - clicking, scrolling, etc.
• Partner B should be tallying the number of times the application DOES something (examples: load content, respond to a click/tap by showing a different screen or new content, etc.)

To build a web application, developers write LOTS of functions. Every time you click a button and see something happened, a function (or many functions) just performed its job. Every time you see new data load (your account page, someone else’s profile page, detail of an image, etc.), a function just performed its job.

As we start learning about functions today, we won’t be writing ones quite as involved as some that are powering your favorite apps - but we will get the foundations!

What is a Function?

A function is an action in our code. It has a specific job, and it sits around waiting to be asked to do it. It can perform its job as many or as few times as we need. It can have a very small job (add two numbers together) or a very big job (find the standard deviation of 1 million numbers). We write them, so we have control over what each function does!

In our class example today, we will write instructions for a robot to walk a dog.

Declare a Function

Here’s what a very basic function declaration looks like:

function walkDog() {
  // code goes here
}

We start with the keyword function, then name our function whatever we want. The name should describe the type of action our function is taking. Like variables, we use camelCase.

Directly after the function name, we see open and close parentheses, then open and close curly brackets. The directions we want our function to take will live inside the curly braces. We can give a function as many directions as we’d like!

Let’s add some of the steps our robot needs to take to walk a dog. For now, we will use console.log() to print out the steps, so we know when our function is working.

function walkDog() {
  console.log("Put on leash");
  console.log("Put treats in pocket");
  console.log("Put poop bag in pocket");
}

Now, this code alone won’t do anything. We have declared the function - told it what its job is. But we haven’t called the function - or told it to carry out its task.

Call a Function

We have a nice function written, but we need to call it for the function to actually run. The great thing about functions is you can decide when they do their job. Maybe we only want a particular function to run when a user interacts with our site in a specific way. This puts us in complete control.

function walkDog() {
  console.log("Put on leash");
  console.log("Put treats in pocket");
  console.log("Put poop bag in pocket");
}

walkDog();

The last line of the code snippet is what calls the function. If we have this code in a CodePen and open up the console, we should see each step printed out.

Arguments and Parameters

If we are really going to have this robot help out, we need it to be a little ‘smarter.’ We need it to know that if there are two dogs, it needs to put two leashes on, bring two poops bags, etc.

We can make functions a little ‘smarter’ with something called arguments and parameters. Check out the code below, and then we’ll talk about what’s happening:

function walkDog(numberOfDogs) {
  console.log(`Put on ${numberOfDogs} leashes`);
  console.log(`Put ${numberOfDogs} treats in pocket`);
  console.log(`Put ${numberOfDogs} poop bags in pocket`);
}

walkDog(2);

//=>Put on 2 leashes
//=>Put 2 treats in pocket
//=>Put 2 poop bags in pocket

walkDog(7);

//=>Put on 7 leashes
//=>Put 7 treats in pocket
//=>Put 7 poop bags in pocket

To allow our functions to be more dynamic or work in more situations, we can write the declaration with parameters. The parameter(s) live inside the parenthesis right after the function name. If there are more than one, they should be separated by a comma and a space.

When we call the function, it will now be expecting an argument. The argument is the value(s) you want to store to the parameter variable(s).

In our example above, walkDog(2) was called with 2 passed in as an argument. So, the parameter numberOfDogs is now a variable that holds the value of 2. Anytime numberOfDogs is referenced inside of this function for this specific time it’s being run, 2 will be the value it uses.

Below, walkDog(7) was called. Anytime numberOfDogs is referenced inside of this function for this specific time it’s being run, 7 will be the value it uses.

Using Parameters Like Variables

We can also do some calculations with our parameters - just like we’ve done with variables. Let’s say we want to set an expectation that the robot walks each dog for 15 minutes. We can use the parameter to tailor the total number of minutes walked for each walk.

function timeToWalk(numberOfDogs) {
  var totalMinutes = numberOfDogs * 15;
  console.log(`You should walk a total of ${totalMinutes} minutes.`);
}

Return Values

Up until now, inside our functions, we’ve only called console.log on values - in the future, we will need our functions to return values so we can use them elsewhere. This may not completely make sense now, but in the next couple lessons, all the pieces will tie together. It’s good to get some exposure to it today.

function timeToWalk(numberOfDogs) {
  var totalMinutes = numberOfDogs * 15;
  return totalMinutes;
}

In this function, we are not calling console.log, so when we call it, we won’t see an output. But, we can store the output in another variable.

function timeToWalk(numberOfDogs) {
  var totalMinutes = numberOfDogs * 15;
  return totalMinutes;
}

var minutes = timeToWalk(3);
console.log(`You should walk a total of ${minutes} minutes.`);
//=> You should walk a total of 3 minutes.

A couple of things to know about return:

• Each function can only return one value
• If we don’t explicitly return a value with the return keyword, the default return value is undefined
• Once the program reads the return keyword and the rest of the code on that line, it will exit that function. So, no code written below the return keyword will ever be read.

Takeaways:

• function timeToWalk(numberOfDogs) { declares the function
• var totalMinutes = numberOfDogs * 15; declares a new variable that store the result of 15 multiplied by the number passed into the function
• return totalMinutes; returns the value of the totalMinutes variable
• var minutes = timeToWalk(3); calls the function timeToWalk and passes in 3 as the argument. The return value of that is stored in the new variable minutes

Incorporating Conditionals

If we were only walking 1 dog, the sentences would read incorrectly, for example, “put on 1 leashes”. Let’s write a conditional inside the function; if the numberOfDogs passed in is 1, we will print out one set of directions, and if it is greater than 1, we will print out another set.

function walkDog(numberOfDogs) {
  if (numberOfDogs === 1) {
    console.log(`Put on ${numberOfDogs} leash`);
    console.log(`Put ${numberOfDogs} treat in pocket`);
    console.log(`Put ${numberOfDogs} poop bag in pocket`);
  } else {    
    console.log(`Put on ${numberOfDogs} leashes`);
    console.log(`Put ${numberOfDogs} treats in pocket`);
    console.log(`Put ${numberOfDogs} poop bags in pocket`);
  }
}

Functions

Over the course of this camp, we will write a lot of functions! They will have different jobs, and some will look quite different from ours today, but you’ve got a great foundation. Get a little more practice by completing the task below.