Functions

Learning Goals

• Explain the purpose of a function
• Define and invoke a function
• Use and explain the flow of data with arguments and parameters

Vocabulary

• function
• parameter
• argument
• call, invoke
• define, declare
• return value

Functions

Functions are structures in JavaScript that are fundamental to writing a program. A function can be thought of as a package of instructions for a program to follow.

Syntax for Defining a Function

To define (or declare) a function, the following syntax must be used:

• The function keyword declares a new function.
• The function name follows the function keyword and is determined by the person writing the code. It’s best if the name describes what the function does.
• A set of opening and closing parentheses ().
• A set of opening and closing curly brackets {}, which will create the code block.
• One or more lines of code inside the curly brackets - this is where the “instructions” live. These instructions describe what the function should do when it is called.

function displayFunctionSkeleton() {
  // statements 
  // go 
  // here
}

After defining a function, nothing will appear to happen. The interpreter that reads the JavaScript code will read it, and be aware of that set of instructions, but it won’t carry out those instructions until it is explicitly told to do so.

Syntax for Calling a Function

To instruct the interpreter to carry out the instructions in a function, the developer must write code to call (or invoke) that function. To call a function, the following syntax must be used:

• The function name
• A set of opening and closing parentheses ()
• To follow conventions and best practices, the line should end with a semi-colon ;

displayFunctionSkeleton();

Naming Conventions

Since functions provide action to a program, they should be named accordingly; it’s best practice to start them with a verb. Like variables, JavaScript functions should use camelCase when they involve more than one word and should be written carefully to describe their role specifically without being overly verbose.

Examples of function names that follow best practices:

• getUserInput
• displayFollowers
• addTwoNumbers
• findLongestName

An Analogy

One way to think about functions is as a recipe for a meal:

• Defining the function can be compared to writing a recipe, or taking a screenshot of a recipe on our phone. It has the ingredients and directions, but that alone won’t cook the meal.
• Calling the function can be compared to following the directions of the recipe to cook the actual meal. If you never choose to cook the recipe - no harm, but it was a waste of time to write it out. The meal could be cooked once, twice, or many times!

While the code snippet below illustrates a very contrived function, it is valid JavaScript:

function makeFreshPesto() {
  console.log("Buy ingredients: basil, parmesan, romano, olive oil, pine nuts, garlic, salt, pepper");
  console.log("Pulse basil and pine nuts");
  console.log("Add garlic and cheeses");
  console.log("Slowly pour in oil");
  console.log("Season");
}

makeFreshPesto();

Arguments and Parameters

Functions can be more powerful and dynamic when they have additional information about the situation each time they are called. We must follow a specific syntax to “pass information” into a function:

• In the function definition, parameter(s) must be declared. Parameters act like variables that can be accessed inside the function. As such, variable naming conventions should be followed when naming parameters.
• In the function call, argument(s) - the actual data - must be provided. Since this is actual data, it must be in the form of a valid JavaScript data type (String, Number, Boolean, etc.)
• The number of arguments passed in should match the number of parameters declared.

function printGreeting(name) {
  console.log(`Howdy, ${name}!`);
}

printGreeting("Kaitlyn");
// --> "Howdy, Kaitlyn!"

printGreeting("Brian");
// --> "Howdy, Brian!"

The following code snippet illustrates a function definition and call that involves 2 pieces of data, both Numbers.

function add(num1, num2) {
  var sum = num1 + num2;
  console.log(sum);
}

add(5, 2);
//  --> 7

Return Values

Sometimes, instead of simply printing a value to the console, we want our function to return a value. Let’s take another look at the add function we saw earlier.

function add(num1, num2) {
  var sum = num1 + num2;
  console.log(sum);
}

add(5, 2);
//  --> 7

Before, our add function wasn’t only adding the two Numbers together, it was also logging that sum to the console. This is cool, but what if I wanted to use that number in a different way? The example below shows how I might modify that function, so that it simply returns the sum. Notice, we are using the keyword return to specically tell JavaScript what value to return from the function. Then, I can do all kinds of different things with that function!

function add(num1, num2) {
  var sum = num1 + num2;
  return sum;
}

console.log(add(5, 2));
//  --> 7
console.log(`The sum of 5 and 2 is ${add(5, 2)}.`)
//  --> "The sum of 5 and 2 is 7."

Storing a Return Value

The examples we’ve looked at so far call the function and execute the code within the function, but the return values go nowhere/can never be used in the program again. Many times, we’ll store the return value of a function in another variable, as modeled below:

function add(num1, num2) {
  var sum = num1 + num2;
  return sum;
}

var morningCommuteMinutes = 18;
var afternoonCommuteMinutes = 30;
var totalCommuteMinutes = add(morningCommuteMinutes, afternoonCommuteMinutes);

console.log(`I spend a total of ${totalCommuteMinutes} minutes driving to work each day.`)
//  --> "I spend a total of 48 minutes driving to work each day."

Check For Understanding

Complete the work in the CFU repository and submit your work using the submission form.