A Function Is a Named Recipe: The Picture

Amara's shop gives members 10 percent off, and her receipt program works that price out in five places. One day the owner raises the discount to 12 percent. Bob finds the formula, changes it four times, and misses the fifth. Every receipt is now right except the one printed for gift cards. This lesson writes the formula once, gives it a name, and runs it from all five places.

One job, written once

Here is the shape of Amara's problem, cut down to three places. The same formula appears in each line, with a different price in it.

console.log("Rice: " + (500 - Math.floor(500 / 10)));
console.log("Oil: " + (1200 - Math.floor(1200 / 10)));
console.log("Salt: " + (85 - Math.floor(85 / 10)));

Rice: 450
Oil: 1080
Salt: 77

Math.floor rounds down, so a member saves whole taka only. The program works. The trouble is that the rule "10 percent off" lives in three places, and a change must find all three.

A function is a named piece of code you write once and run whenever you need it. Here is the same program with the rule moved into a function called memberPrice.

function memberPrice(amount) {
  return amount - Math.floor(amount / 10);
}

console.log("Rice: " + memberPrice(500));
console.log("Oil: " + memberPrice(1200));
console.log("Salt: " + memberPrice(85));

Rice: 450
Oil: 1080
Salt: 77

The output is the same, line for line. The rule now lives in one place, so a new discount is a one-line change. So a function turns a formula you would copy into a name you can use.

Defining a function, and calling it

The function memberPrice(amount) { ... } part is the definition. It gives the code a name and stores it. It runs nothing: a program with only a definition prints nothing at all.

The memberPrice(500) part is the call. The parentheses after the name mean "run it now". Module 1 met calls already: console.log("hi") calls a function that Node wrote for you.

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

console.log(greet("Zara"));
console.log(greet);
console.log(typeof greet);

Hello, Zara
[Function: greet]
function

Line 5 calls greet and prints what it gives back. Line 6 has no parentheses, so nothing runs. Node prints the function itself as [Function: greet]. A function is a value, and typeof calls its type "function". So the name is the recipe, and the name with parentheses is the cooking.

function name(parameter1, parameter2) {
  body: the lines that run on every call
  return value;
}

name(argument1, argument2)     runs the body, and is replaced by the value returned

Parameters and arguments

A parameter is a name in the definition: amount in memberPrice(amount). An argument is the value in the call: the 500 in memberPrice(500). When the call starts, each parameter gets the argument in the same position.

function lineTotal(qty, price) {
  return qty * price;
}

console.log(lineTotal(3, 40));
console.log(lineTotal(40, 3));
console.log(lineTotal(2));
console.log(lineTotal(2, 5, 99));

120
120
NaN
10

Matching is by position only, not by name. Line 6 swapped the two values, and only the order of the multiplication changed. Line 7 gave one argument, so price is undefined, the "no value" of Module 1, and 2 * undefined is NaN.

Line 8 gave three. The extra 99 has no parameter to land in, so the function never sees it. JavaScript gives no error in either case. So count your arguments: too few become undefined, and too many are ignored.

return: one value back, and the call is over

return does two things at once. It hands one value back to the call, and it ends the call on the spot. A line after a return that ran never runs.

function shippingFee(total) {
  if (total >= 1000) {
    return 0;
  }
  return 60;
}

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

console.log(shippingFee(1500));
console.log(shippingFee(400));
const result = sayHi("Kenji");
console.log(result);

0
60
Hi, Kenji
undefined

For 1500, the first return runs, and the function stops before return 60. This is an early return: answer the special case first, and leave. It is the "small function with return" that Module 4 said can replace a labelled break.

sayHi prints a line, but it has no return. A call to a function with no return gives undefined, and so does a bare return; with no value. Printing and returning are different jobs. So a function that should give an answer must return it, not console.log it.

One rule from Module 1 now matters. A line break straight after return ends the statement there, so return alone on a line returns undefined. Keep the value on the same line as return. Common mistake 3 shows the bug.

Watching a call happen

When a call starts, the engine needs a place to keep that call's parameters and to remember where to come back to. It keeps them in a frame, and the frames of calls that have not finished stack up like plates: the call stack. A call puts a frame on top; a return takes it off.

This program prints one receipt line. printLine calls lineTotal in the middle of its own work.

function lineTotal(qty, price) {
  return qty * price;
}

function printLine(item, qty, price) {
  console.log(item + ": " + lineTotal(qty, price));
}

printLine("tea", 3, 40);
console.log("done");

tea: 120
done

Step through the calls. Watch each frame arrive with its own parameters, and leave with its return value.

The last frame in is the first one out. printLine cannot finish its line until lineTotal has returned. So a call waits for every call it makes, and the call stack is the list of calls still waiting.

A function's names belong to it

Each call gets fresh parameters, and a let or const made inside the body belongs to that call too. Outside the function, those names do not exist.

function average(a, b) {
  const sum = a + b;
  return sum / 2;
}

console.log(average(4, 10));
console.log(typeof sum);

7
undefined

sum lived inside the call, and it was gone when the call ended. typeof on a name that does not exist gives "undefined" instead of an error. So a function is a closed box: values come in through parameters, and one value leaves through return. Where a name can be seen is called its scope, and Module 6 teaches it.

Three spellings, and the two in your starter

JavaScript has three ways to write a function. All three make the same kind of value, and you call them the same way.

function halfA(n) {
  return n / 2;
}

const halfB = function (n) {
  return n / 2;
};

const halfC = (n) => n / 2;

console.log(halfA(9), halfB(9), halfC(9));

4.5 4.5 4.5

The first is a function declaration. The second is a function expression: a function made as a value and stored in a const. The third is an arrow function: the parameters, then =>, then the value to give back. With no braces, an arrow returns that value without the word return.

Now read the two lines of the starter that Module 1 asked you to use as given.

const tokens = ["7", "3"];
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());

console.log(nextInt() + nextInt());
console.log(at);

10
2

next is an arrow function with no parameters, so its parentheses are empty. Each call returns the token at position at, and at++ moves the position on by one. nextInt calls next and turns its token into a number. So the starter's helpers are two small functions, one calling the other.

The three spellings differ in two places that matter later: where in a file you may call them, and a word called this (Module 9). Lesson 02 takes every form apart, and lesson 04 says when to choose which.

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("Zara"));
console.log(greet("Kenji"));
const line = greet("Amara");
console.log(line.length);

Hello, Zara!
Hello, Kenji!
13

function deliveryFee(total, isMember) {
  if (isMember) {
    return 0;
  }
  if (total >= 1000) {
    return 0;
  }
  if (total >= 500) {
    return 30;
  }
  return 60;
}

console.log(deliveryFee(300, true));
console.log(deliveryFee(1200, false));
console.log(deliveryFee(700, false));
console.log(deliveryFee(150, false));

0
0
30
60

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

function lineTotal(qty, price) {
  return qty * price;
}

function memberPrice(amount) {
  return amount - Math.floor(amount / 10);
}

const n = nextInt();
let total = 0;
for (let i = 0; i < n; i++) {
  const item = next();
  const qty = nextInt();
  const price = nextInt();
  const cost = memberPrice(lineTotal(qty, price));
  out.push(`${item} x${qty}: ${cost}`);
  total += cost;
}
out.push(`total: ${total}`);

console.log(out.join("\n"));

rice x2: 900
oil x1: 1080
salt x3: 230
total: 2210

function today() {
  return "Monday";
}
console.log("Today is " + today);
console.log("Today is " + today());

Today is function today() {
  return "Monday";
}
Today is Monday

function addTax(price) {
  console.log(price + 15);
}
const total = addTax(100);
console.log(total * 2);

115
NaN

function welcome(name) {
  return
    "Welcome back, " + name;
}
console.log(welcome("Maria"));

undefined

function area(width, height) {
  return width * height;
}
console.log(area(5));

NaN

function check() {
  console.log("a");
  return;
  console.log("b");
}
console.log(check());

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

Next, lesson 02 takes every form apart one by one: the arrow in full, default values, rest parameters, and functions passed around as values.