JavaScript Interview Questions & Answers - Senior Level (15+ Years

Experience)

Core JavaScript & Language Internals

1. Event Loop & Asynchronous Programming

Q: Explain the JavaScript event loop in detail, including the call stack, task queue, and microtask queue.

A: The JavaScript event loop is a mechanism that handles asynchronous operations in a single-threaded
environment. It consists of:

Call Stack: Executes synchronous code in LIFO order

Task Queue (Macrotask Queue): Contains callbacks from setTimeout, setInterval, I/O operations

Microtask Queue: Contains Promise callbacks, queueMicrotask, MutationObserver callbacks

Execution Order:

1. Execute all synchronous code on the call stack

2. Process ALL microtasks until the queue is empty

3. Execute ONE macrotask

4. Process ALL microtasks again

5. Render (if needed)

6. Repeat from step 3

javascript

[Link]('1');

setTimeout(() => [Link]('2'), 0);

[Link]().then(() => [Link]('3'));

[Link]('4');
// Output: 1, 4, 3, 2
// Microtasks (Promise) execute before macrotasks (setTimeout)

Q: What are the differences between async/await, Promises, and callbacks?

A:

Callbacks:
 Oldest pattern, leads to "callback hell"

No built-in error handling

Difficult to compose and manage

Promises:

Better error handling with .catch()

Chainable with .then()

Can use [Link]() , [Link]() , etc.

Still requires chaining

Async/Await:

Syntactic sugar over Promises

Makes async code look synchronous

Better error handling with try/catch

Easier to read and debug

Can use with loops and conditional logic

javascript
 // Callback
fetchData((err, data) => {
if (err) return handleError(err);
processData(data, (err, result) => {
if (err) return handleError(err);
// More nesting...
});
});

// Promise
fetchData()
.then(processData)
.catch(handleError);

// Async/Await
try {
const data = await fetchData();
const result = await processData(data);
} catch (err) {
handleError(err);
}

Q: How would you implement your own Promise from scratch?

A:

javascript
class MyPromise {
constructor(executor) {
[Link] = 'pending';
[Link] = undefined;
[Link] = [];

const resolve = (value) => {

if ([Link] !== 'pending') return;
[Link] = 'fulfilled';
[Link] = value;
[Link](cb => [Link](value));
};

const reject = (reason) => {

if ([Link] !== 'pending') return;
[Link] = 'rejected';
[Link] = reason;
[Link](cb => [Link](reason));
};

try {
executor(resolve, reject);
} catch (err) {
reject(err);
}
}

then(onFulfilled, onRejected) {
return new MyPromise((resolve, reject) => {
const handle = () => {
if ([Link] === 'fulfilled') {
try {
const result = onFulfilled ? onFulfilled([Link]) : [Link];
resolve(result);
} catch (err) {
reject(err);
}
} else if ([Link] === 'rejected') {
if (onRejected) {
try {
const result = onRejected([Link]);
resolve(result);
} catch (err) {
reject(err);
}
} else {
 reject([Link]);
}
}
};

if ([Link] === 'pending') {

[Link]({ onFulfilled, onRejected });
} else {
setTimeout(handle, 0);
}
});
}

catch(onRejected) {
return [Link](null, onRejected);
}
}

2. Memory Management & Performance

Q: Describe how garbage collection works in V8.

A: V8 uses a generational garbage collection strategy with two main areas:

Young Generation (New Space):

Short-lived objects (1-8MB)

Uses Scavenger algorithm (Cheney's copying collection)

Very fast, runs frequently

Objects that survive are promoted to Old Generation

Old Generation (Old Space):

Long-lived objects

Uses Mark-Sweep and Mark-Compact algorithms

Slower but less frequent

Major GC pauses can affect performance

Phases:

1. Marking: Identifies live objects starting from roots

2. Sweeping: Removes unmarked objects

3. Compacting: Defragments memory to prevent fragmentation

V8 also uses incremental marking and concurrent marking to reduce pause times.

Q: What are memory leaks? Provide examples.

A: Memory leaks occur when memory that's no longer needed isn't released.

Common Causes:

javascript

// 1. Global variables
function leak() {
globalVar = new Array(1000000); // Accidental global
}

// 2. Forgotten timers
const timer = setInterval(() => {
// Large closure captured
const data = fetchLargeData();
}, 1000);
// Never cleared with clearInterval(timer)

// 3. Event listeners not removed

[Link]('click', handler);
// element removed from DOM but listener not removed

// 4. Closures holding references

function outer() {
const largeData = new Array(1000000);
return function inner() {
// largeData is held in closure even if not used
[Link]('hello');
};
}

// 5. Detached DOM nodes

let detached = [Link]('element');
[Link](detached);
// detached still holds reference to DOM node

Detection:

Chrome DevTools Heap Snapshot

Memory Timeline profiling

Performance monitor

Look for increasing memory over time

3. Closures & Scope

Q: Explain closures with practical use cases.

A: A closure is a function that has access to variables from its outer (enclosing) lexical scope, even after the
outer function has returned.

Practical Use Cases:

javascript
 // 1. Data Privacy (Private Variables)
function createCounter() {
let count = 0; // private
return {
increment() { return ++count; },
decrement() { return --count; },
getCount() { return count; }
};
}

// 2. Function Factories
function multiplier(factor) {
return function(number) {
return number * factor;
};
}
const double = multiplier(2);
const triple = multiplier(3);

// 3. Memoization
function memoize(fn) {
const cache = {};
return function(...args) {
const key = [Link](args);
if (cache[key]) return cache[key];
cache[key] = fn(...args);
return cache[key];
};
}

// 4. Event Handlers with Context

function setupHandlers(elements) {
[Link]((element, index) => {
[Link]('click', () => {
[Link](`Clicked element ${index}`);
// index is captured in closure
});
});
}

Performance Implications:

Closures consume memory (keep variables in scope)

Can prevent garbage collection if not managed

Minimal performance impact in modern engines

 Consider WeakMap for large data sets

Q: What is the Temporal Dead Zone (TDZ)?

A: The TDZ is the period between entering scope and the variable declaration being executed, during which the
variable cannot be accessed.

javascript

[Link](a); // ReferenceError: Cannot access 'a' before initialization

let a = 5;

// TDZ exists for let and const, but not var

[Link](b); // undefined (hoisted)
var b = 5;

// TDZ in function parameters

function test(a = b, b = 2) {
// ReferenceError: b is in TDZ when a is initialized
}

// TDZ in blocks
{
// TDZ starts
[Link](x); // ReferenceError
let x = 1; // TDZ ends
}

4. Prototypal Inheritance

Q: Explain prototypal inheritance vs classical inheritance.

A:

Prototypal Inheritance:

Objects inherit directly from other objects

More flexible, objects can be extended at runtime

Uses prototype chain

JavaScript's native model

javascript
 const animal = {
eat() { [Link]('eating'); }
};

const dog = [Link](animal);

[Link] = function() { [Link]('barking'); };

Classical Inheritance (Classes):

Classes inherit from classes

More structured, familiar to OOP developers

Syntactic sugar over prototypal inheritance

Established at compile time

javascript

class Animal {
eat() { [Link]('eating'); }
}

class Dog extends Animal {

bark() { [Link]('barking'); }
}

Trade-offs:

Prototypal: More flexible, dynamic, true to JavaScript

Classical: More familiar, better tooling support, clearer hierarchy

Q: How does the prototype chain work?

A: When accessing a property on an object:

1. Check if property exists on the object itself

2. If not, check the object's [[Prototype]] (accessible via __proto__ )

3. Continue up the chain until property is found or reach null

javascript
 const obj = { a: 1 };
[Link](obj) === [Link]; // true
[Link]([Link]) === null; // true

// Lookup chain
[Link](); // Found in [Link]
obj.a; // Found on obj itself
[Link]; // undefined (reached null)

Q: Difference between __proto__ and prototype ?

A:

prototype : Property on constructor functions, used when creating new instances

__proto__ : Property on objects, points to the object's prototype

javascript

function Person(name) {
[Link] = name;
}

[Link] = function() {
[Link](`Hi, I'm ${[Link]}`);
};

const john = new Person('John');

// [Link] is the prototype object

// john.__proto__ points to [Link]
john.__proto__ === [Link]; // true

Advanced Patterns & Architecture

5. Design Patterns

Q: Implement Module, Revealing Module, and Singleton patterns.

A:

javascript
// Module Pattern
const Module = (function() {
let privateVar = 0;

function privateMethod() {
return privateVar++;
}

return {
publicMethod() {
return privateMethod();
}
};
})();

// Revealing Module Pattern

const RevealingModule = (function() {
let privateVar = 0;

function increment() {
return ++privateVar;
}

function get() {
return privateVar;
}

// Reveal only what's needed

return {
increment,
getValue: get
};
})();

// Singleton Pattern
const Singleton = (function() {
let instance;

function createInstance() {
return {
property: 'value',
method() { return 'singleton method'; }
};
}

return {
 getInstance() {
if (!instance) {
instance = createInstance();
}
return instance;
}
};
})();

// ES6 Singleton with Class

class SingletonClass {
constructor() {
if ([Link]) {
return [Link];
}
[Link] = this;
[Link] = [];
}
}

Use Cases:

Module: Encapsulation, organizing code, avoiding global pollution

Revealing Module: Clear public API, better minification

Singleton: Database connections, configuration, logging

Q: Explain the Observer pattern.

A: The Observer pattern defines a one-to-many dependency where multiple observers are notified when a
subject's state changes.

javascript
 class Subject {
constructor() {
[Link] = [];
}

subscribe(observer) {
[Link](observer);
}

unsubscribe(observer) {
[Link] = [Link](obs => obs !== observer);
}

notify(data) {
[Link](observer => [Link](data));
}
}

class Observer {
constructor(name) {
[Link] = name;
}

update(data) {
[Link](`${[Link]} received:`, data);
}
}

// Usage
const subject = new Subject();
const observer1 = new Observer('Observer 1');
const observer2 = new Observer('Observer 2');

[Link](observer1);
[Link](observer2);
[Link]('New data available');

Used in:

Event systems

State management (Redux, MobX)

Reactive programming (RxJS)

UI frameworks (Vue, React hooks)

6. Functional Programming

Q: Explain pure functions, immutability, and side effects.

A:

Pure Functions:

Same input always produces same output

No side effects

Referentially transparent

javascript

// Pure
function add(a, b) {
return a + b;
}

// Impure (modifies external state)

let total = 0;
function addToTotal(value) {
total += value;
return total;
}

// Impure (depends on external state)

function getTax(price) {
return price * [Link];
}

Immutability:

Data cannot be changed after creation

Create new data structures instead of modifying

javascript

// Mutable
const arr = [1, 2, 3];
[Link](4); // Modifies original

// Immutable
const arr2 = [1, 2, 3];
const newArr = [...arr2, 4]; // Creates new array
Benefits:

Predictable code

Easier testing

Time-travel debugging

Concurrent programming

Memoization opportunities

Q: Higher-order functions with advanced examples.

A: Functions that take functions as arguments or return functions.

javascript
 // Function composition
const compose = (...fns) => x =>
[Link]((acc, fn) => fn(acc), x);

const addOne = x => x + 1;

const double = x => x * 2;
const square = x => x * x;

const pipeline = compose(square, double, addOne);

pipeline(3); // (3 + 1) * 2 ^ 2 = 64

// Partial application
const partial = (fn, ...args) =>
(...moreArgs) => fn(...args, ...moreArgs);

const multiply = (a, b, c) => a * b * c;

const double = partial(multiply, 2);
double(3, 4); // 2 * 3 * 4 = 24

// Currying
const curry = (fn) => {
return function curried(...args) {
if ([Link] >= [Link]) {
return [Link](this, args);
}
return (...moreArgs) => curried(...args, ...moreArgs);
};
};

const sum = (a, b, c) => a + b + c;

const curriedSum = curry(sum);
curriedSum(1)(2)(3); // 6
curriedSum(1, 2)(3); // 6

Q: Implement a Maybe monad.

A:

javascript
 class Maybe {
constructor(value) {
[Link] = value;
}

static of(value) {
return new Maybe(value);
}

isNothing() {
return [Link] === null || [Link] === undefined;
}

map(fn) {
return [Link]() ? [Link](null) : [Link](fn([Link]));
}

flatMap(fn) {
return [Link]() ? [Link](null) : fn([Link]);
}

getOrElse(defaultValue) {
return [Link]() ? defaultValue : [Link];
}
}

// Usage
const user = { name: 'John', address: { city: 'NYC' } };

[Link](user)
.map(u => [Link])
.map(addr => [Link])
.map(city => [Link]())
.getOrElse('Unknown'); // 'NYC'

// Handles null safely

[Link](null)
.map(u => [Link])
.map(addr => [Link])
.getOrElse('Unknown'); // 'Unknown'

Modern JavaScript & ES6+

7. ES6+ Features

Q: Differences between var, let, and const.

A:

javascript
// VAR
// - Function scoped
// - Hoisted (initialized as undefined)
// - Can be redeclared
// - Creates property on global object

function testVar() {
[Link](x); // undefined (hoisted)
var x = 5;
if (true) {
var x = 10; // Same variable
}
[Link](x); // 10
}

// LET
// - Block scoped
// - Hoisted but in TDZ
// - Cannot be redeclared
// - No global property

function testLet() {
// [Link](x); // ReferenceError
let x = 5;
if (true) {
let x = 10; // Different variable
[Link](x); // 10
}
[Link](x); // 5
}

// CONST
// - Block scoped
// - Hoisted but in TDZ
// - Cannot be reassigned
// - Must be initialized
// - Objects/arrays can be mutated

const obj = { a: 1 };
// obj = {}; // Error
obj.a = 2; // OK

const arr = [1, 2];

// arr = []; // Error
[Link](3); // OK
Q: Symbols and WeakMaps use cases.

A:

Symbols:

Unique, immutable primitive values

Used as object property keys

Not enumerable in for...in loops

javascript

// Private-ish properties
const _private = Symbol('private');
class MyClass {
constructor() {
this[_private] = 'secret';
}
getPrivate() {
return this[_private];
}
}

// Well-known symbols
const obj = {
[[Link]]() {
let count = 0;
return {
next() {
return count < 3
? { value: count++, done: false }
: { done: true };
}
};
}
};

// Metaprogramming
class Collection {
[[Link]] = 'Collection';
}
String(new Collection()); // '[object Collection]'

WeakMaps:

Keys must be objects

 Weak references (don't prevent GC)

Not enumerable

No size property

javascript

// Use case: Private data

const privateData = new WeakMap();

class Person {
constructor(name, ssn) {
[Link] = name;
[Link](this, { ssn });
}

getSSN() {
return [Link](this).ssn;
}
}

// Use case: DOM metadata

const elementMetadata = new WeakMap();

function attachMetadata(element, data) {

[Link](element, data);
}

// When element is removed from DOM, metadata is GC'd

Q: Proxies and Reflect API.

A:

javascript
// Proxy for validation
const validator = {
set(target, property, value) {
if (property === 'age') {
if (typeof value !== 'number' || value < 0) {
throw new TypeError('Age must be a positive number');
}
}
target[property] = value;
return true;
}
};

const person = new Proxy({}, validator);

[Link] = 30; // OK
// [Link] = -5; // TypeError

// Proxy for logging

const createLoggingProxy = (target, name) => {
return new Proxy(target, {
get(target, property) {
[Link](`[${name}] Getting ${property}`);
return [Link](target, property);
},
set(target, property, value) {
[Link](`[${name}] Setting ${property} = ${value}`);
return [Link](target, property, value);
}
});
};

// Proxy for default values

const withDefaults = (target, defaults) => {
return new Proxy(target, {
get(target, property) {
return property in target
? target[property]
: defaults[property];
}
});
};

const config = withDefaults({}, {

timeout: 3000,
retries: 3
});
 // Proxy for negative array indexing
const createNegativeArray = (arr) => {
return new Proxy(arr, {
get(target, property) {
const index = Number(property);
if (index < 0) {
return target[[Link] + index];
}
return [Link](target, property);
}
});
};

const arr = createNegativeArray([1, 2, 3, 4]);

arr[-1]; // 4
arr[-2]; // 3

Q: Generators and iterators.

A:

javascript
// Basic generator
function* numberGenerator() {
yield 1;
yield 2;
yield 3;
}

const gen = numberGenerator();

[Link](); // { value: 1, done: false }
[Link](); // { value: 2, done: false }
[Link](); // { value: 3, done: false }
[Link](); // { value: undefined, done: true }

// Infinite generator
function* fibonacci() {
let [a, b] = [0, 1];
while (true) {
yield a;
[a, b] = [b, a + b];
}
}

// Lazy evaluation
function* range(start, end) {
for (let i = start; i < end; i++) {
yield i;
}
}

function* map(iterable, fn) {

for (const item of iterable) {
yield fn(item);
}
}

function* filter(iterable, predicate) {

for (const item of iterable) {
if (predicate(item)) {
yield item;
}
}
}

// Composing generators
const numbers = range(1, 10);
const doubled = map(numbers, x => x * 2);
 const evens = filter(doubled, x => x % 2 === 0);

// Generator delegation
function* inner() {
yield 'inner';
}

function* outer() {
yield 'outer';
yield* inner();
yield 'done';
}

// Async generators
async function* asyncGenerator() {
for (let i = 0; i < 3; i++) {
await new Promise(resolve => setTimeout(resolve, 1000));
yield i;
}
}

// Usage
for await (const value of asyncGenerator()) {
[Link](value); // 0, 1, 2 (each after 1 second)
}

Browser APIs & Web Standards

8. DOM & Rendering

Q: Explain the browser rendering pipeline.

A:

Pipeline Stages:

1. Parse HTML → DOM tree

2. Parse CSS → CSSOM tree

3. Combine → Render tree (only visible nodes)

4. Layout (Reflow) → Calculate positions and sizes

5. Paint → Fill in pixels (text, colors, borders)

6. Composite → Combine layers into final image

Reflow (Layout):
 Recalculates element positions/sizes

Triggered by: DOM changes, size changes, layout properties

Expensive operation

javascript

// Causes reflow
[Link] = '100px';
const height = [Link]; // Forces reflow

// Minimize reflows
const width = [Link]; // Read
const height = [Link]; // Read
[Link] = width + 10 + 'px'; // Write
[Link] = height + 10 + 'px'; // Write

Repaint:

Updates pixels without layout changes

Triggered by: color, visibility, background changes

Less expensive than reflow

Optimization Strategies:

javascript
 // Batch DOM changes
const fragment = [Link]();
for (let i = 0; i < 1000; i++) {
const div = [Link]('div');
[Link](div);
}
[Link](fragment); // Single reflow

// Use CSS classes

[Link]('active'); // Better than inline styles

// Use transform and opacity (GPU accelerated)

[Link] = 'translateX(100px)'; // No layout
[Link] = 0.5; // No layout

// RequestAnimationFrame
requestAnimationFrame(() => {
[Link] = 'translateX(100px)';
});

Q: Virtual DOM benefits.

A: The Virtual DOM is an in-memory representation of the actual DOM.

Benefits:

1. Batched Updates: Multiple changes batched into single DOM update

2. Efficient Diffing: Only changed elements are updated

3. Reduced Reflows: Minimize expensive DOM operations

4. Cross-platform: Can render to different targets

5. Developer Experience: Declarative programming model

How it works:

javascript
 // Simplified Virtual DOM implementation
function createElement(type, props, ...children) {
return { type, props, children };
}

function diff(oldVNode, newVNode) {

// Compare and return patches
if ([Link] !== [Link]) {
return { type: 'REPLACE', newVNode };
}

const propPatches = diffProps([Link], [Link]);

const childPatches = diffChildren([Link], [Link]);

return { type: 'UPDATE', propPatches, childPatches };

}

function patch(domNode, patches) {

// Apply minimal changes to real DOM
switch ([Link]) {
case 'REPLACE':
[Link](render([Link]));
break;
case 'UPDATE':
updateProps(domNode, [Link]);
patchChildren(domNode, [Link]);
break;
}
}

9. Web APIs

Q: Service Workers vs Web Workers.

A:

Service Workers:

Runs in background, separate thread

Acts as proxy between browser and network

Can intercept network requests

Enables offline functionality

Has access to Cache API

Lifecycle: install, activate, fetch

 javascript

// Register service worker

if ('serviceWorker' in navigator) {
[Link]('/[Link]')
.then(reg => [Link]('SW registered', reg))
.catch(err => [Link]('SW error', err));
}

// [Link]
[Link]('install', event => {
[Link](
[Link]('v1').then(cache => {
return [Link]([
'/',
'/[Link]',
'/[Link]'
]);
})
);
});

[Link]('fetch', event => {

[Link](
[Link]([Link])
.then(response => response || fetch([Link]))
);
});

Web Workers:

Runs JavaScript in background thread

For CPU-intensive computations

No DOM access

Communicate via messages

javascript
 // Main thread
const worker = new Worker('[Link]');
[Link]({ data: largeArray });
[Link] = (e) => {
[Link]('Result:', [Link]);
};

// [Link]
[Link] = (e) => {
const result = processData([Link]);
[Link](result);
};

Key Differences:

Service Workers: Network proxy, offline, one per origin

Web Workers: Computation, multiple instances

10. Security

Q: XSS prevention strategies.

A:

Types of XSS:

1. Stored XSS: Malicious script stored in database

2. Reflected XSS: Script reflected from URL/input

3. DOM-based XSS: Client-side script manipulation

Prevention:

javascript
// 1. Input Validation
function sanitizeInput(input) {
return input
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#x27;')
.replace(/\//g, '&#x2F;');
}

// 2. Use textContent instead of innerHTML

[Link] = userInput; // Safe
// [Link] = userInput; // Dangerous

// 3. DOMPurify library
import DOMPurify from 'dompurify';
const clean = [Link](dirty);

// 4. Content Security Policy (CSP)

// HTTP Header or meta tag
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self' [Link]

// 5. Use frameworks that auto-escape

// React, Vue, Angular automatically escape by default

// 6. HttpOnly cookies
// Set-Cookie: sessionId=abc123; HttpOnly; Secure

// 7. Encode output context-appropriate

function encodeForHTML(str) {
return String(str)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#x27;');
}

function encodeForJS(str) {
return String(str)
.replace(/\\/g, '\\\\')
.replace(/'/g, "\\'")
.replace(/"/g, '\\"')
 .replace(/\n/g, '\\n');
}

Q: CSRF and mitigation.

A: CSRF tricks users into executing unwanted actions on authenticated sites.

Prevention:

javascript

// 1. CSRF Tokens
// Server generates unique token per session
<form method="POST">
<input type="hidden" name="csrf_token" value="${csrfToken}">
<!-- form fields -->
</form>

// 2. SameSite Cookie attribute

// Set-Cookie: sessionId=abc123; SameSite=Strict

// 3. Verify Origin/Referer headers

[Link]('/transfer', (req, res) => {
const origin = [Link]('origin');
if (origin !== '[Link] {
return [Link](403).send('Forbidden');
}
// Process request
});

// 4. Custom request headers (XHR/Fetch)

fetch('/api/data', {
method: 'POST',
headers: {
'X-Requested-With': 'XMLHttpRequest',
'X-CSRF-Token': getCsrfToken()
}
});

// 5. Double Submit Cookie

// Cookie and request parameter must match
[Link] = `csrf_token=${token}`;
fetch('/api', {
method: 'POST',
headers: { 'X-CSRF-Token': token }
});
Q: Content Security Policy implementation.

A:

javascript

// HTTP Header
Content-Security-Policy:
default-src 'self';
script-src 'self' 'unsafe-inline' [Link]
style-src 'self' 'unsafe-inline';
img-src 'self' data: https:;
font-src 'self' data:;
connect-src 'self' [Link]
frame-ancestors 'none';
base-uri 'self';
form-action 'self';

// Meta tag
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self' [Link]

// Report violations
Content-Security-Policy:
default-src 'self';
report-uri /csp-violation-report;

// Gradually enforce
Content-Security-Policy-Report-Only:
default-src 'self';
report-uri /csp-report;

// Handle violations
[Link]('/csp-violation-report', (req, res) => {
[Link]('CSP Violation:', [Link]);
// Log to monitoring service
});

[Link] & Backend

11. [Link] Fundamentals

Q: [Link] event loop vs browser.

A:

Phases of [Link] Event Loop:

 1. Timers: setTimeout, setInterval callbacks

2. Pending callbacks: I/O callbacks deferred to next iteration

3. Idle, prepare: Internal use only

4. Poll: Retrieve new I/O events

5. Check: setImmediate() callbacks

6. Close callbacks: Socket close events

javascript

setTimeout(() => [Link]('setTimeout'), 0);

setImmediate(() => [Link]('setImmediate'));
[Link](() => [Link]('nextTick'));
[Link]().then(() => [Link]('Promise'));

// Output: nextTick, Promise, setTimeout/setImmediate (order varies)

// Key Differences:
// - [Link] has highest priority (before microtasks)
// - setImmediate runs after I/O events
// - Browser has no setImmediate or [Link]

Q: [Link] Streams explained.

A:

javascript
// Readable Stream
const { Readable } = require('stream');

class NumberStream extends Readable {

constructor(max) {
super();
[Link] = 0;
[Link] = max;
}

_read() {
if ([Link] <= [Link]) {
[Link](String([Link]++));
} else {
[Link](null); // End stream
}
}
}

// Writable Stream
const { Writable } = require('stream');

class LogStream extends Writable {

_write(chunk, encoding, callback) {
[Link]([Link]());
callback();
}
}

// Transform Stream
const { Transform } = require('stream');

class UpperCaseTransform extends Transform {

_transform(chunk, encoding, callback) {
[Link]([Link]().toUpperCase());
callback();
}
}

// Duplex Stream (both readable and writable)

const { Duplex } = require('stream');

// Piping streams
const fs = require('fs');
[Link]('[Link]')
.pipe(new UpperCaseTransform())
 .pipe([Link]('[Link]'));

// Backpressure handling
const readable = [Link]('[Link]');
const writable = [Link]('[Link]');

[Link]('data', (chunk) => {

const canContinue = [Link](chunk);
if (!canContinue) {
[Link](); // Handle backpressure
}
});

[Link]('drain', () => {
[Link](); // Resume when buffer drains
});

Q: Cluster vs worker_threads.

A:

Cluster:

Multiple processes (separate memory)

Share server port

IPC for communication

Better for I/O-bound tasks

Isolated crashes

javascript
 const cluster = require('cluster');
const http = require('http');
const numCPUs = require('os').cpus().length;

if ([Link]) {
[Link](`Master ${[Link]} is running`);

for (let i = 0; i < numCPUs; i++) {

[Link]();
}

[Link]('exit', (worker, code, signal) => {

[Link](`Worker ${[Link]} died`);
[Link](); // Restart worker
});
} else {
[Link]((req, res) => {
[Link](200);
[Link]('Hello from worker ' + [Link]);
}).listen(8000);
}

Worker Threads:

Multiple threads (shared memory)

Share memory via SharedArrayBuffer

For CPU-intensive tasks

Lighter weight

javascript
 const { Worker, isMainThread, parentPort, workerData } = require('worker_threads');

if (isMainThread) {
// Main thread
const worker = new Worker(__filename, {
workerData: { num: 5 }
});

[Link]('message', (result) => {

[Link]('Result:', result);
});
} else {
// Worker thread
function fibonacci(n) {
if (n < 2) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}

const result = fibonacci([Link]);

[Link](result);
}

Q: [Link]() vs setImmediate().

A:

javascript
 // [Link]() - Executes before any I/O
// setImmediate() - Executes after I/O in check phase

setTimeout(() => [Link]('setTimeout'), 0);

setImmediate(() => [Link]('setImmediate'));
[Link](() => [Link]('nextTick'));

// Output: nextTick, setTimeout, setImmediate (or setTimeout/setImmediate may swap)

// Use cases:
// [Link]() - Emit events, ensure async execution
[Link](() => {
emit('event'); // Ensures listeners are registered
});

// setImmediate() - Break up long operations

function processLargeArray(array) {
const chunk = [Link](0, 100);
process(chunk);

if ([Link] > 0) {
setImmediate(() => processLargeArray(array));
}
}

Testing & Quality

12. Testing Strategies

Q: Unit vs Integration vs E2E testing.

A:

Unit Testing:

Test individual functions/components in isolation

Fast, focused, many tests

Mock dependencies

javascript
 // Jest example
describe('Calculator', () => {
test('adds two numbers', () => {
expect(add(2, 3)).toBe(5);
});

test('handles edge cases', () => {

expect(add(0, 0)).toBe(0);
expect(add(-1, 1)).toBe(0);
});
});

// Mock dependencies
[Link]('./api', () => ({
fetchUser: [Link](() => [Link]({ name: 'John' }))
}));

Integration Testing:

Test multiple units working together

Test API endpoints, database interactions

Medium speed, fewer tests

javascript
 // Supertest example
const request = require('supertest');
const app = require('./app');

describe('User API', () => {

test('GET /users returns users', async () => {
const response = await request(app)
.get('/users')
.expect(200);

expect([Link]).toHaveLength(10);
});

test('POST /users creates user', async () => {

const user = { name: 'John', email: 'john@[Link]' };
const response = await request(app)
.post('/users')
.send(user)
.expect(201);

expect([Link]).toBe('John');
});
});

E2E Testing:

Test entire application flow

Simulate real user interactions

Slow, few tests, high confidence

javascript

// Playwright example
const { test, expect } = require('@playwright/test');

test('user can login and view dashboard', async ({ page }) => {

await [Link]('[Link]
await [Link]('#username', 'testuser');
await [Link]('#password', 'password123');
await [Link]('#login-button');

await expect(page).toHaveURL(/.*dashboard/);
await expect([Link]('h1')).toContainText('Dashboard');
});
Testing Pyramid:

Many unit tests (70%)

Some integration tests (20%)

Few E2E tests (10%)

Q: Testing async code.

A:

javascript
 // Promises
test('fetches user data', () => {
return fetchUser(1).then(user => {
expect([Link]).toBe('John');
});
});

// Async/Await
test('fetches user data', async () => {
const user = await fetchUser(1);
expect([Link]).toBe('John');
});

// Error handling
test('handles fetch error', async () => {
await expect(fetchUser(-1)).[Link]('User not found');
});

// Multiple async operations

test('processes in parallel', async () => {
const [user1, user2] = await [Link]([
fetchUser(1),
fetchUser(2)
]);
expect([Link]).toBe('John');
expect([Link]).toBe('Jane');
});

// Timers
[Link]();
test('delays execution', () => {
const callback = [Link]();
setTimeout(callback, 1000);

[Link](1000);
expect(callback).toHaveBeenCalledTimes(1);
});

Coding Challenges Solutions

1. Deep Clone with Circular References

javascript
function deepClone(obj, hash = new WeakMap()) {
// Handle primitives and null
if (obj === null || typeof obj !== 'object') {
return obj;
}

// Handle Date
if (obj instanceof Date) {
return new Date([Link]());
}

// Handle RegExp
if (obj instanceof RegExp) {
return new RegExp([Link], [Link]);
}

// Handle circular references

if ([Link](obj)) {
return [Link](obj);
}

// Handle Arrays
if ([Link](obj)) {
const arrCopy = [];
[Link](obj, arrCopy);
[Link]((item, index) => {
arrCopy[index] = deepClone(item, hash);
});
return arrCopy;
}

// Handle Objects
const objCopy = [Link]([Link](obj));
[Link](obj, objCopy);

[Link](obj).forEach(key => {
objCopy[key] = deepClone(obj[key], hash);
});

// Handle Symbols
[Link](obj).forEach(symbol => {
objCopy[symbol] = deepClone(obj[symbol], hash);
});

return objCopy;
}
 // Test
const obj = { a: 1, b: { c: 2 } };
[Link] = obj; // Circular reference
const cloned = deepClone(obj);

2. Debounce and Throttle

javascript
// Debounce - Execute after delay, reset on new calls
function debounce(func, delay) {
let timeoutId;

return function debounced(...args) {

const context = this;

clearTimeout(timeoutId);

timeoutId = setTimeout(() => {

[Link](context, args);
}, delay);
};
}

// With immediate execution option

function debounce(func, delay, immediate = false) {
let timeoutId;

return function debounced(...args) {

const context = this;
const callNow = immediate && !timeoutId;

clearTimeout(timeoutId);

timeoutId = setTimeout(() => {

timeoutId = null;
if (!immediate) {
[Link](context, args);
}
}, delay);

if (callNow) {
[Link](context, args);
}
};
}

// Throttle - Execute at most once per interval

function throttle(func, limit) {
let inThrottle;
let lastResult;

return function throttled(...args) {

const context = this;
 if (!inThrottle) {
lastResult = [Link](context, args);
inThrottle = true;

setTimeout(() => {
inThrottle = false;
}, limit);
}

return lastResult;
};
}

// Advanced throttle with leading and trailing options

function throttle(func, limit, options = {}) {
let timeout;
let previous = 0;

return function throttled(...args) {

const now = [Link]();
const context = this;

if (!previous && [Link] === false) {

previous = now;
}

const remaining = limit - (now - previous);

if (remaining <= 0 || remaining > limit) {

if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
[Link](context, args);
} else if (!timeout && [Link] !== false) {
timeout = setTimeout(() => {
previous = [Link] === false ? 0 : [Link]();
timeout = null;
[Link](context, args);
}, remaining);
}
};
}
3. [Link]() Implementation

javascript
function promiseAll(promises) {
return new Promise((resolve, reject) => {
if () {
return reject(new TypeError('Argument must be an array'));
}

const results = [];

let completed = 0;

if ([Link] === 0) {
return resolve(results);
}

[Link]((promise, index) => {

[Link](promise)
.then(value => {
results[index] = value;
completed++;

if (completed === [Link]) {

resolve(results);
}
})
.catch(error => {
reject(error);
});
});
});
}

// [Link] implementation
function promiseAllSettled(promises) {
return [Link](
[Link](promise =>
[Link](promise)
.then(value => ({ status: 'fulfilled', value }))
.catch(reason => ({ status: 'rejected', reason }))
)
);
}

// [Link] implementation
function promiseRace(promises) {
return new Promise((resolve, reject) => {
if () {
return reject(new TypeError('Argument must be an array'));
 }

[Link](promise => {
[Link](promise)
.then(resolve)
.catch(reject);
});
});
}

4. Event Emitter

javascript
class EventEmitter {
constructor() {
[Link] = {};
}

on(event, listener) {
if (![Link][event]) {
[Link][event] = [];
}
[Link][event].push(listener);
return this;
}

once(event, listener) {
const onceWrapper = (...args) => {
[Link](this, args);
[Link](event, onceWrapper);
};
return [Link](event, onceWrapper);
}

off(event, listenerToRemove) {
if (![Link][event]) return this;

[Link][event] = [Link][event].filter(
listener => listener !== listenerToRemove
);

return this;
}

emit(event, ...args) {
if (![Link][event]) return false;

[Link][event].forEach(listener => {
[Link](this, args);
});

return true;
}

removeAllListeners(event) {
if (event) {
delete [Link][event];
} else {
[Link] = {};
 }
return this;
}

listenerCount(event) {
return [Link][event] ? [Link][event].length : 0;
}

listeners(event) {
return [Link][event] ? [...[Link][event]] : [];
}
}

// Usage
const emitter = new EventEmitter();

[Link]('data', (data) => [Link]('Received:', data));

[Link]('data', (data) => [Link]('Once:', data));

[Link]('data', { message: 'Hello' });

[Link]('data', { message: 'World' });

5. Flatten Nested Array

javascript
// Recursive approach
function flatten(arr, depth = Infinity) {
if (depth === 0) return arr;

return [Link]((acc, item) => {

if ([Link](item)) {
return [Link](flatten(item, depth - 1));
}
return [Link](item);
}, []);
}

// Iterative approach with stack

function flattenIterative(arr) {
const stack = [...arr];
const result = [];

while ([Link]) {
const item = [Link]();

if ([Link](item)) {
[Link](...item);
} else {
[Link](item);
}
}

return result;
}

// Using generator
function* flattenGenerator(arr, depth = Infinity) {
for (const item of arr) {
if ([Link](item) && depth > 0) {
yield* flattenGenerator(item, depth - 1);
} else {
yield item;
}
}
}

// Test
flatten([1, [2, [3, [4]], 5]]); // [1, 2, 3, 4, 5]
flatten([1, [2, [3, [4]], 5]], 2); // [1, 2, 3, [4], 5]

### 6. LRU Cache

```javascript
class LRUCache {
constructor(capacity) {
[Link] = capacity;
[Link] = new Map();
}

get(key) {
if () {
return -1;
}

// Move to end (most recently used)

const value = [Link](key);
[Link](key);
[Link](key, value);

return value;
}

put(key, value) {
// Delete if exists (to reorder)
if ([Link](key)) {
[Link](key);
}

// Add to end
[Link](key, value);

// Remove least recently used if over capacity

if ([Link] > [Link]) {
const firstKey = [Link]().next().value;
[Link](firstKey);
}
}

// Additional methods
has(key) {
return [Link](key);
}

clear() {
[Link]();
}

size() {
return [Link];
 }
}

// Alternative implementation with doubly linked list for O(1) operations

class Node {
constructor(key, value) {
[Link] = key;
[Link] = value;
[Link] = null;
[Link] = null;
}
}

class LRUCacheOptimized {
constructor(capacity) {
[Link] = capacity;
[Link] = new Map();
[Link] = new Node(null, null);
[Link] = new Node(null, null);
[Link] = [Link];
[Link] = [Link];
}

_removeNode(node) {
[Link] = [Link];
[Link] = [Link];
}

_addToHead(node) {
[Link] = [Link];
[Link] = [Link];
[Link] = node;
[Link] = node;
}

get(key) {
if () {
return -1;
}

const node = [Link](key);

this._removeNode(node);
this._addToHead(node);

return [Link];
}
 put(key, value) {
if ([Link](key)) {
const node = [Link](key);
[Link] = value;
this._removeNode(node);
this._addToHead(node);
} else {
const newNode = new Node(key, value);
[Link](key, newNode);
this._addToHead(newNode);

if ([Link] > [Link]) {

const lru = [Link];
this._removeNode(lru);
[Link]([Link]);
}
}
}
}

// Usage
const cache = new LRUCache(2);
[Link](1, 1);
[Link](2, 2);
[Link](1); // returns 1
[Link](3, 3); // evicts key 2
[Link](2); // returns -1 (not found)
```

### 7. Observable Pattern

```javascript
class Observable {
constructor(subscribe) {
this._subscribe = subscribe;
}

subscribe(observer) {
return this._subscribe(observer);
}

static create(subscribe) {
return new Observable(subscribe);
}

static fromArray(array) {
return new Observable(observer => {
[Link](item => [Link](item));
 [Link]();

return { unsubscribe: () => {} };

});
}

static fromEvent(element, eventName) {

return new Observable(observer => {
const handler = (event) => [Link](event);
[Link](eventName, handler);

return {
unsubscribe: () => {
[Link](eventName, handler);
}
};
});
}

static interval(period) {
return new Observable(observer => {
let count = 0;
const intervalId = setInterval(() => {
[Link](count++);
}, period);

return {
unsubscribe: () => clearInterval(intervalId)
};
});
}

map(transformFn) {
return new Observable(observer => {
return [Link]({
next: (value) => [Link](transformFn(value)),
error: (err) => [Link](err),
complete: () => [Link]()
});
});
}

filter(predicateFn) {
return new Observable(observer => {
return [Link]({
next: (value) => {
if (predicateFn(value)) {
 [Link](value);
}
},
error: (err) => [Link](err),
complete: () => [Link]()
});
});
}

take(count) {
return new Observable(observer => {
let taken = 0;
const subscription = [Link]({
next: (value) => {
if (taken < count) {
[Link](value);
taken++;
if (taken === count) {
[Link]();
[Link]();
}
}
},
error: (err) => [Link](err),
complete: () => [Link]()
});

return subscription;
});
}

debounce(duration) {
return new Observable(observer => {
let timeoutId;

return [Link]({
next: (value) => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
[Link](value);
}, duration);
},
error: (err) => [Link](err),
complete: () => [Link]()
});
});
}
}

// Usage
const observable = [Link](observer => {
[Link](1);
[Link](2);
[Link](3);

setTimeout(() => {
[Link](4);
[Link]();
}, 1000);

return {
unsubscribe: () => [Link]('Unsubscribed')
};
});

const subscription = observable

.map(x => x * 2)
.filter(x => x > 2)
.subscribe({
next: (value) => [Link]('Next:', value),
error: (err) => [Link]('Error:', err),
complete: () => [Link]('Complete!')
});

// Later: [Link]();
```

### 8. Retry Mechanism with Exponential Backoff

```javascript
async function retry(fn, options = {}) {
const {
maxAttempts = 3,
delay = 1000,
backoff = 2,
maxDelay = 30000,
onRetry = () => {}
} = options;

let lastError;

for (let attempt = 1; attempt <= maxAttempts; attempt++) {

try {
return await fn();
} catch (error) {
 lastError = error;

if (attempt === maxAttempts) {

throw error;
}

const waitTime = [Link](

delay * [Link](backoff, attempt - 1),
maxDelay
);

onRetry({
attempt,
error,
waitTime
});

await new Promise(resolve => setTimeout(resolve, waitTime));

}
}

throw lastError;
}

// Advanced retry with conditional retry logic

async function retryAdvanced(fn, options = {}) {
const {
maxAttempts = 3,
delay = 1000,
backoff = 2,
shouldRetry = () => true,
onRetry = () => {},
timeout = null
} = options;

let lastError;

for (let attempt = 1; attempt <= maxAttempts; attempt++) {

try {
if (timeout) {
return await [Link]([
fn(),
new Promise((_, reject) =>
setTimeout(() => reject(new Error('Timeout')), timeout)
)
]);
}
 return await fn();
} catch (error) {
lastError = error;

if (attempt === maxAttempts || !shouldRetry(error, attempt)) {

throw error;
}

const waitTime = delay * [Link](backoff, attempt - 1);

onRetry({ attempt, error, waitTime });

await new Promise(resolve => setTimeout(resolve, waitTime));

}
}

throw lastError;
}

// Usage examples
async function fetchData() {
const response = await fetch('[Link]
if (![Link]) throw new Error('Failed to fetch');
return [Link]();
}

// Basic retry
try {
const data = await retry(fetchData, {
maxAttempts: 5,
delay: 1000,
backoff: 2,
onRetry: ({ attempt, error, waitTime }) => {
[Link](`Attempt ${attempt} failed. Retrying in ${waitTime}ms...`);
}
});
} catch (error) {
[Link]('All retry attempts failed:', error);
}

// Advanced retry with conditional logic

try {
const data = await retryAdvanced(fetchData, {
maxAttempts: 5,
shouldRetry: (error, attempt) => {
// Only retry on network errors, not 404s
return [Link]('network') || [Link]('timeout');
},
 timeout: 5000
});
} catch (error) {
[Link]('Failed:', error);
}

// Retry with jitter (prevents thundering herd)

async function retryWithJitter(fn, options = {}) {
const {
maxAttempts = 3,
delay = 1000,
maxDelay = 30000
} = options;

for (let attempt = 1; attempt <= maxAttempts; attempt++) {

try {
return await fn();
} catch (error) {
if (attempt === maxAttempts) throw error;

const exponentialDelay = delay * [Link](2, attempt - 1);

const jitter = [Link]() * exponentialDelay;
const waitTime = [Link](exponentialDelay + jitter, maxDelay);

await new Promise(resolve => setTimeout(resolve, waitTime));

}
}
}
```

### 9. Memory Leak Detection

```javascript
// Memory Leak Detector
class MemoryLeakDetector {
constructor() {
[Link] = [];
[Link] = new WeakMap();
}

// Track object allocation

track(obj, name) {
[Link](obj, { name, timestamp: [Link]() });
}

// Take heap snapshot

takeSnapshot() {
const snapshot = {
 timestamp: [Link](),
memory: [Link] ? {
usedJSHeapSize: [Link],
totalJSHeapSize: [Link]
} : null
};
[Link](snapshot);
return snapshot;
}

// Detect growing memory over time

detectGrowth(threshold = 1.5) {
if ([Link] < 2) {
return { detected: false, message: 'Need more snapshots' };
}

const first = [Link][0];

const last = [Link][[Link] - 1];

if (![Link] || ![Link]) {
return { detected: false, message: 'Memory API not available' };
}

const growthRatio = [Link] / [Link];

return {
detected: growthRatio > threshold,
growthRatio,
initialSize: [Link],
currentSize: [Link],
difference: [Link] - [Link]
};
}

// Monitor specific patterns

static checkCommonLeaks(code) {
const leaks = [];

// Check for global variables

if (/^\s*\w+\s*=/.test(code) && !/var|let|const/.test(code)) {
[Link]({
type: 'global_variable',
message: 'Potential global variable detected',
severity: 'medium'
});
}
 // Check for forgotten timers
if (/setInterval|setTimeout/.test(code) && !/clearInterval|clearTimeout/.test(code)) {
[Link]({
type: 'timer_leak',
message: 'Timer without clear function',
severity: 'high'
});
}

// Check for event listeners

if (/addEventListener/.test(code) && !/removeEventListener/.test(code)) {
[Link]({
type: 'event_listener',
message: 'Event listener without removal',
severity: 'medium'
});
}

// Check for large closures

if (/function.*\{[\s\S]{1000,}\}/.test(code)) {
[Link]({
type: 'large_closure',
message: 'Large function closure detected',
severity: 'low'
});
}

return leaks;
}
}

// Example usage
const detector = new MemoryLeakDetector();

// Monitor over time

setInterval(() => {
[Link]();
const result = [Link]();

if ([Link]) {
[Link]('Memory leak detected!', result);
}
}, 5000);

// Static analysis
const code = `
setInterval(() => {
 data = fetchData(); // Global variable
}, 1000);
`;

const leaks = [Link](code);

[Link]('Detected leaks:', leaks);

// Practical leak detection helpers

function findDetachedDOMNodes() {
const walker = [Link](
[Link],
NodeFilter.SHOW_ELEMENT
);

const detached = [];

let node;

while (node = [Link]()) {

if () {
[Link](node);
}
}

return detached;
}

function findEventListenerLeaks() {
const leaks = [];

// Check elements that might have listeners

[Link]('*').forEach(element => {
const listeners = getEventListeners?.(element);
if (listeners && [Link](listeners).length > 0) {
[Link]({
element,
listeners: [Link](listeners)
});
}
});

return leaks;
}
```

### 10. State Management Library (Redux-like)

```javascript
class Store {
 constructor(reducer, initialState = {}) {
[Link] = reducer;
[Link] = initialState;
[Link] = [];
[Link] = [];
}

getState() {
return [Link];
}

dispatch(action) {
// Apply middlewares
let dispatch = (action) => {
[Link] = [Link]([Link], action);
[Link](listener => listener());
};

// Create middleware chain

[Link]().forEach(middleware => {
dispatch = middleware(this)(dispatch);
});

return dispatch(action);
}

subscribe(listener) {
[Link](listener);

// Return unsubscribe function

return () => {
[Link] = [Link](l => l !== listener);
};
}

applyMiddleware(...middlewares) {
[Link] = middlewares;
}
}

// Middleware examples
const loggerMiddleware = store => next => action => {
[Link]('Dispatching:', action);
const result = next(action);
[Link]('New state:', [Link]());
return result;
};
const thunkMiddleware = store => next => action => {
if (typeof action === 'function') {
return action([Link], [Link]);
}
return next(action);
};

const asyncMiddleware = store => next => action => {

if ([Link] && [Link]('_ASYNC')) {
const { type, payload } = action;
const baseType = [Link]('_ASYNC', '');

[Link]({ type: `${baseType}_PENDING` });

return payload()
.then(result => {
[Link]({ type: `${baseType}_SUCCESS`, payload: result });
return result;
})
.catch(error => {
[Link]({ type: `${baseType}_FAILURE`, payload: error });
throw error;
});
}

return next(action);
};

// Helper to combine reducers

function combineReducers(reducers) {
return (state = {}, action) => {
return [Link](reducers).reduce((nextState, key) => {
nextState[key] = reducers[key](state[key], action);
return nextState;
}, {});
};
}

// Usage example
const counterReducer = (state = { count: 0 }, action) => {
switch ([Link]) {
case 'INCREMENT':
return { count: [Link] + 1 };
case 'DECREMENT':
return { count: [Link] - 1 };
case 'ADD':
 return { count: [Link] + [Link] };
default:
return state;
}
};

const userReducer = (state = { name: '', loggedIn: false }, action) => {

switch ([Link]) {
case 'LOGIN':
return { name: [Link], loggedIn: true };
case 'LOGOUT':
return { name: '', loggedIn: false };
default:
return state;
}
};

const rootReducer = combineReducers({

counter: counterReducer,
user: userReducer
});

const store = new Store(rootReducer);

[Link](loggerMiddleware, thunkMiddleware, asyncMiddleware);

// Subscribe to changes
const unsubscribe = [Link](() => {
[Link]('State changed:', [Link]());
});

// Dispatch actions
[Link]({ type: 'INCREMENT' });
[Link]({ type: 'ADD', payload: 5 });
[Link]({ type: 'LOGIN', payload: 'John' });

// Thunk action
const incrementAsync = (delay) => (dispatch) => {
setTimeout(() => {
dispatch({ type: 'INCREMENT' });
}, delay);
};

[Link](incrementAsync(1000));

// Async action
[Link]({
type: 'FETCH_USER_ASYNC',
 payload: () => fetch('/api/user').then(r => [Link]())
});

// Clean up
unsubscribe();
```

---

*These comprehensive answers demonstrate deep JavaScript knowledge, practical problem-solving abilities, and the kind of n