Declaring & calling functions

Functions are reusable recipes

A function is a block of JavaScript you can give a name, then run whenever you need it. Instead of copying the same five lines into ten places, you write the steps once and call the function ten times.

You already met small helpers in Thinking like a developer: names like addTip and splitBill turn a messy problem into little jobs. This lesson gives those jobs their JavaScript shape: function declarations, parameters, arguments, return, and the variables that live inside or around a function.

Keep that separation in mind. New learners often stare at a function body and expect it to run from top to bottom immediately. It does not. The body waits until a call presses the button.

A function declaration starts with the keyword function, then a name, parentheses, and a block:

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

The name should tell readers what the block does. The parentheses hold input names. The braces hold the steps that run later. The return line is optional, but without it the call value is undefined.

The next replay is recorded from real functions in this lesson. First, predict what line 7 prints. Then step through the call. Notice that JavaScript does not step into lines 1–4 until line 6 calls the function.

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

The important events are: line 6 calls makeGreeting, the parameter name receives the argument, line 2 creates a local message, line 3 returns it, and line 6 stores the returned value in greeting. Finally line 7 prints a value that was already returned.

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

The two words are easy to mix up because they point at the same flow of data from different sides.

Try the calls below. The function has exactly two parameter names, but the call can provide zero, one, two, or three arguments. The output pane shows the actual local values JavaScript gives to the parameters.

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"));

Missing arguments become undefined. Extra arguments are still passed to the call, but this function has no parameter name for the third one, so it does not use it. JavaScript has an older arguments object and modern rest parameters for collecting extras on purpose; those are the focus of the next lesson, Default & rest parameters.

return is the kitchen window. The function has been doing work on its own counter; return hands one finished value back to whoever called it. Once that happens, the current call stops.

Returning is not the same as printing. console.log is a useful way to inspect a value, but it does not make that value reusable by the caller. A calculation helper should usually return the number it calculated, then the caller decides whether to print it, store it, or combine it with something else.

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}

You saw undefined in earlier lessons when the console had no useful expression value to show. Functions use the same value when no explicit return happens.

Every function call gets its own little workspace. Parameters and variables declared inside the function are local to that call. Code outside cannot use those local names. A function can also read variables from the surrounding code; those are outer variables.

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);

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

That last snippet throws a ReferenceError at line 7. The local ribbon existed while wrapGift was running, but outside code never gets a variable with that name. Return the value if outside code needs it.

Functions do things, so their names usually start with verbs. The Coding style & naming lesson introduced this habit; functions make it especially valuable because a good name lets readers understand a call without opening the body.

Prefer one job per function. If you are tempted to name something calculateAndPrintAndSaveTotal, split it. One function can calculate; another can print; a later lesson on callbacks shows how to pass functions around when jobs need to be connected.

Boolean-returning functions often read well with prefixes like is, has, or can: isValidEmail, hasDiscount, canCheckout. That makes if (canCheckout(cart)) read like a sentence.

Where you’ll use functions

Functions are everywhere once a program grows beyond a few lines. You use them to isolate repeated work, to name a small idea, and to test a piece of logic without clicking through the whole app.

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));

Notice the data flow: values go in as arguments, each function returns one value, and the script stores the returned values for the next step. That pattern makes debugging easier. In the browser debugger you can step into a function to see its local variables, or step over it when the name already tells you enough.

Functions also appear as event handlers, validation helpers, formatters, and small calculations. Later in this module, Default & rest parameters, Function expressions & callbacks, Arrow functions, and Recursion add more ways to shape and use them.

When output surprises you, read the call site first. What 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 are useful companions here because stack traces and step controls both show function calls.

Read each snippet like a trace: declarations wait, calls fill parameters with arguments, return hands a value back, and local names stay inside their call.

Key takeaways

• A function declaration names a reusable block; a call runs it.
• Parameters are blanks in the declaration; arguments are values in a call.
• return creates the call value and stops the current call.
• Without an explicit return value, a function call gives undefined.
• Local variables live inside a call; outer variables live around it and can be read or changed.
• Good function names are clear verb phrases and usually describe one job.

Final definition: a function is a named, reusable set of steps that can receive arguments, work with local variables, and return one value to its caller.

Up next: Default & rest parameters.