JS: Intro to Functions

Learning Goals

• Be able to declare functions with and without parameters
• Understand how to call functions with and without arguments
• Make function expressions evaluate to something other than undefined using return
• Understand and use operators and conditionals

Pre-Work

Complete this lesson on Statements, Expressions, and Operators.

Vocab

• Function A predefined and reusable group of behavior
• Declare/Define The initial writing of a function
• Call/Invoke Running a function
• Parameters The variables declared between the parenthesis of a function declaration.
• Arguments The values passed to a function when the function is called/invoked which become the values of the declared parameters.

Functions

Functions are a way to group statements together to perform a specific task. Functions are reusable blocks of code! Neat!

To create a function, you must give it a name and then write the statements required for the function to achieve its task inside the function’s curly braces. Let’s work through the pieces and parts of a function.

Anatomy of a Function:

function displayFunctionSkeleton(/* parameters go here if needed */) {
  // statements go here
}

To declare a function, we use the JavaScript keyword function.

Then, you write the name of the function. Because functions perform an action, it’s best to name it with an action verb! For example: generateRandomNum, printGreeting, saveGroceryItem, etc. Notice that the names are camelCased!

After the name, notice the opening and closing parentheses (note: there is NO space between the name and the parentheses!). These parentheses can be empty, or they can contain parameters (more on those later).

The parentheses are followed by a space, and then by a pair of curly brackets! Your function code will go inside the curly brackets, in the order that you want the statements to run when the function is invoked (which we will get to in a little bit!).

Let’s take a look at the example function below in this Repl. Go ahead and fork the repl.

function makePizza() {
  var firstStatement = 'Pizza is AMAZING!';
  var pizza = "pepperoni";
  var secondStatement = "I love " + pizza + " pizza!";

  console.log(secondStatement);
  alert(firstStatement);
}

See if you can identify all the parts of the function. What is the function’s name? Does it look like it takes in any parameters (just take a guess on this one)? How many statements does it contain? What do you think the statements do?

Let’s find out by running/calling/invoking our function!

Invoke a Function:

makePizza();

When this code is read, makePizza() is “invoked,” all 5 statements within the function’s body (the space between those curly braces) get run, one line at a time, in order. What do you think will happen if we swap the 4th and 5th statements?

Passing Information to a Function:

Sometimes you need to give a function some information in order for it to do its job. You can give that function the information it needs by providing parameters in the function declaration. These are place holders that act like variables INSIDE the function, which means they serve as a means to pass values.

Parameters vs. Arguments

When you declare a function, and you stipulate the function will accept some bits of information, those are parameters. Then, when you pass in values for those parameters as you invoke the function, those are called arguments.

In your repl, copy/paste the example below:

// parameters are named in the declaration of a function
function bakeCake(flavor, frosting, decoration) {
  console.log(`I am baking a ${flavor} cake with ${frosting}. It will be decorated with ${decoration}.`);
}

// arguments are passed in when the function is called/invoked
bakeCake("carrot", "cream cheese icing", "walnuts");

1. What is logged?
2. What happens when you invoke the function again passing in different arguments? Try it a few times. Get weird!

A good way to think of parameters and arguments is this:

• Parameters are the placeholders declared in the function declaration (similar to declaring a variable).
• Arguments are the assigned values for each parameter/placeholder which are passed in each time the function is invoked.

Functions, part II

Getting A Value from A Function

Some functions need to return information to the code that called them. If we want to get a value back from our function when it’s invoked, we need to use the return keyword.

function addTwoNumbers(num1, num2) {
  return num1 + num2;
}

The Return Statement

// take note of what is returned or logged when each function is invoked!

function buildAHouse(material, cost) {
  console.log("I'm building a house!");
  return "My house is made of " + material + " and cost me $" + cost;
}

function buildAHouse(material, cost) {
  return "My house is made of " + material + " and cost me $" + cost;
  console.log("I'm building a house!");
}

// how many times can we "return" in a function?

Conditionals

Sometimes we want to perform an action based on some kind of condition. In English, we can say “If this thing is true, then do that.” In JavaScript, conditionals are written very similarly and allow us to take a certain path in our program.

To use conditionals, we first need to use expressions, operators, and statements.

Basic Conditional Structure

Let’s now look at the basic structure of a conditional:

if (expression) {
  statement;
} else {
  statement;
}

If the expression evaluates to true, then the statement(s) for that condition will run. Otherwise, if the expression is false, then the statement(s) will not run at all. The expression will usually contain an operator to make a comparison (that evaluates to true or false).

Some examples of expressions we could use for a conditional are:

• myNum < 5
• userCity === "Denver"
• isTired

Now for some real conditional examples. Copy paste these into a Repl and play around!

function evaluateSleep(hoursOfSleep) {  
  if (hoursOfSleep < 6) {
    console.log("I am groggy.");
  } else {
    console.log("I feel fantastic!");
  }
}

evaluateSleep(8);

Try invoking evaluatesSleep with an argument of 4. What happens? Why?

function findLocation(nextLocation) {  
  if (nextLocation === "home") {
    console.log("It's been a long day, let's go home!");
  } else if (nextLocation === "work") {
    console.log("Good morning, finding the fastest route to work!");
  } else {
    console.log("Finding location.  Found it!  Let's go!");
  }
}

findLocation("home");

Try invoking findLocation with an argument of “taco bell”. What happens? Why?

ES5 “Regular” functions vs ES6 Arrow Functions

So far we’ve only been working with plain ol’ ES5 functions. In Mod 1, we will focus only on ES5 functions. You might see ES6 arrow functions in your exploration and research but we prefer you stick to ES5 functions for now. You’ll dive into arrow functions in Mod 2 as you learn the nuances of their sometimes unexpected behavior.

Wrap Up

We’ve worked through a lot of content - some of which may be new, some is review. Let’s take a minute to reflect.

Additional Resources & Practice

• JS Style Guide
• JavaScript Playground let’s you experiment more with these concepts.