Module 06 — Advanced JavaScript, Async & APIs (Advanced JS, Event Loop & APIs)
1. What is it? (Ye Kya Hai?)
Advanced JavaScript ka matlab hai ECMAScript runtime internals, asynchronous execution, memory architecture aur browser Web APIs ko master karna: Closures, Execution Context, Call Stack, The Event Loop, Promises & async/await, RESTful Fetch API, Event Delegation aur Web Security (XSS / CORS).
Ye module ek learner ko basic scripting se utha kar ek professional frontend software engineer banata hai jo complex, scalable aur zero-lag web applications build kar sake.
2. Why do we use it? (Ye Kyun Seekhna Zaroori Hai?)
Production-grade web apps poori tarah asynchronous aur distributed hoti hain:
- Single-Threaded Concurrency Samajhna: JavaScript single-threaded hai (ek waqt par ek hi kaam kar sakti hai). Agar aapko Event Loop, Microtask Queue aur Call Stack ka exact flow nahi pata hoga, to aap anjane mein browser screen ko freeze kar denge aur ajeeb bugs aayenge.
- Private State & Clean Code: Closures aur Higher-Order functions ki madad se aap private variables aur factory patterns implement kar sakte hain bina global scope ko pollute kiye.
- Real-World Backend Communication: Modern web apps lagatar backend APIs se data exchange karti hain.
async/await, HTTP status codes aur JSON serialization ko smoothly handle karna professional web dev ki fundamental requirement hai. - Fast Performance & Security: 10,000 table rows ke liye sirf ek event listener lagana (Event Delegation), search box ko Debounce karna aur XSS attacks se bachna production engineering ka hissa hai.
3. Simple Explanation (Restaurant Kitchen Analogy)
Ek busy restaurant ki kitchen ka example lijiye:
- The Head Chef (The Single-Threaded Call Stack): Kitchen mein sirf ek hi main chef hai. Chef ek time par ya to sabzi kaat sakta hai ya fry kar sakta hai. Agar chef ko oven mein cake pakne tak 45 minute wahi khade rehna padta (synchronous blocking), to poora restaurant band ho jata!
- The Assistant & Oven (Browser Web APIs): Chef cake ko oven mein daalta hai, 45 minute ka timer lagata hai aur turant doosri table ka pasta banana shuru kar deta hai (non-blocking asynchronous delegation).
- The Order Counter (Task Queues): Jab oven ka timer bajta hai, assistant cake ko counter par rakh deta hai.
- The Expediter (The Event Loop): Expediter lagatar check karta rehta hai: "Kya Head Chef ka cutting board khali hai? Agar haan, to counter se cake uthakar chef ko final garnish karne ke liye do!"
JavaScript is tarike se kaam karti hai, isliye single thread hone ke bawajood hazaron network requests aur clicks ko bina ruke handle kar leti hai.
4. Technical Explanation: The Event Loop & Runtime Architecture
┌────────────────────────────────────────────────────────────────────────┐
│ JAVASCRIPT ENGINE (V8) │
│ │
│ ┌───────────────────────────┐ ┌───────────────────────────┐ │
│ │ MEMORY HEAP │ │ CALL STACK │ │
│ │ (Objects aur memory state)│ │ (Last-In, First-Out LIFO) │ │
│ └───────────────────────────┘ └─────────────┬─────────────┘ │
└──────────────────────────────────────────────────────┼─────────────────┘
│ (Web APIs ko handover)
▼
┌────────────────────────────────────────────────────────────────────────┐
│ BROWSER WEB APIS │
│ (DOM Events, fetch(), setTimeout, setInterval, Observer APIs) │
└──────────────────────────────┬─────────────────────────────────────────┘
│ (Kaam complete hone par callback push)
▼
┌────────────────────────────────────────────────────────────────────────┐
│ TASK QUEUES │
│ │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ MICROTASK QUEUE (HIGHEST PRIORITY - PEHLE RUN HOGI): │ │
│ │ Promises (.then/.catch), queueMicrotask, MutationObserver │ │
│ └──────────────────────────────────┬───────────────────────────────┘ │
│ │ │
│ ┌──────────────────────────────────▼───────────────────────────────┐ │
│ │ MACROTASK QUEUE: │ │
│ │ setTimeout, setInterval, DOM Events, I/O │ │
│ └──────────────────────────────────┬───────────────────────────────┘ │
└─────────────────────────────────────┼──────────────────────────────────┘
│
▼
[ THE EVENT LOOP ]
(Check karta hai Call Stack khali hai ya nahi;
pehle poori Microtask Queue ko drain karta hai,
fir ek Macrotask run karta hai aur screen repaint karta hai)Event Loop Ki Priority Rule:
- Call Stack par normal synchronous code run hota hai jab tak stack khali na ho jaye.
- Call stack khali hote hi Microtask Queue (Promises) check hoti hai. Jab tak Microtask Queue 100% empty nahi ho jati, tab tak saari promises execute hoti hain.
- Iske baad browser screen repaint karta hai.
- Finally, Macrotask Queue (
setTimeout) se ek single task uthakar stack par bheja jata hai.
5. Scope, Scope Chain & Closures
Lexical Scope:
Function ke andar kaunse variables accessible hain, ye is baat par depend karta hai ki function code mein physically kahan likha gaya tha.
Closure Kya Hota Hai?
Closure ka matlab hai ki ek inner function apne bahar wale parent function ke variables ko hamesha yaad rakhta hai, chahe parent function execute hokar return kyun na ho chuka ho!
// Data Encapsulation & Private Variables using Closures
function createBankVault(initialAmount) {
// Ye variable bahar se directly accessible nahi hai (Private State!)
let balance = initialAmount;
return {
deposit(amt) {
balance += amt;
return balance;
},
withdraw(amt) {
if (amt > balance) throw new Error('Insufficient balance');
balance -= amt;
return balance;
},
checkBalance() {
return balance;
}
};
}
const myVault = createBankVault(5000);
myVault.deposit(2000);
console.log(myVault.checkBalance()); // 7000
// console.log(myVault.balance); // undefined! Direct access impossible hai!6. Execution Context, Hoisting & this Keyword
The 4 Rules of this:
// Rule 1: Default Binding (Global window object ya strict mode mein undefined)
function testGlobal() {
console.log(this);
}
// Rule 2: Implicit Binding (Dot ke left side wala object)
const person = {
name: 'Rahul',
sayHello() {
console.log(`Namaste, main hoon ${this.name}`);
}
};
person.sayHello(); // 'this' points to person
// Rule 3: Explicit Binding (call, apply, bind)
function greet(city, state) {
console.log(`${this.name} lives in ${city}, ${state}`);
}
const userObj = { name: 'Priya' };
greet.call(userObj, 'Delhi', 'Delhi NCR');
greet.apply(userObj, ['Mumbai', 'Maharashtra']);
const boundFn = greet.bind(userObj, 'Bangalore', 'Karnataka');
boundFn();
// Rule 4: Arrow Functions (Inka apna 'this' nahi hota; parent ka this inherit karte hain)
const timer = {
seconds: 0,
start() {
setInterval(() => {
this.seconds++; // Arrow function hone ki wajah se this = timer object!
console.log(this.seconds);
}, 1000);
}
};7. Functional Array Methods Deep Dive
const transactions = [
{ id: 1, type: 'INCOME', category: 'Salary', amount: 50000 },
{ id: 2, type: 'EXPENSE', category: 'Rent', amount: 15000 },
{ id: 3, type: 'EXPENSE', category: 'Food', amount: 8000 },
{ id: 4, type: 'INCOME', category: 'Freelance', amount: 20000 }
];
// 1. Filter: Sirf expenses nikalna
const expenses = transactions.filter(t => t.type === 'EXPENSE');
// 2. Map: Data transform karna
const categoryList = transactions.map(t => t.category.toUpperCase());
// 3. Reduce: Total net savings calculate karna
const netSavings = transactions.reduce((total, curr) => {
return curr.type === 'INCOME' ? total + curr.amount : total - curr.amount;
}, 0);
console.log('Net Savings:', netSavings); // 47000
// 4. Sort: Highest to lowest amount sort karna (Pehle copy banayein!)
const sortedDesc = [...transactions].sort((a, b) => b.amount - a.amount);8. Asynchronous JavaScript: Promises & async/await
Production-Grade fetch() Architecture:
// Robust API client with proper error handling and status code verification
async function fetchUserData(userId) {
try {
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
// DHYAN DEIN: fetch() 404 ya 500 error aane par promise reject nahi karta!
if (!response.ok) {
throw new Error(`Server Error: HTTP ${response.status}`);
}
const userData = await response.json();
console.log('User fetched successfully:', userData.name);
return userData;
} catch (error) {
console.error('API call failed:', error.message);
throw error;
}
}Promise Combinators:
Promise.all([p1, p2]): Agar ek bhi promise fail hui to turant fail ho jayega (All or Nothing).Promise.allSettled([p1, p2]): Sabhi ke complete hone ka wait karta hai chahe pass ho ya fail. Batch processing ke liye best hai.Promise.race([p1, p2]): Jo pehle complete hoga (pass ya fail) uska result le lega.
9. Modern ES6+ Classes & Private Fields
class BankCustomer {
#secretPin; // True Private Field (# lagane se bahar se koi access nahi kar sakta)
constructor(name, pin) {
this.name = name;
this.#secretPin = pin;
}
verifyPin(inputPin) {
return this.#secretPin === inputPin;
}
}10. Advanced DOM: Event Delegation & DocumentFragment
Event Delegation Pattern:
Agar list mein 1,000 items hain, to 1,000 alag-alag event listeners lagane se memory waste hoti hai. Iske badle sirf ek listener parent element par lagayein aur Event Bubbling ka use karein:
const list = document.querySelector('#itemList');
list.addEventListener('click', (event) => {
// Check karein ki click delete button par hua hai ya nahi
const deleteBtn = event.target.closest('.delete-btn');
if (deleteBtn && list.contains(deleteBtn)) {
const item = deleteBtn.closest('.item');
item.remove();
console.log('Item deleted via Event Delegation!');
}
});DocumentFragment Se Fast DOM Injection:
Loop ke andar direct .appendChild() karne se baar-baar reflow hota hai. Iske badle memory mein DocumentFragment banayein aur ek baar mein DOM mein insert karein:
function renderProducts(products) {
const container = document.querySelector('#grid');
const fragment = document.createDocumentFragment();
products.forEach(p => {
const el = document.createElement('div');
el.className = 'card';
el.textContent = p.name;
fragment.appendChild(el);
});
// Poore page par sirf EK single reflow hoga!
container.appendChild(fragment);
}11. Performance: Debounce vs Throttle
// Debounce: Jab user type karna band kare, tab 300ms baad function run karo (Search inputs)
function debounce(fn, delay = 300) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
// Throttle: Har 100ms mein zyada se zyada EK baar function chalega (Scroll events)
function throttle(fn, limit = 100) {
let inThrottle = false;
return function(...args) {
if (!inThrottle) {
fn.apply(this, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}12. Client Storage & Web Security (XSS / LocalStorage)
CAUTION
Kabhi bhi sensitive login passwords ya JWT tokens ko localStorage mein store na karein! Agar aapki site par koi malicious third-party script run hoti hai, to wo window.localStorage ko easily chura sakti hai (Cross-Site Scripting — XSS attack). Sensitive auth tokens ko hamesha server-side HttpOnly, Secure cookies mein store kiya jata hai.
13. Practice Questions
- Is code ka console output order batayein:javascript
console.log('A'); setTimeout(() => console.log('B'), 0); Promise.resolve().then(() => console.log('C')); console.log('D'); - Closure kya hota hai aur ye private state maintain karne mein kaise help karta hai?
call,applyaurbindmein kya difference hai?- Event Delegation se browser ki memory kaise bachti hai?
fetch()HTTP 404 aane par promise reject kyun nahi karta?
14. Mini Challenge
Ek debounced autocomplete search box banayein:
- Search input par 300ms ka debounce lagayein.
fetch()se public API (jaise REST Countries API) call karein.- Purani pending request ko cancel karne ke liye
AbortControlleruse karein. - Results ko
DocumentFragmentse render karein aur Event Delegation se click handle karein.
15. Interview Questions & Answers
Q1: JavaScript Event Loop, Call Stack aur Microtask Queue ko explain karein.
Answer: JavaScript single-threaded language hai jisme ek hi Call Stack hota hai. Asynchronous tasks (fetch, setTimeout) ko browser Web APIs ke hawale kar diya jata hai. Kaam complete hone par unke callbacks Microtask Queue (Promises) ya Macrotask Queue (setTimeout) mein aate hain. Event Loop lagatar dekhta rehta hai: jaise hi Call Stack khali hota hai, wo pehle poori Microtask Queue ko drain karta hai (isliye Promise ka .then() hamesha setTimeout(..., 0) se pehle chalta hai) aur uske baad ek Macrotask run karta hai.
Q2: Event Bubbling aur Event Capturing kya hai aur ise kaise stop karte hain?
Answer: Event propagation teen phases mein hota hai: Capturing Phase (window se shuru hokar target element ki taraf niche aana), Target Phase (jis element par click hua wahan pahunchna) aur Bubbling Phase (wapas target se upar root ki taraf bubble up hona). By default addEventListener Bubbling phase mein listen karta hai. Is bubbling ko rokne ke liye event.stopPropagation() call kiya jata hai taaki parent elements ke listeners trigger na hon.
16. Quick Revision Points
- Call Stack pehle empty hoga → Microtasks (Promises) pehle run honge → Macrotasks (
setTimeout) baad mein aayenge. - Closures outer lexical scope ke variables ko function return hone ke baad bhi memory mein hold karke rakhte hain.
- Arrow functions ka apna
thisnahi hota, wo parent lexical scope kathisuse karte hain. Promise.allfast-fail hota hai jabkiPromise.allSettledsabhi outcomes ka wait karta hai.- Fetch API use karte waqt hamesha
response.okcheck karein. - Search inputs par Debounce aur scroll/resize par Throttle use karein.
17. Next Topic (Agla Kadam)
Aapne sabhi 6 core curriculum modules successfully complete kar liye hain! Ab aap 6 Real-World Projects build karein, 300 Progressive Exercises solve karein aur 150 Interview Questions ki practice karein!