Declaring & calling functions

What a function is

A function is a group of steps with a name. You write the steps once. Then you can run them as many times as you like. Running a function is called calling it.

Without functions, you would copy the same five lines into ten places. With a function, you write those lines once and call the function ten times.

In the Thinking like a developer lesson, you split a problem into small jobs with names like addTip and splitBill. This lesson shows how to write those jobs in JavaScript. You will learn:

• How to write a function and how to call it.
• How to pass values into a function.
• How to get a value back out with return.
• Which variables a function can use.

function greet(user) {
  return "Hello, " + user;
}

console.log(greet("Asha"));

Lines 1–3 write a function called greet. JavaScript does not run its steps yet. Line 5 calls greet with the value "Asha". The function gives back the text Hello, Asha, and line 5 prints it.

Remember this: the steps inside a function do not run when JavaScript reads them. They wait. They run only when some code calls the function.

The usual way to write a function is a function declaration. It has four parts, in this order:

• The word function.
• A name, like nameHere.
• Round brackets (). They hold names for the values the function takes in. These names are called parameters. You'll meet them in the next section.
• Curly braces { }. They hold the steps. These steps are called the function's body.

1function nameHere(parameterHere) {2  // steps go here3  return valueHere;4}

The name should say what the function does. The return line is optional. You'll learn what it does in the "Returning values" section.

function sayHi() {
  console.log("Hi");
}

console.log("Ready");
sayHi();

Lines 1–3 make the function sayHi. They don't print anything yet. Line 5 prints Ready. Line 6 calls sayHi, so now its body runs and prints Hi. That's why Ready comes first.

The replay below runs real code, one step at a time. First, guess what line 7 prints. Then press Step. Watch where it starts: it skips lines 1–4 and starts at line 6, the call.

1function makeGreeting(name) {2  const message = "Hello, " + name + "!";3  return message;4}5 6const greeting = makeGreeting("Maya");Run7console.log(greeting);

Here is what happens, in order:

1. Line 6 calls makeGreeting with a name.
2. Inside the function, name gets that value.
3. Line 2 builds the greeting and keeps it in message.
4. Line 3 gives message back to line 6.
5. Line 6 keeps that value in greeting.
6. Line 7 prints greeting.

1console.log(sayHi());2 3function sayHi() {4  return "Hi before the declaration line";5}

Line 1 calls sayHi before line 3 writes it. It still works, and it prints Hi before the declaration line.

A function can take values in. Two words describe this, and they are easy to mix up:

• A parameter is a name in the round brackets of the declaration, like name in function greet(name). It is an empty spot that waits for a value.
• An argument is the value you put in the round brackets of a call, like "Maya" in greet("Maya"). It fills that spot for this one call.

The table below sums this up. Read each row as: "this word means this, and you see it here."

function welcome(user) {
  return "Welcome, " + user;
}

console.log(welcome("Asha"));
console.log(welcome());

Line 5 calls welcome with the argument "Asha". So the parameter user gets "Asha", and the line prints Welcome, Asha.

Line 6 calls welcome with nothing in the brackets. So user gets undefined, the value JavaScript uses for "nothing here". The line prints Welcome, undefined.

Now try it yourself. The function below has two parameters, item and quantity. Each button picks a call with a different number of arguments: zero, one, two, or three. The right side shows the value each parameter gets.

1function describeOrder(item, quantity) {2  return "item=" + item + ", quantity=" + quantity;3}4 5console.log(describeOrder());6console.log(describeOrder("tea"));7console.log(describeOrder("tea", 2));8console.log(describeOrder("tea", 2, "ignored"));

A parameter with no matching argument gets undefined. An extra argument is still passed to the function. But this function has no third parameter, so nothing uses the third value. The next lesson, Default & rest parameters, shows how to collect extra values on purpose. It also covers the older arguments object.

return gives one value back to the code that called the function. That value is called the return value. As soon as return runs, the function stops.

Returning a value is not the same as printing it:

• console.log shows a value on the screen. Your code can't use that shown value again.
• return hands the value back to the call. Your code can keep it in a variable, add to it, or print it.

So a function that works out a number should usually return it. The code that called the function can then decide what to do with it.

function double(number) {
  return number * 2;
}

const score = double(3);
console.log(score + 1);

Line 5 calls double(3). Inside the function, line 2 returns 6. Line 5 keeps that 6 in score. Line 6 adds 1 and prints 7. If the function had only printed 6, line 6 would have no number to add to.

The playground below has three small functions. Pick a button to see what each one gives back.

1let checks = 0;2 3function logTotal(price, tax) {4  const total = price + tax;5  console.log(total);6}7 8function returnTotal(price, tax) {9  const total = price + tax;10  return total;11}12 13function isAllowed(age) {14  checks = checks + 1;15  if (age < 18) return false;16  checks = checks + 1;17  return true;18}

The three cards below sum up what a call gives back.

You have seen undefined in earlier lessons. It means "no value here". A function that never reaches a return gives back undefined too.

A function can use two kinds of variables:

• A local variable is made inside the function. Its parameters are local too. Only code inside the function can use them. Each call gets a fresh set.
• An outer variable is made outside the function, in the code around it. The function can read it and change it.

function makeLabel() {
  const label = "Save";
  return label;
}

console.log(makeLabel());

Line 2 makes a local variable, label. Only code inside makeLabel can use it. Line 3 returns its value. So line 6 gets the text and prints Save.

This is a good pattern to copy: values go in through parameters, and one value comes out through return.

The next replay has both kinds of variables. It also shows shadowing: a local variable with the same name as an outer one. Inside its area, the local one hides the outer one.

Look at lines 6–10. They sit inside an extra pair of curly braces, called a block. Line 7 makes a new pantry that lives only inside that block. Line 5 runs before the block, so it still sees the outer pantry.

1let pantry = "sugar";Run2let scoops = 0;3 4function bake(label) {5  const localBowl = label + " uses " + pantry;6  {7    let pantry = "cocoa";8    scoops = scoops + 1;9    return localBowl + "; local pantry is " + pantry;10  }11}12 13const result = bake("cake");14console.log(result);15console.log(scoops);

The table below lists each kind of name in that replay. Read each row as: "this kind of name, for example this one, works like this."

The next code tries to use a local variable from outside its function. It fails on purpose.

1function wrapGift() {2  const ribbon = "blue";3  return ribbon;4}5 6wrapGift();7console.log(ribbon);

Line 2 makes the local ribbon inside wrapGift. Line 7 is outside the function, and there is no ribbon out there. So line 7 throws a ReferenceError, the error JavaScript gives when it can't find a name. If outside code needs the value, return it.

A function does something, so its name usually starts with a verb, a doing word like format, calculate, or get. You met this habit in the Coding style & naming lesson. It matters most for functions. With a good name, a reader knows what a call does without reading the function's body.

function formatPrice(price) {
  return "$" + price;
}

function isFree(price) {
  return price === 0;
}

console.log(formatPrice(3));
console.log(isFree(3));

formatPrice says it turns a price into text to show. isFree reads like a yes-or-no question: "is it free?" Line 9 prints $3. Line 10 prints false.

The table below compares good and vague names. Read each row as: "for this job, use this name, because of this, and not that vague name."

Give each function one job. Say you want to name a function calculateAndPrintAndSaveTotal. That name is a sign to split it into smaller functions: one to calculate, one to print, and one to save.

A function that returns true or false often starts with is, has, or can: isValidEmail, hasDiscount, canCheckout. Then if (canCheckout(cart)) reads almost like a sentence: "if you can check out the cart".

Where you’ll use functions

Real programs are full of functions. You use them to:

• Write a repeated job once.
• Give a small idea a clear name.
• Test one piece of code on its own.

1function calculateSubtotal(items) {2  return items.length * 10;3}4 5function addTip(total, rate) {6  return total + total * rate;7}8 9function formatReceipt(name, total) {10  return name + " owes $" + total;11}12 13const subtotal = calculateSubtotal(["tea", "cake"]);14const withTip = addTip(subtotal, 0.2);15console.log(formatReceipt("Maya", withTip));

Lines 1, 5, and 9 each start a small function with one job. Follow the values from line 13 down:

1. Line 13 passes two items to calculateSubtotal. Each item costs 10, so it returns 20.
2. Line 14 passes 20 and a 20% tip rate to addTip. It returns 24.
3. Line 15 passes "Maya" and 24 to formatReceipt, then prints Maya owes $24.

Each function takes values in and returns one value. Each result is kept in a variable for the next step. This makes bugs easier to find. In the browser's debugger, you can step into a function to see its local variables. Or you can step over it when its name already tells you enough.

The total and the receipt text are made by separate functions. So a form can use the total without making receipt text too.

You will also see functions that run when a user clicks a button, that check what a user typed, and that turn values into text. Later lessons in this module show more ways to write and use functions: Default & rest parameters, Function expressions & callbacks, Arrow functions, and Recursion.

When a function prints something you didn't expect, look at the call first. Ask three questions:

• Which arguments went in?
• Did the function return a value?
• Did it change an outer variable?

The Reading error messages and Debugging in the browser lessons help here too. Both error messages and the debugger show which functions were called.

For each code question, follow these steps:

1. Find each function declaration. Its steps wait.
2. Find each call. Put the arguments into the parameters.
3. Follow the return to see what the call gives back.
4. Remember that local variables stay inside their function.

Key takeaways

• A function declaration gives a set of steps a name. A call runs those steps.
• Parameters are the names in the declaration. Arguments are the values in a call.
• return gives one value back to the call and stops the function.
• A function with no return gives back undefined.
• Local variables live inside the function. Outer variables live around it, and the function can read and change them.
• A good function name starts with a verb and describes one job.

In one line: a function is a named set of steps. It can take values in, use its own local variables, and give one value back.

Up next: Default & rest parameters.