JavaScript interview questions & answers

Variables ko samjho naam-likhe dabbe (boxes) jaise, jisme cheezein rakhte ho. Par teen tarah ke dabbe hote hain alag rules ke saath: ek jise khaali karke, dobara bhar bhi sakte ho AUR badal bhi sakte ho, ek jise sirf dobara bhar sakte ho, aur ek jo pack hone ke baad hamesha ke liye seal ho jata hai.

JavaScript me yeh teen dabbe hain var, let, aur const.

• var — purana dabba. Yeh function-scoped hai (if/for ke { } block se bahar leak ho jata hai), re-declare aur reassign dono ho sakta hai, aur hoisted hai — pehle hi ban jata hai aur undefined se bhar jata hai.
• let — modern dobara-bharne wala dabba. Yeh block-scoped hai (sirf nazdeeki { } ke andar zinda), reassign ho sakta hai par same scope me re-declare nahi.
• const — seal dabba. Block-scoped, aur iski binding reassign nahi ho sakti. Value declaration ke waqt hi deni padti hai.

Scope = variable kahan dikhta hai. Global scope = har jagah. Function scope = sirf us function ke andar. Block scope = sirf { } ke andar (let/const ke liye kaam karta hai, var ke liye NAHI).

🌍 Real-world example: for loop me let i har iteration ko uska APNA i deta hai, isliye 3 click-handlers 0, 1, 2 yaad rakhte hain. var i ke saath teeno ek hi i share karte hain aur aakhri value (3) log karte hain — yeh classic interview bug hai.

💡 Hoisting = JavaScript code chalane se pehle declarations ko unke scope ke top par utha leta hai.

💡 Temporal Dead Zone (TDZ) = block ke shuru se le kar let/const declare hone tak ka gap. let/const hoisted TO hote hain par is zone me uninitialised rehte hain — inhe chhuo to ReferenceError aata hai. (var yahan undefined deta hai, koi error nahi.)

💡 const ka gotcha = const BINDING ko lock karta hai, value ko nahi. const object ya array phir bhi mutable hota hai — properties change kar sakte ho ya push kar sakte ho; bas naam ko poore naye object par point nahi kar sakte.

Rules cheat-sheet: var → re-declare ✔ reassign ✔. let → re-declare ✘ reassign ✔. const → re-declare ✘ reassign ✘ (par object ka andar mutable ✔).

Standard definition (interview me bolo): In JavaScript, var is function-scoped and hoisted as undefined, while let and const are block-scoped and hoisted into the Temporal Dead Zone; const additionally prevents reassignment of the binding but not mutation of the referenced object.

if (true) {
  var a = 1;
  let b = 2;
}
console.log(a); // 1  (var leaked out)
// console.log(b); // ReferenceError: b is not defined

const user = { name: 'Aisha' };
user.name = 'Bilal';   // allowed: object is mutable
console.log(user.name);
// user = {};           // TypeError: Assignment to constant variable.

Socho ek book ka printed page versus ek library card. Agar main ek page ki photocopy kar ke tumhe de doon, tum apni copy pe likho — meri page saaf rehti hai, do alag cheezein. Lekin agar main tumhe ek library card doon jo shelf B-42 ko point karta hai, aur tum wahan ja ke book hila do, to jab main B-42 jaunga book meri liye bhi hili hui milegi — humne ek hi cheez share ki, do nahi.

JavaScript me, values do family me aati hain. Primitives photocopy jaise behave karte hain: copy-by-value. Objects library card jaise: copy-by-reference (tum address copy karte ho, book nahi).

7 primitive types hain: string, number, boolean, null, undefined, symbol, bigint. Baaki sab — arrays, functions, dates, plain {} — object hai.

typeof type batata hai: typeof "hi" → "string", typeof 42 → "number", typeof true → "boolean", typeof undefined → "undefined", typeof 10n → "bigint", typeof Symbol() → "symbol". Par famous bug dekho: typeof null === "object" — yeh JavaScript ki historic galti hai jo backward compatibility ke liye kabhi fix nahi ho sakti. Aur typeof function(){} → "function" (object ka special sub-case).

🌍 Real-world example: Tum ek user object ko "backup" karne ke liye copy karte ho (const backup = user), phir user.name change karte ho, aur hairaan ho jaate ho ki backup.name bhi badal gaya. Woh kabhi do object the hi nahi — dono variables same address pakde hue the. Yahi ek galat samajh real-world me bahut saare bugs ki wajah banti hai.

💡 primitive = ek simple, single, immutable value (ek plain fact jaise 5 ya "cat"). 💡 reference = memory me object ka address, khud object nahi.

null vs undefined: undefined = JS ka default "abhi kuch nahi hai" — variable declare hua par assign nahi, ya missing property. null = tum jaan-boojh kar "intentionally empty" set karte ho. Yaad rakhne ka tareeka: undefined engine ki absence hai, null tumhari absence hai.

NaN = "Not a Number", woh number jo tootey hue math se milta hai jaise 0/0 ya Number("abc"). Gotcha: typeof NaN → "number" (yeh number type me hi rehta hai), aur NaN === NaN → false (yeh kisi ke barabar nahi, khud ke bhi nahi). Isko test karne ke liye Number.isNaN(x) use karo.

Standard definition (interview me bolo): JavaScript has 7 primitive types (string, number, boolean, null, undefined, symbol, bigint) that are copied by value and are immutable, and objects (including arrays and functions) that are copied by reference; typeof identifies a value's type, with the historic quirk that typeof null returns "object".

let a = 10;
let b = a;   // copy-by-value
b++;
console.log(a, b); // 10 11 — independent

let user = { name: "Aman" };
let backup = user; // copy-by-REFERENCE (same address)
backup.name = "Riya";
console.log(user.name); // "Riya" — shared object mutate hua

console.log(typeof null, NaN === NaN); // object false

Kya bana rahe hain: Ek Todo app pure vanilla JavaScript mein — na React, na framework, na koi library. Bas ek input, ek Add button, aur ek list jismein items add karo, done tick karo, aur delete karo. Chhota hai, par ye poore UI programming ka sabse important pattern drill karta hai: apna data ek jagah rakho (state), aur screen ko us data SE draw karo. Ye pakka aa gaya, to aage React obvious lagega — kyunki React bas isi pattern ko automate karta hai.

Concepts jo ye sikhata hai: state ek plain array ke roop mein, render()-from-state pattern, addEventListener, input value padhna, event delegation (poori list ke liye ek hi listener), immutable-ish updates (map/filter), aur safe id generation.

---

Step 0 — Mental model (pehle ye padho, 60 second)

Ye wo trap hai jismein lagbhag har beginner girta hai: wo todo add karne ke liye khud ek <li> bana ke append karta hai, delete ke liye khud us <li> ko dhoond ke hataata hai, toggle ke liye khud us <li> pe class flip karta hai. Teen alag jagah, sab haath se DOM ko chhed rahe hain. Paanch minute chalta hai, phir DOM aur data alag ho jaate hain aur sab kuch toot-ta hai.

Hum disciplined tarika apnaate hain — sirf EK direction:

State single source of truth hai. Screen bas state ki ek tasveer hai.

Hum ek array rakhte hain todos. Wo array HI sach hai. Ek function hai render(), jiska sirf ek kaam: todos array ko dekho aur screen ki list ko usse match karne ke liye dobara banao. Hum kabhi DOM ko seedha edit karke add/remove/toggle nahi karte. Uski jagah har baar do saaf steps:

1. Data badlo (todos array ko push / map / filter karo).
2. render() call karo — wo list ko wipe karke array se fresh dobara draw karta hai.

💡 State = wo data jisse tumhara UI bana hai. Yahaan wo todos array hai.

💡 render() = ek function jo state padh ke usse match karti DOM banata hai. DOM state ka output hai, koi alag cheez nahi jise tum edit karo.

Neeche har feature bas "array badlo, phir render" hai. Ye picture dimaag mein rakho. Ab banate hain.

---

Step 1 — HTML skeleton

Pehle bare page. Teen cheezein: ek text box, ek Add button, aur ek khaali <ul> list ke liye.

<input id="todo-input" type="text" placeholder="What needs doing?" />
<button id="add-btn">Add</button>
<ul id="list"></ul>

<script src="app.js"></script>

Ho ye raha hai: <ul id="list"> khaali shuru hota hai — hum HTML mein koi <li> haath se nahi likhte. Jo bhi <li> tumhe dikhega wo JavaScript ne todos array se banaya hai. Teen id (todo-input, add-btn, list) hamare JS ke pakadne ke hook hain. Bas itna HTML — ye phir kabhi nahi badalta. Saari jaan app.js mein hai.

💡 Script ko neeche (elements ke baad) load karte hain taaki jab script chale to elements DOM mein pehle se ho aur document.getElementById unhe dhoond sake.

---

Step 2 — State + ek render() jo usse draw kare

Ab app ka dil. Do cheezein: state array, aur wo function jo use DOM mein badalta hai.

const input = document.getElementById('todo-input');
const addBtn = document.getElementById('add-btn');
const list = document.getElementById('list');

// STATE — single source of truth
let todos = [];

// render() — state padho, <ul> ko usse match karne ke liye dobara banao
function render() {
  list.innerHTML = '';                     // 1. jo hai use wipe karo
  for (const todo of todos) {              // 2. state ke har item ke liye ek <li>
    const li = document.createElement('li');
    li.dataset.id = todo.id;               // id ko element pe stamp karo
    li.className = todo.done ? 'done' : '';
    li.textContent = todo.text;

    const del = document.createElement('button');
    del.textContent = 'x';
    del.className = 'delete';
    li.appendChild(del);

    list.appendChild(li);                  // 3. page mein daalo
  }
}

render();   // load pe ek baar draw (abhi khaali list)

Ho ye raha hai — trace karo:

1. Hum apne teen elements ek baar, upar, grab karke variables mein rakhte hain taaki har baar dobara query na karein.
2. todos = [] — state khaali shuru.
3. render() teen kaam karta hai: (a) list.innerHTML = '' poori list blank karta hai, (b) todos pe loop karke har item ka ek <li> banata hai, (c) har <li> ko <ul> mein append karta hai.

Asli aadat: render() har baar list ko scratch se dobara banata hai — wo kabhi "bas naya wala add" ya "bas ek hataao" try nahi karta. Purani list phenk ke current sach dobara draw karta hai. Yahi DOM aur state ko perfectly sync rakhta hai — wo drift kar hi nahi sakte, kyunki har render pe DOM array se regenerate hota hai.

💡 li.dataset.id = todo.id <li> pe data-id attribute likhta hai. Isse hum baad mein (Step 4 mein) padhenge taaki pata chale click kiya button kis todo ka hai. Yahi DOM element ko wapas array wale item se jodne ka tarika hai.

💡 textContent (na ki innerHTML) user ka text plain text ke roop mein daalta hai — to agar koi <script> type kare to wo literal characters dikhega, chalne wala HTML nahi. Chhoti aadat, badi security jeet.

---

Step 3 — Todo add karo (array badlo, phir render)

Ab Add button ko chalu karo. Ye pehli baar poora loop hai.

let nextId = 1;   // simple incrementing id counter

function addTodo() {
  const text = input.value.trim();
  if (text === '') return;                 // khaali input ignore

  todos.push({ id: nextId++, text: text, done: false });  // 1. state badlo
  input.value = '';                        // box khaali karo
  render();                                // 2. state se dobara draw
}

addBtn.addEventListener('click', addTodo);
input.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') addTodo();        // Enter se bhi add
});

Ho ye raha hai — poora trigger trace karo, click-by-click:

1. Tum "Buy milk" type karke Add click karte ho (ya Enter dabate ho).
2. addTodo() chalta hai. input.value.trim() jo type kiya wo padhta hai aur extra spaces trim karta hai. Khaali ho to hum jaldi return kar dete hain taaki blank rows na banein.
3. todos.push({ id: nextId++, text, done: false }) — hum state array mein ek naya object add karte hain. Har todo { id, text, done } hai: ek unique id, text, aur ek done flag jo false se shuru hota hai.
4. Input box khaali karte hain taaki agle entry ke liye ready ho.
5. render() chalta hai — <ul> wipe, ab 1-item array pe loop, ek <li> banata aur append karta hai. Naya item screen pe aa jata hai.

Yahi poora pattern hai: array mein push → render() <ul> dobara banata hai → DOM update. Humne yahaan <li> bana ke khud list mein nahi ghusaaya. Humne sirf data chhua; drawing render() ne ki.

💡 id: nextId++ kyun aur Math.random() kyun nahi? Ids unique hone chahiye — hum unse sahi todo dhoondte hain jab tum delete click karo. Math.random() (kabhi-kabhi) do baar wahi number de sakta hai → do todos ki ek hi id → ek delete karne pe galat item delete, ek badhiya intermittent bug. Counter (1, 2, 3, …) ya crypto.randomUUID() (guaranteed-unique string) kabhi collide nahi karta. Inmein se ek use karo, random kabhi nahi.

---

Step 4 — Event delegation (pro move)

Ye interesting problem hai. Har <li> mein ek delete button hai, aur text pe click karna done toggle karna chahiye. Par page load pe <li> abhi exist nahi karte — wo baad mein bante hain, aur har render() pe dobara bante hain. To hum unpe pehle se listeners attach nahi kar sakte.

Naive fix hai listener ko har button pe render() ke andar attach karna, har dobara draw pe. Wo chalta hai par wasteful aur error-prone hai: har chhote change pe darjano listeners dobara wire karte ho. Saaf solution hai event delegation.

// EK listener <ul> pe — SAARE items ke clicks handle karta hai, ab wale aur future wale
list.addEventListener('click', (e) => {
  const li = e.target.closest('li');
  if (!li) return;                         // khaali jagah click? ignore
  const id = Number(li.dataset.id);        // kaun sa todo? stamped id padho

  if (e.target.classList.contains('delete')) {
    deleteTodo(id);                        // x click → delete
  } else {
    toggleTodo(id);                        // row click → done toggle
  }
});

Ho ye raha hai — ye poora trick kyun hai:

Clicks bubble karte hain: delete button pe click uske <li> se hote hue <ul> tak upar jaata hai. To har button pe listener ki jagah, hum ek listener parent <ul> pe rakhte hain aur har child ka click usmein float hone dete hain.

• e.target wo exact element hai jo tumne click kiya (button, ya <li> text).
• e.target.closest('li') jo bhi click kiya usse upar chalke enclosing <li> dhoondta hai — wahi row hai.
• li.dataset.id wo data-id wapas padhta hai jo humne render() mein stamp kiya tha, batata hai array mein kaun sa todo ye row hai.
• Phir branch: click delete class wali cheez pe tha? Delete karo. Warna toggle karo.

💡 Event delegation = ek listener parent pe attach karo, aur event.target se pata karo kaun sa child click hua. Kyunki parent (<ul>) permanent hai, ye apne aap baad mein add hue items ko bhi cover karta hai — har render pe dobara wiring nahi. Yahi wajah hai ki delegation per-item listeners se behtar hai.

💡 Number(li.dataset.id) — dataset values hamesha strings hote hain ("3"), par hamare array ids numbers hain (3). Hum convert karte hain taaki find/filter ke andar === comparison match kare. Ise bhoolna ek classic "delete kyun nahi ho raha" bug hai.

---

Step 5 — Toggle aur delete (map / filter, phir render)

Ab wo do handlers jinhe delegation call karta hai. Dono wahi discipline: naya array banao, todos ko reassign karo, phir render().

function toggleTodo(id) {
  todos = todos.map(t =>
    t.id === id ? { ...t, done: !t.done } : t   // matching wale pe done flip
  );
  render();
}

function deleteTodo(id) {
  todos = todos.filter(t => t.id !== id);        // is id ke ALAWA sabko rakho
  render();
}

Ho ye raha hai:

• toggle: map har todo pe chalta hai. Jiski id match kare, hum ek naya object { ...t, done: !t.done } return karte hain — ek copy jismein done flip hai. Baaki sab jaisa hai waisa return. map ek bilkul naya array deta hai, hum todos reassign karte hain, phir render() dobara draw karta hai — matched row ab class="done" paata hai (Step 2 todo.done check karta hai), to CSS use strike-through kar sakta hai.
• delete: filter har us todo ko rakhta hai jiski id click ki hui nahi hai — exactly clicked item ko gira deta hai. Naya array, reassign, render(). Row gayab ho jaata hai kyunki wo ab us array mein nahi jismein se render() draw karta hai.

Dhyaan do dono map/filter use karte hain, jo naye arrays return karte hain, jagah pe mutate nahi. Hum splice bhi kar sakte the, par fresh array banana wahi mindset hai jo React aage demand karega ("state mutate mat karo") — abhi se achhi aadat.

💡 { ...t, done: !t.done } — spread ...t t ke saare fields copy karta hai, phir done: !t.done sirf usse override karta hai. Natija: wahi todo, done flipped, ek naye object ke roop mein.

---

🔎 Poora flow (wiring ka recap)

Ye raha har trigger, end to end:

1. Page load → variables grab → todos = [] → render() khaali list draw karta hai.
2. "Buy milk" type + Add click → addTodo() → todos.push({id, text, done:false}) (state badli) → render() <ul> dobara banata hai → item aa jata hai.
3. Row text click → click <ul> ke EK listener tak bubble karta hai → e.target.closest('li') row dhoondta hai → id padho → delete button nahi → toggleTodo(id) → map done flip karta hai → render() → row done dikhata hai (strikethrough).
4. x click → wahi listener tak bubble → e.target ki class delete hai → deleteTodo(id) → filter use gira deta hai → render() → row gayab.

Har ek feature wahi do beats hai: todos array badlo → render() call karo. Tumne kabhi DOM ko surgically edit nahi kiya. Array sach hai; screen uska reflection. Yahi wo discipline hai jo bade apps (aur React) ko manageable banati hai.

---

✅ Jo tumne abhi seekha

• State ek plain array — todos single source of truth hai; har todo { id, text, done }.
• render()-from-state pattern — ek function state se DOM wipe karke dobara banata hai; tum DOM ko tukdo mein edit nahi karte.
• Universal loop — data badlo → render() call karo. Har feature (add, toggle, delete) bas yahi hai.
• Event delegation — parent <ul> pe EK listener, event.target (+ closest) se pata karo kaun sa child click hua; baad mein add hue items apne aap cover, har render pe dobara wiring nahi.
• map / filter for updates — delete ke liye filter, toggle ke liye map (spread ke saath) — mutate ki jagah naye arrays return.
• Safe ids — incrementing counter ya crypto.randomUUID(), Math.random() kabhi nahi (collisions delete/toggle todte hain).
• dataset se DOM ↔ data jodna — har <li> pe data-id stamp, click pe wapas padho taaki pata chale kis array item pe act kar rahe ho (Number(...) yaad rakho — dataset hamesha strings).

// --- HTML ---
// <input id="todo-input" type="text" placeholder="What needs doing?" />
// <button id="add-btn">Add</button>
// <ul id="list"></ul>

// --- app.js ---
const input = document.getElementById('todo-input');
const addBtn = document.getElementById('add-btn');
const list = document.getElementById('list');

let todos = [];        // STATE — single source of truth
let nextId = 1;        // safe, collision-free ids (Math.random nahi!)

function render() {
  list.innerHTML = '';                       // wipe
  for (const todo of todos) {                // state se dobara banao
    const li = document.createElement('li');
    li.dataset.id = todo.id;
    li.className = todo.done ? 'done' : '';
    li.textContent = todo.text;

    const del = document.createElement('button');
    del.textContent = 'x';
    del.className = 'delete';
    li.appendChild(del);

    list.appendChild(li);
  }
}

function addTodo() {
  const text = input.value.trim();
  if (text === '') return;
  todos.push({ id: nextId++, text, done: false });  // state badlo
  input.value = '';
  render();                                          // dobara draw
}

function toggleTodo(id) {
  todos = todos.map(t => t.id === id ? { ...t, done: !t.done } : t);
  render();
}

function deleteTodo(id) {
  todos = todos.filter(t => t.id !== id);
  render();
}

addBtn.addEventListener('click', addTodo);
input.addEventListener('keydown', (e) => { if (e.key === 'Enter') addTodo(); });

// EVENT DELEGATION — poori list ke liye ek listener
list.addEventListener('click', (e) => {
  const li = e.target.closest('li');
  if (!li) return;
  const id = Number(li.dataset.id);
  if (e.target.classList.contains('delete')) deleteTodo(id);
  else toggleTodo(id);
});

render();