Home / MAD2 / Week 2

Week 2 · Advanced JavaScript: closures, promises and async/await

The one-minute story

By the end of this week you can:

• explain closures and the scope chain, and predict this for method, arrow, call and bind;
• write classes with extends and super, and explain prototypes;
• use try/catch/finally, throw, ?. and ??;
• predict the printing order of code mixing setTimeout, promises and await;
• write fetch code with async/await, response.ok and a JSON POST.

Words you need

Idea 1: Scope chain and closures

When JavaScript meets a name, it looks in the current scope, then the one outside it, and so on to the global scope. This is the scope chain, and it is fixed by where the code is written (lexical scope), not where it is called.

A closure is what you get when an inner function remembers the variables of its outer function even after the outer function has finished.

function makeCounter() {
  let count = 0;                 // private: nobody outside can touch it
  return function () { count++; return count; };
}
const c1 = makeCounter(), c2 = makeCounter();
console.log(c1(), c1(), c1());   // 1 2 3
console.log(c2());               // 1    c2 has its own separate backpack
console.log(typeof count);       // undefined   (not visible outside)

makeCounter has finished, yet count lives on because the returned function still uses it. Each call to makeCounter creates a new count.

Closures also explain the loop puzzle from week 1:

const fs = [];
for (var i = 0; i < 3; i++) fs.push(() => i);     // all three share ONE i
console.log(fs.map(f => f()));                    // [ 3, 3, 3 ]
const gs = [];
for (let j = 0; j < 3; j++) gs.push(() => j);     // a new j per round
console.log(gs.map(g => g()));                    // [ 0, 1, 2 ]

function bank() { let bal = 100; return { add: n => (bal += n), get: () => bal }; }
const a = bank(); a.add(50); const b = bank();
console.log(a.get(), b.get());

Idea 2: this rules

this is decided at call time (except in arrow functions). Learn the five cases:

"use strict";
const user = {
  name: "Asha",
  hi() { return "Hi " + this.name; },
  later() { return [1].map(() => this.name); },        // arrow keeps this = user
};
console.log(user.hi(), user.later());                  // Hi Asha [ 'Asha' ]
const lost = user.hi;
try { lost(); } catch (e) { console.log("TypeError: lost this"); }
const bound = user.hi.bind({ name: "Ravi" });
console.log(bound(), user.hi.call({ name: "Meena" }));      // Hi Ravi Hi Meena
function add(a, b) { return this.base + a + b; }
console.log(add.call({ base: 100 }, 1, 2), add.apply({ base: 100 }, [1, 2]));  // 103 103

var first = 30;
const obj1 = { first: 50, second: () => { console.log("Value:", this.first); } };
const obj2 = { first: 80, second: function () { console.log("Value:", this.first); this.second(); } };
obj2.second.call(obj1);

Idea 3: Prototypes and classes

Every object has a hidden link (its prototype). If a property is not found on the object, JavaScript follows the link, and so on up the chain; if it reaches the end it gives undefined.

const Obj1 = { model: "AIR101", brand: "AIRBUS", type: "Passenger" };
const Obj2 = { __proto__: Obj1, wheels: "36", engines: 4 };
console.log(Obj2.model);               // AIR101      found on the prototype
console.log(Object.keys(Obj2).length); // 2           own keys only: wheels, engines
console.log(Obj1.engines);             // undefined   the link only goes UP, never down
console.log(Obj2.hasOwnProperty("model"), "model" in Obj2);   // false true

A class is tidy syntax for the same machinery:

class Animal {
  constructor(name) { this.name = name; }
  speak() { return `${this.name} makes a sound`; }
  static kind() { return "animal"; }
}
class Dog extends Animal {
  constructor(name, breed) { super(name); this.breed = breed; }   // super() FIRST
  speak() { return super.speak() + " (woof)"; }
}
const d = new Dog("Tommy", "lab");
console.log(d.speak());                      // Tommy makes a sound (woof)
console.log(d instanceof Dog, d instanceof Animal, Animal.kind());   // true true animal
console.log(Object.keys(d), typeof Animal);  // [ 'name', 'breed' ] function

• constructor runs on new; super(...) must be called before this in a child constructor.
• Methods live on the prototype, so Object.keys(d) shows only the data properties.
• static methods belong to the class, not to objects.

const a = { x: 1 }; const b = { __proto__: a, y: 2 }; const c = { __proto__: b, z: 3 };
console.log(c.x, c.y, c.w, Object.keys(c));

Idea 4: Modules, errors and safe access

ES modules split code into files. Each file has its own scope; you share with export and take with import.

// browser: math.js
export const PI = 3.14;
export function area(r) { return PI * r * r; }
export default function hello() { return "hi"; }

// app.js
import hello, { area, PI as pi } from "./math.js";   // default without braces, named with

In HTML: <script type="module" src="app.js"></script>. Modules are in strict mode, run after the page is parsed, and need the file path with extension (./router.js). Browsers refuse module files opened from file://, so use a small server (for example npx http-server).

Errors

function risky(n) {
  try {
    if (n < 0) throw new Error("negative");
    return "ok";
  } catch (e) {
    return "caught " + e.message;
  } finally {
    console.log("finally runs");      // runs on success, on error and even after return
  }
}
console.log(risky(1));                 // finally runs / ok
console.log(risky(-1));                // finally runs / caught negative
try { null.x; } catch { console.log("TypeError caught, no variable needed"); }
try { undefinedName; } catch (e) { console.log(e.name); }      // ReferenceError

throw can throw anything, but throw an Error. A try/catch only catches errors that happen while it runs: it cannot catch an error thrown later inside a setTimeout callback (use .catch or await for promises).

Optional chaining and nullish coalescing

const u = { profile: { city: "Pune" }, list: [] };
console.log(u.profile?.city, u.address?.city, u.address?.city ?? "unknown");  // Pune undefined unknown
console.log(u.list?.[0], u.run?.());                                          // undefined undefined

a?.b gives undefined instead of an error when a is null or undefined. x ?? y uses y only for null or undefined (not for 0 or "").

Idea 5: The event loop

Single thread, one call stack. Waiting work goes elsewhere (the browser timers, the network), and when ready its callback is queued:

1. Call stack: your running code. Always finishes completely first.
2. Microtask queue: promise callbacks (then, catch, finally, code after await) and queueMicrotask.
3. Task queue: timers (setTimeout), events, network callbacks.

console.log("1 start");
setTimeout(() => console.log("2 timeout"), 0);
Promise.resolve().then(() => console.log("3 promise"));
queueMicrotask(() => console.log("4 microtask"));
console.log("5 end");
// 1 start, 5 end, 3 promise, 4 microtask, 2 timeout

Synchronous lines 1 and 5 first; then microtasks in the order they were queued (3, 4); then the timer task (2). A setTimeout(fn, 0) also does not mean "now": it means "after the stack and microtasks are done".

async function f() { console.log("a"); await null; console.log("b"); }
f(); console.log("c");          // a c b

An async function runs synchronously until its first await; the rest is a microtask afterwards.

console.log("A");
setTimeout(() => console.log("B"), 0);
Promise.resolve().then(() => console.log("C"));
(async () => { console.log("D"); await 0; console.log("E"); })();
console.log("F");

Idea 6: Promises

A promise is in one of three states: pending, fulfilled (has a value) or rejected (has a reason). Once settled it never changes.

const p = new Promise((resolve, reject) => {     // first param RESOLVES, second REJECTS
  setTimeout(() => resolve("done"), 100);
});
p.then(v => { console.log(v); return v + "!"; })        // then returns a NEW promise
 .then(v => console.log(v))                              // gets "done!"
 .finally(() => console.log("cleanup"));                // runs either way; passes result along

Prints done, done!, cleanup.

Rules of a chain (these are tested again and again):

• Whatever a then returns becomes the next input. Return a promise and the chain waits for it.
• A throw (or a rejection) skips all following thens until a catch.
• A catch that returns normally recovers: the chain continues as fulfilled.
• finally always runs, but it need not be last, and a catch can be attached straight to a promise.

Promise.resolve(1)
  .then(v => { console.log("a", v); throw new Error("boom"); })
  .then(() => console.log("skipped"))
  .catch(e => { console.log("caught", e.message); return "recovered"; })
  .then(v => console.log("then", v));
// a 1, caught boom, then recovered

const p1 = new Promise(res => setTimeout(() => res("First"), 1000));
p1.then(r => { console.log(r); return new Promise(res => setTimeout(() => res("Second"), 3000)); })
  .then(r => { console.log(r); return new Promise(res => setTimeout(() => res("Third"), 3000)); })
  .then(r => console.log(r));

Combining promises

const wait = (ms, v, ok = true) => new Promise((res, rej) => setTimeout(() => (ok ? res(v) : rej(v)), ms));
Promise.all([wait(30, "a"), wait(10, "b")]).then(console.log);       // [ 'a', 'b' ] in input order
Promise.all([wait(30, "a"), wait(10, "x", false)]).catch(console.log); // x   (fails as soon as one fails)
Promise.race([wait(30, "slow"), wait(10, "fast")]).then(console.log); // fast  (first to settle)
Promise.allSettled([wait(5, 1), wait(5, 2, false)]).then(r => console.log(r.map(x => x.status)));
// [ 'fulfilled', 'rejected' ]

Idea 7: async/await

async before a function makes it always return a promise. await pauses that function (not the whole program) until a promise settles, then gives you its value or throws its error. Use try/catch for errors.

const wait = (ms, v) => new Promise(res => setTimeout(() => res(v), ms));
async function test() {
  const x1 = await wait(1000, 1);
  console.log(2);                   // (2, 1 second)
  const x2 = await wait(3000, 3);
  console.log(x1);                  // (1, 4 seconds)
  console.log(x2);                  // (3, 4 seconds)
}
test();
console.log(4);                     // (4, 0 seconds)

Output with times: (4, 0) (2, 1) (1, 4) (3, 4). The 4 comes first because test() hands back control at the first await; the two waits are sequential, so 1 + 3 = 4 seconds. To run waits in parallel, start both first: const [a, b] = await Promise.all([wait(1000, 1), wait(3000, 3)]) takes only 3 seconds.

async function demo() {
  try {
    console.log(await Promise.resolve("Start"));
    await new Promise((res, rej) => setTimeout(() => rej("Error"), 50));
    console.log("never");
  } catch (e) { console.log("Caught:", e); }
  return "End";
}
demo().then(r => console.log(r));        // Start, Caught: Error, End

async function t() { const a = await new Promise(r => r(2 && 4)); console.log(a); }
t();

Idea 8: The Fetch API, JSON and generators

fetch(url, options) returns a promise of a Response. response.json() returns another promise of the parsed body.

async function getJSON(url) {
  const res = await fetch(url);                    // rejects ONLY on network failure
  if (!res.ok) throw new Error("HTTP " + res.status);   // 404/500 still resolve; check ok (200-299)
  return res.json();                               // rejects if the body is not valid JSON
}
async function postJSON(url, obj, token) {
  const res = await fetch(url, {
    method: "POST",
    headers: { "Content-Type": "application/json", Authorization: "Bearer " + token },
    body: JSON.stringify(obj),                     // body must be text
  });
  if (!res.ok) throw new Error(res.statusText || "HTTP " + res.status);
  return res.json();
}

async function FetchFunct(url) {
  const response = await fetch(url).catch(() => { throw new Error("Network Error"); });
  if (response.ok) {
    return await response.json().catch(() => { throw new Error("Unexpected Error"); });
  } else throw new Error(response.statusText);
}
FetchFunct("dummyUrl").then(console.log).catch(err => console.log(err.message));

Generators and iterators (briefly). A function* can pause with yield. Calling it returns an iterator whose next() gives { value, done }. for...of and spread use this protocol.

function* count() { yield 1; yield 2; return 3; }
const it = count();
console.log(it.next(), it.next(), it.next(), it.next());
// { value: 1, done: false } { value: 2, done: false } { value: 3, done: true } { value: undefined, done: true }
console.log([...count()]);       // [ 1, 2 ]   spread ignores the return value

Exam radar

Quick quiz

Viva: say it out loud

Recap

Practise with real exam questions

These come straight from past papers (with the real figures and the official answer key). Open 60 real questions on this week   All Quiz 1 papers