🌐 JavaScript
•🖥️
Runtime Components
Definition:
JavaScript ka runtime environment mainly teen major components se bana hota hai:
• Call Stack
• Web APIs
• Event Loop
• Task Queue
• Microtask Queue
Yeh sab mil kar async operations ko efficiently handle karte hain.
🏗️ Call Stack (स्टैक)
• 🧩 Definition:
JavaScript single-threaded hai, yani ek time par ek hi kaam ho sakta hai. Call Stack ek data
structure hai jo yahi handle karta hai — jab bhi koi function call hota hai, wo stack ke top par
chala jata hai aur complete hone par pop ho jata hai.
• 🔑 Practical Example:
Jab aap function ko call karte ho, har new function ek naye execution context ke sath call stack
me push hota hai, aur jab return hota hai tab pop hota hai.
🔄 Event Loop (इवेंट लूप)
• 🔍 Definition:
Event Loop ek mechanism hai jo JavaScript runtime me async operations ko handle karta hai.
Iska kaam hai ki non-blocking tasks ko efficiently execute karna, taki single-threaded JS hang
na ho.
• 🚦 Trick to Remember:
“Event Loop ko traffic police samjo: wo check karta rahta hai ki call stack khali hai to next task
queue ya microtask se task lekar execute kare.”
⏱️ Web APIs (वेब API)
• 📦 Definition:
Web APIs, browser ke side ke features hain jinke through heavy ya time-consuming kaam jaise
timer, network requests, ya file access browser ke taraf bhejte hain.
• 🛠️ Common APIs:
Fetch API, setTimeout/setInterval, Geolocation API, Storage API, DOM APIs, etc.
• ⚡ Rule:
“Heavy ya async kaam hamesha Web APIs ke through browser handle karta hai, main JS thread
nahi.”
📥 Task
•🗂️
Queue & Microtask Queue
Task Queue:
Callbacks jaise setTimeout, setInterval, event listeners ke functions yahan store hote hain —
Event Loop call stack khali hone par isse tasks uthata hai.
• 🧵 Microtask Queue:
Promises se generate hone wale .then, .catch, .finally ya async/await ke tasks yahan store hote
hain. Microtask Queue ki priority Task Queue se high hoti hai.
• ⭐ Trick:
“Microtasks VIP hain — normal bhakton ki line baad me aayegi, VIP wale pehle andar
jayenge.”
⚙️ JavaScript
• 🏁
Execution Flow Icons
1. JS Code Execution: Synchronous code line by line call stack par.
• 🔗 2. Async Task: Web APIs le leta hai work, example: setTimeout, fetch.
• 📮 3. Callback/Microtask Queue: Result milte hi respective queue me callback/microtask aata
hai.
• 🔄 4. Event Loop: Call Stack khali hai to Event Loop task/microtask uthakar stack me execute
karta hai.
📚 Practical Tips & Interview Wisdom
• Interview Fact: Explain JavaScript async flow with keywords — Event Loop, Call Stack, Web
APIs, Task Queue, Microtask Queue, Promises.
• Exam Prep Tip: Diagram bana kar sequence likho — Code → Call Stack → Web API → Task
Queues → Event Loop → Execute.
🚀 JavaScript Popular Web APIs Breakdown
🕰️ Timer API (setTimeout, setInterval)
• Definition:
Ye API scheduled tasks (delayed ya repeated execution, e.g. setTimeout, setInterval) ke liye use
hoti hai.
• Use-case:
Animation delay, timed alerts, debouncing.
• Video Reference:
Example code mein setTimeout(()=>[Link]("2000ms"), 2000) ka use.
🌍 Geolocation API
• Definition:
Is API se browser user ki current location fetch kar sakta hai
([Link]).
• Use-case:
Maps, food delivery location tracking, weather updates apps.
• Video Reference:
[Link](success, error) —
success/error callback.
📡 Fetch API (Network Requests)
• Definition:
Async network request (HTTP fetch), promises ke through response handle karta hai.
• Use-case:
Data fetch from backend, REST APIs, AJAX requests.
• Video Reference:
"Fetch API" mentioned for network operations as an async example in browser environment.
💾 Storage API
• Definition:
Data ko (string format) browser par local ya session-wise store karne ke liye — localStorage,
sessionStorage.
• Use-case:
User preferences, tokens, offline data caching.
• Video Reference:
"Storage API" name mentioned among multiple browser APIs.
🧭 DOM API
• Definition:
Webpage ke structure ko dynamically modify karna/render karna
([Link], .querySelector, etc).
• Use-case:
Dynamic UI updates, user input handling.
• Video Reference:
DOM/HTML API ka reference in browser environment components.
🗂️ File API
• Definition:
Files ko read/write ya manipulate karne ka browser interface (input type="file", FileReader).
• Use-case:
File upload, CSV reading, client-side file processing.
• Video Reference:
"File API" as browser provided feature.
⚡ Performance API
• Definition:
Webpage ya code execution timing & resource usage ko measure karne ke liye use hoti hai
([Link]()).
• Use-case:
Speed optimization, analytics, load time measurement.
• Video Reference:
"Performance API" listed as one of the browser capabilities.
📋 Table: Web APIs & Use-cases
Icon Web API Short Definition Typical Use-case/Example
🕰️ Timer API Delayed/repeated tasks setTimeout, setInterval
🌍 Geolocation API User location access Live tracking on maps
📡 Fetch API Network calls REST API data fetching
💾 Storage API Browser storage (local/session) Save theme, login token
🧭 DOM API HTML/DOM editing Dynamic form, UI change
🗂️ File API File access/upload Read CSV/file upload
⚡ Performance API Perf. measure/timing Page load speed logging