Functions all 4 written

example.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17// A function declaration.
function area(width, height) {
  return width * height;
}

// A function expression, stored in a const.
const perimeter = function (width, height) {
  return 2 * (width + height);
};

// An arrow function. With one expression, the braces and "return" can go.
const diagonal = (width, height) => Math.hypot(width, height);

console.log(area(3, 4), perimeter(3, 4), diagonal(3, 4));

check("all three are just functions", [area, perimeter, diagonal].every((f) => typeof f === "function"), true);
check("3-4-5", diagonal(3, 4), 5);

example.mjs

1
2
3
4
5
6
7
8
9
10function greet(first, last) {
  return `Hello, ${first} ${last}`;
}

console.log(greet("Ada", "Lovelace"));
console.log(greet("Ada"));                         // last is undefined
console.log(greet("Ada", "Lovelace", "Byron"));    // "Byron" is silently dropped

check("a missing argument is undefined, not an error", greet("Ada"), "Hello, Ada undefined");
check("the function says how many it expects", greet.length, 2);

example.mjs

1
2
3
4
5
6
7
8
9
10
11
12function makeTag(label, colour = "grey", size = label.length > 8 ? "wide" : "normal") {
  return { label, colour, size };
}

console.log(makeTag("draft"));
console.log(makeTag("needs review"));
console.log(makeTag("urgent", "red"));
console.log(makeTag("urgent", undefined, "wide"));   // undefined means "use the default"

check("a default can use an earlier parameter", makeTag("needs review").size, "wide");
check("passing undefined triggers the default", makeTag("x", undefined).colour, "grey");
check("passing null does not", makeTag("x", null).colour, null);

example.mjs

1
2
3
4
5
6
7
8
9
10
11
12function addItem(item, list = []) {
  list.push(item);
  return list;
}

const first = addItem("a");
const second = addItem("b");

console.log(first, second);

check("each call gets its own fresh array", first === second, false);
check("so the second call did not see the first item", second, ["b"]);

example.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16function total(...amounts) {           // everything passed, collected into an array
  return amounts.reduce((sum, n) => sum + n, 0);
}

function log(level, ...parts) {        // the first named, the rest collected
  return `[${level}] ${parts.join(" ")}`;
}

console.log(total(), total(5), total(1, 2, 3, 4));
console.log(log("info", "server", "started", "on", 8080));

const prices = [4, 12, 7];
console.log(total(...prices));        // spread: an array, passed as separate arguments

check("rest collects into a real array", total(1, 2, 3, 4), 10);
check("spread is the reverse of rest", total(...prices), 23);

example.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20function noReturn() {
  const x = 1 + 1;
}

function earlyReturn(n) {
  if (n < 0) return "negative";
  return "fine";
}

function twoThings() {
  return { min: 1, max: 9 };        // return an object to hand back several values
}

console.log(noReturn(), earlyReturn(-5), twoThings());

const { min, max } = twoThings();    // and take them apart again (lesson 16)

check("no return statement means undefined", noReturn(), undefined);
check("return exits the function immediately", earlyReturn(-5), "negative");
check("several values, via an object", [min, max], [1, 9]);

example.mjs

1
2
3
4
5
6
7
8
9
10function config() {
  return
  {
    port: 8080
  };
}

console.log(config());

check("this returns undefined, not the object", config(), undefined);

example.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15const operations = {
  add: (a, b) => a + b,
  multiply: (a, b) => a * b,
};

function apply(name, a, b) {
  const op = operations[name];
  return op(a, b);
}

console.log(apply("add", 3, 4), apply("multiply", 3, 4));
console.log(operations.add.name, "<- an arrow stored in a property still has a name");

check("functions can live in an object", apply("multiply", 3, 4), 12);
check("and know their own name", operations.add.name, "add");

example.mjs

1
2
3
4
5
6
7
8
9
10
11const outside = "visible everywhere in this file";

if (true) {
  const inside = "visible only inside these braces";
  console.log(outside);
  console.log(inside);
}

console.log(typeof inside, "<- gone once the block ends");

check("a const inside a block does not leak out", typeof inside, "undefined");

example.mjs

1
2
3
4
5
6
7
8
9
10
11const level = "outer";

function show() {
  const level = "inner";           // a new name that hides the outer one
  return level;
}

console.log(show(), level);

check("the inner name shadows the outer", show(), "inner");
check("without changing it", level, "outer");

example.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16function makeCounter() {
  let count = 0;                      // lives in makeCounter's scope
  return function next() {
    count += 1;                        // ...and this function can still reach it
    return count;
  };
}

const a = makeCounter();
const b = makeCounter();

console.log(a(), a(), a());
console.log(b());

check("a kept its own count between calls", a(), 4);
check("b has a separate count", b(), 2);

example.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29function createAccount(opening) {
  let balance = opening;
  return {
    deposit(amount) {
      if (amount <= 0) throw new Error("deposit must be positive");
      balance += amount;
      return balance;
    },
    get balance() {
      return balance;
    },
  };
}

const account = createAccount(100);
account.deposit(50);

let refused;
try {
  account.balance = 1_000_000;         // there is no way in from outside
} catch (err) {
  refused = err.name;
}

console.log("balance:", account.balance);
console.log("setting it directly:", refused);

check("only deposit can change the balance", account.balance, 150);
check("a getter with no setter refuses writes", refused, "TypeError");

example.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16const withVar = [];
const withLet = [];

for (var i = 0; i < 3; i++) {
  setTimeout(() => withVar.push(i), 0);
}
for (let j = 0; j < 3; j++) {
  setTimeout(() => withLet.push(j), 0);
}

setTimeout(() => {
  console.log("var:", withVar);
  console.log("let:", withLet);
  check("all three var callbacks saw the final value", withVar, [3, 3, 3]);
  check("each let callback saw its own", withLet, [0, 1, 2]);
}, 10);

example.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13const fromAbove = double(4);         // a function declaration works above its line
const earlyValue = early;            // a var exists already, but holds undefined

function double(n) {
  return n * 2;
}
var early = "assigned now";

console.log(fromAbove, earlyValue, early);

check("function declarations are hoisted whole", fromAbove, 8);
check("var is hoisted without its value", earlyValue, undefined);
check("which arrives when its line runs", early, "assigned now");

example.mjs

1
2
3
4
5
6
7
8const settings = { debug: true };
var legacy = "also module-scoped here";

console.log(globalThis.settings, globalThis.legacy);
console.log(typeof globalThis.console, "<- real globals are still there");

check("a top-level const is not a global", globalThis.settings, undefined);
check("in a module, not even var is", globalThis.legacy, undefined);

example.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14const user = {
  name: "Ada",
  greet() {
    return `Hi, I am ${this.name}`;
  },
};

const other = { name: "Alan", greet: user.greet };   // the same function, borrowed

console.log(user.greet());
console.log(other.greet());

check("this is the object the method was called on", user.greet(), "Hi, I am Ada");
check("so the same function answers differently", other.greet(), "Hi, I am Alan");

example.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19const counter = {
  count: 0,
  increment() {
    this.count++;
  },
};

let failure;
try {
  [1, 2, 3].forEach(counter.increment);   // passes the function, not the object
} catch (err) {
  failure = err.name;
}

console.log("count:", counter.count);
console.log("error:", failure);

check("the method never touched counter", counter.count, 0);
check("it threw, reading count from an undefined this", failure, "TypeError");

example.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14const counter = {
  count: 0,
  increment() {
    this.count++;
  },
};

[1, 2].forEach(() => counter.increment());        // 1. call it on the object yourself
[1, 2].forEach(counter.increment.bind(counter));  // 2. bind: fix this permanently
[1, 2].forEach(counter.increment, counter);       // 3. some methods take a thisArg

console.log(counter.count);

check("all three kept this", counter.count, 6);

example.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18const team = {
  name: "Platform",
  members: ["Ada", "Alan"],

  // A regular method, with an arrow inside it: the arrow borrows the method's this.
  roster() {
    return this.members.map((m) => `${m} (${this.name})`);
  },

  // An arrow AS the method: its this is the module's top level, which is undefined.
  broken: () => typeof this,
};

console.log(team.roster());
console.log(team.broken());

check("the inner arrow saw the method's this", team.roster()[0], "Ada (Platform)");
check("an arrow used as a method has no object to see", team.broken(), "undefined");

example.mjs

1
2
3
4
5
6
7
8
9
10function describe(greeting, punctuation) {
  return `${greeting}, ${this.name}${punctuation}`;
}

const ada = { name: "Ada" };

console.log(describe.call(ada, "Hello", "!"));      // this, then the arguments
console.log(describe.apply(ada, ["Hello", "?"]));   // this, then an array of them

check("call sets this for one call", describe.call(ada, "Hi", "."), "Hi, Ada.");

example.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15const job = {
  name: "nightly report",
  start() {
    setTimeout(function () {
      console.log("regular function sees:", this.constructor.name);
      console.log("regular function name:", this.name);
    }, 0);
    setTimeout(() => {
      console.log("arrow function sees:  ", this.name);
      check("the arrow kept the job", this.name, "nightly report");
    }, 5);
  },
};

job.start();

example.cjs

1
2
3
4console.log("top-level this in CommonJS:", this);
console.log("is it module.exports?", this === module.exports);

check("in a .cjs file, top-level this is module.exports", this === module.exports, true);

example.mjs

1
2
3console.log("top-level this in an ES module:", this);

check("in a .mjs file, top-level this is undefined", this, undefined);

example.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19const orders = [
  { id: 1, total: 40, paid: true },
  { id: 2, total: 15, paid: false },
  { id: 3, total: 90, paid: true },
];

const totals = orders.map((o) => o.total);            // transform each one
const unpaid = orders.filter((o) => !o.paid);         // keep the ones that pass
const big = orders.find((o) => o.total > 50);         // the first that passes
const where = orders.findIndex((o) => o.id === 2);

console.log(totals);
console.log(unpaid);
console.log(big, where);

check("map returns one result per item", totals, [40, 15, 90]);
check("filter keeps only the matches", unpaid.map((o) => o.id), [2]);
check("find returns the item itself", big.id, 3);
check("find gives undefined when nothing matches", orders.find((o) => o.total > 1000), undefined);

example.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17const scores = [72, 88, 45, 91];

console.log(scores.some((s) => s < 50), scores.every((s) => s >= 40));

const sum = scores.reduce((running, s) => running + s, 0);
const highest = scores.reduce((best, s) => (s > best ? s : best), -Infinity);
const byBand = scores.reduce((bands, s) => {
  const band = s >= 70 ? "distinction" : "pass";
  bands[band] = (bands[band] ?? 0) + 1;
  return bands;
}, {});

console.log(sum, highest, byBand);

check("some: is anything below 50?", scores.some((s) => s < 50), true);
check("reduce folds a list into one value", sum, 296);
check("the accumulator can be an object", byBand, { distinction: 3, pass: 1 });

example.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16const people = [
  { name: "Ada", team: "core", hours: 32 },
  { name: "Alan", team: "web", hours: 40 },
  { name: "Grace", team: "core", hours: 45 },
];

const coreHours = people
  .filter((p) => p.team === "core")
  .map((p) => p.hours)
  .reduce((a, b) => a + b, 0);

const names = people.map((p) => p.name).join(", ");

console.log(coreHours, names);

check("filter, then map, then reduce", coreHours, 77);

example.mjs

1
2
3
4
5
6
7
8
9
10const tickets = [
  { id: 1, status: "open" },
  { id: 2, status: "closed" },
  { id: 3, status: "open" },
];

const byStatus = Object.groupBy(tickets, (t) => t.status);
console.log(byStatus);

check("groupBy builds the buckets for you", byStatus.open.map((t) => t.id), [1, 3]);

example.mjs

1
2
3
4
5
6
7
8const n = [10, 9, 1, 100];

console.log([...n].sort());                      // !!
console.log([...n].sort((a, b) => a - b));       // numbers, ascending
console.log([...n].sort((a, b) => b - a));       // descending

check("the default sort compares as text", [...n].sort(), [1, 10, 100, 9]);
check("a comparator sorts numbers properly", [...n].sort((a, b) => a - b), [1, 9, 10, 100]);

example.mjs

1
2
3
4
5
6
7
8
9
10const original = [3, 1, 2];

const copy = original.toSorted((a, b) => a - b);
console.log(original, copy);

original.sort((a, b) => a - b);
console.log(original);

check("toSorted leaves the original alone", copy, [1, 2, 3]);
check("sort rearranged it in place", original, [1, 2, 3]);

example.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26const multiplier = (factor) => (n) => n * factor;

const double = multiplier(2);
const triple = multiplier(3);

console.log([1, 2, 3].map(double), [1, 2, 3].map(triple));

// Run something at most once, however often it is called.
function once(fn) {
  let done = false;
  let result;
  return (...args) => {
    if (!done) {
      done = true;
      result = fn(...args);
    }
    return result;
  };
}

let connections = 0;
const connect = once(() => ++connections);
connect(); connect(); connect();

check("each multiplier remembers its own factor", triple(5), 15);
check("once() let the function run only once", connections, 1);