Advanced Notebook

Advanced JavaScript Concepts

Beyond the basics lies a world of powerful APIs and runtime behaviors that define modern JavaScript development. Understanding the event loop, async patterns, and advanced object manipulation (like Proxies and Symbols) is what separates a junior from a senior developer.

Event Loop - Microtask vs Macrotask

JS runtime executes tasks in 2 main queues:

• Macrotasks → setTimeout, I/O, UI callbacks
• Microtasks → Promise .then, queueMicrotask, MutationObserver

Microtasks always run before next macrotask. Order understanding is critical for async debugging.

IN [ ]

console.log('start');

setTimeout(() => console.log('timeout'), 0);

Promise.resolve()
  .then(() => console.log('promise'));

console.log('end');

Promise Timeout + Race

Promise.race can implement timeouts easily.

IN [ ]

const timeout = (ms) =>
  new Promise((_, reject) =>
    setTimeout(() => reject(new Error('Timeout')), ms)
);

const fetchData = new Promise(res => setTimeout(() => res('Done'), 1000));

Promise.race([fetchData, timeout(500)])
  .then(console.log)
  .catch(console.error);

AbortController

Standard way to cancel async operations like fetch.

IN [ ]

const controller = new AbortController();
const signal = controller.signal;

fetch('https://jsonplaceholder.typicode.com/posts', { signal })
  .then(res => res.json())
  .then(console.log)
  .catch(err => console.log('aborted:', err.name));

setTimeout(() => controller.abort(), 100);

Async Iterators + for await...of

Consume async streams progressively.

IN [ ]

async function* count() {
  let i = 0;
  while (i < 3) {
    await new Promise(r => setTimeout(r, 500));
    yield i++;
  }
}

(async () => {
  for await (const n of count()) {
    console.log(n);
  }
})();

Generators

Generators allow pausable functions.

IN [ ]

function* flow() {
  yield 1;
  yield 2;
  return 3;
}

const it = flow();
console.log(it.next(), it.next(), it.next());

Streams API

Efficiently process large data incrementally.

IN [ ]

const stream = new ReadableStream({
  start(controller) {
    controller.enqueue('hello');
    controller.enqueue('world');
    controller.close();
  }
});

new Response(stream).text().then(console.log);

Web Workers

Run heavy computations off main thread.

IN [ ]

// worker.js
self.onmessage = e => {
  let sum = 0;
  for (let i=0;i<1e7;i++) sum+=i;
  self.postMessage(sum);
};

MessageChannel + Transferables

Fast structured cloning.

IN [ ]

const channel = new MessageChannel();
channel.port1.onmessage = e => console.log('received', e.data);
channel.port2.postMessage({ hello: 'world' });

WeakRef + FinalizationRegistry

Memory-sensitive references.

IN [ ]

let obj = {name:'test'};
const ref = new WeakRef(obj);

console.log(ref.deref());

obj = null;

Proxy + Reflect

Intercept operations on objects.

IN [ ]

const user = { name: 'Rahul' };

const proxy = new Proxy(user, {
  get(target, key) {
    console.log('get', key);
    return Reflect.get(target, key);
  }
});

console.log(proxy.name);

Symbols + Well Known Symbols

Symbols create unique property keys.

IN [ ]

const id = Symbol('id');
const obj = { [id]: 123 };
console.log(obj[id]);

Performance API

Measure performance.

IN [ ]

performance.mark('start');
for(let i=0;i<1e6;i++);
performance.mark('end');
performance.measure('loop','start','end');
console.log(performance.getEntriesByType('measure'));

Intl

Powerful formatting APIs.

IN [ ]

console.log(new Intl.NumberFormat('fr-FR').format(1000000));

Error Handling: Aggregate & Cause

Modern JS improves debugging.

IN [ ]

try {
  throw new Error('Root error',{cause:'DB connection failed'});
} catch(e){
  console.log(e.message);
  console.log(e.cause);
}