Why functions

Problem

One change, three places

You are writing the till program for a small shop. Every receipt starts with the shop's name and phone number, so you have copied those two lines everywhere a receipt is printed.

The shop changes its phone number. You fix it in two places and miss the third:

console.log("Corner Shop");
console.log("tel. 02 123 4567");
console.log("Bread     €1.20");

console.log("Corner Shop");
console.log("tel. 02 123 4567");
console.log("Milk      €2.10");

console.log("Corner Shop");
console.log("tel. 02 765 4321");
console.log("Coffee    €3.50");

Output

Corner Shop
tel. 02 123 4567
Bread     €1.20
Corner Shop
tel. 02 123 4567
Milk      €2.10
Corner Shop
tel. 02 765 4321
Coffee    €3.50

The third customer gets a receipt with the old number. The more copies there are, the easier it is to miss one.

The idea

Write it once, call it by name

Put the repeated part in one place and give it a name. That is a function: a named block of code that does one job.

You write the function once. Then, wherever you need it, you write just its name with parentheses: printHeader();. This is called calling the function.

If the shop changes its phone number again, you fix one line in the function, and every receipt is right.

See it

What happens on a call

The program runs line by line. When it reaches a call, it goes into the function, runs its body and comes back to just after the call. Follow the ball: it is the point the program has reached.

function printHeader() {
  console.log("Corner Shop");
  console.log("tel. 02 123 4567");
}

printHeader();
console.log("Bread     €1.20");
printHeader();
console.log("Milk      €2.10");

Step by step, in words

1. function only stores the function. The first line that does something is printHeader().
2. A call: execution goes into the function.
3. The function prints the top of the receipt.
4. The function is done: execution goes back to just after the call.
5. The program carries on: it prints the bread.
6. A second call: the same code, without writing it again.
7. The top is printed again.
8. Back in the program, on to the next line.

The second time, you do not write the top part again. You call the same function, and it prints the same two lines.

The idea

How to write a function

Here is the whole program, so you can see where the function goes:

shop.js

function printHeader() {
  console.log("Corner Shop");
  console.log("tel. 02 123 4567");
}

printHeader();
console.log("Bread     €1.20");

Output

Corner Shop
tel. 02 123 4567
Bread     €1.20

function"here is a function"printHeadername()takes nothingthe body

• function says a function follows. It is only stored under a name, not run.
• The name says what the function does, so it is a verb: printHeader, printFooter. JavaScript names start with a lowercase letter, and every following word starts with a capital.
• The empty parentheses mean the function takes nothing from outside. We will fill them in the next lesson.
• The body is between { and }.
• Here the function is above the lines that call it, because that is easier to read.

More precisely, if you are curious

A function written with function can also be called from a line above it: before running the file, JavaScript collects all such functions. This does not hold for the forms you will see later (const printHeader = () => { … }), so it is a good habit to keep the function above the call.

Try it

In what order?

What will the program print?

function printThanks() {
  console.log("Thank you!");
}

console.log("Order #1024");
printThanks();
console.log("Order #1025");
printThanks();

Answer

Thank you!
Order #1024
Order #1025

Order #1024
Order #1025
Thank you!

Order #1024
Thank you!
Order #1025
Thank you!

Check

Try it

What is missing?

This function prints the bottom of the receipt. What goes in the blank?

 printFooter() {
  console.log("We hope to see you again soon.");
}

Check

Try it

Find the bug

The program runs, but prints only "Order #1024", without "Thank you!". Which line is the bug on?

Pick the line with the bug.

1function printThanks() {2 console.log("Thank you!");3}45console.log("Order #1024");6printThanks;

Check

Exercise

The receipt and the triangle

Solve these in your editor. Each one has sample output to compare yours with.

1. Receipt. Write three functions:

• printLine() prints a line of 20 dashes with a loop;
• printHeader() prints the shop's name, the phone number and the line;
• printFooter() prints the line and "Thank you!".

Below them, print two receipts: the top, one line with a purchase, the bottom.

Sample output

Corner Shop
tel. 02 123 4567
--------------------
Bread     €1.20
--------------------
Thank you!
Corner Shop
tel. 02 123 4567
--------------------
Milk      €2.10
--------------------
Thank you!

2. Triangle. Write a function printTriangle() that uses nested loops to print a triangle of stars, 4 rows high:

Sample output

   *
  ***
 *****
*******

In the next lesson the height becomes a parameter: one function for a triangle of any height you like.

Test

Check yourself

1. When does the code in the body of a function run?

Once, when the program startsWhen the function is calledWhen the program reaches the place where the function is written

2. What does function printThanks() { … } do?

It creates the function and runs it right awayIt stores the function under a name without running itIt runs the function once, when the program starts

3. A function is called in three places. How many times is its code written?

It depends on the functionOnceThree times

4. What does printThanks; without parentheses do?

The program does not startIt calls the functionNothing: it only mentions the name

Check

Start the lesson over