Advanced JS

prototypes, proxies, the event loop. Read this after the rest stops feeling weird.

12 programs · open one, then the next

Start with Prototypes

01PrototypesAdvancedUnderstand JavaScript prototypesOpen example →jsfunction Person(name) { this.name = name; } Person.prototype.greet = function() { return 'Hello, ' + this.name; }; const person = new Person('John'); console.log(person.greet());
02InheritanceAdvancedImplement inheritance patternsOpen example →jsclass Animal { constructor(name) { this.name = name; } speak() { return this.name + ' makes a sound'; } }
03Closures AdvancedAdvancedAdvanced closure patternsOpen example →jsfunction createCounter() { let count = 0; return { increment: () => ++count,
04Currying AdvancedAdvancedAdvanced currying techniquesOpen example →jsconst curry = (fn) => { return function curried(...args) { if (args.length >= fn.length) return fn(...args); return (...nextArgs) => curried(...args, ...nextArgs);
05Memoization AdvancedAdvancedAdvanced memoization patternsOpen example →jsfunction memoize(fn) { const cache = new Map(); return function(...args) { const key = JSON.stringify(args);
06Generators AdvancedAdvancedAdvanced generator functionsOpen example →jsfunction* fibonacci() { let [a, b] = [0, 1]; while(true) { yield a;
07Iterators AdvancedAdvancedAdvanced iterator patternsOpen example →jsconst iterable = { [Symbol.iterator]() { let step = 0; return {
08ProxiesAdvancedUse JavaScript proxiesOpen example →jsconst target = {}; const handler = { get: (obj, prop) => prop in obj ? obj[prop] : 'Default' };
09Reflect APIAdvancedUse Reflect APIOpen example →jsconst obj = { name: 'John' }; Reflect.set(obj, 'age', 30); console.log(Reflect.get(obj, 'name'));
10Web Workers AdvancedAdvancedAdvanced Web Workers usageOpen example →jsconst worker = new Worker('worker.js'); worker.postMessage({ type: 'CALCULATE', data: [1, 2, 3] }); worker.onmessage = (e) => console.log('Result:', e.data);
11Event LoopAdvancedUnderstand the event loopOpen example →jsconsole.log('1'); setTimeout(() => console.log('2'), 0); Promise.resolve().then(() => console.log('3')); console.log('4');
12Microtasks and MacrotasksAdvancedUnderstand microtasks and macrotasksOpen example →jsconsole.log('1'); setTimeout(() => console.log('2'), 0); queueMicrotask(() => console.log('3')); Promise.resolve().then(() => console.log('4'));