Defining Functions

Warm-up from memory

Make an array of two study records and total their minutes with a loop. Explain what would happen if two names pointed to the same record.

A function packages instructions under a name. Defining one does not run its body; calling it does. A parameter names an input inside the function. An argument is the value you pass when calling it.

return sends a result back to the caller and immediately ends that call. console.log only displays something; it does not substitute for return. A function with no return value produces undefined. Keep calculations separate from printing so the result can be reused in another calculation, a test, or later a webpage.

Start with a contract in ordinary language: “Given minutes per session and a session count, return total minutes.” Name parameters to match that sentence. Each call gets its own parameter values.

Read the definition function totalMinutes(minutes, count) { ... } in pieces: function starts the definition, totalMinutes is the name, the parentheses list two parameter names separated by a comma, and the braces enclose the instructions. Calling totalMinutes(20, 3) supplies arguments in that same order: minutes receives 20 and count receives 3.

A caller is the code making the call. A contract is the promise about what input a function accepts and what result it returns. Here the contract expects two numbers; it does not read input from a person automatically.

Predict before running

Why do the two calls produce different results even though the function body is the same? Replace the numbers with variables after checking.

function totalMinutes(minutes, count) {
  return minutes * count;
}

console.log(totalMinutes(20, 3));
console.log(totalMinutes(15, 2));

60
30

Return is not print

A function can display a message and still return undefined. That is why you should decide what a caller receives before writing the body. In the example, noisy prints its calculation, but the outer log receives no returned result. Useful returns the number, allowing the caller to decide what to do with it.

Return also exits immediately. Code after an unconditional return inside the same path does not run. Avoid a newline directly after return when you intend to return a value: JavaScript may insert a semicolon and return undefined instead.

function noisy(value) {
  console.log(value * 2);
}

function useful(value) {
  return value * 2;
}

console.log(noisy(4));
console.log(useful(4) + 1);

8
undefined
9

Parameters are local names, not magic inputs

Calling useful(4) binds value to 4 for that call. Calling it again with 10 creates another call with a different parameter value. A number argument does not become linked to the caller’s variable. Passing an object, however, passes its reference; changing a property can affect the caller. Yesterday’s reference model still applies.

Repair task: write a function that should return the larger of two numbers but logs it instead. Use it in another addition and observe the failure. Replace the log with return, then test the numbers in both orders and test equality. These cases make the contract more precise than one happy example.

Your turn

// Define remainingMinutes before calling it.

function remainingMinutes(goal, completed) {
  const remaining = goal - completed;

  if (remaining < 0) {
    return 0;
  }

  return remaining;
}

console.log(remainingMinutes(60, 25));
console.log(remainingMinutes(30, 45));

35
0

What you should be able to explain

• Trace the three printed lines without treating log as return.
• Can a function return a number without printing anything?
• What tests would you write for a larger-of-two function?