03 JavaScript (The Brain)

HTML/CSS se website sundar dikhti hai, par JavaScript (JS) usme jaan daalti hai. Click hone par kya hoga? Data kaise aayega? Ye sab JS karti hai.

1. Basics (Variables & Functions) 👶

Variables (storage dabba)

Purana var bhool jayie. Modern JS me let aur const use karein.

let name = "Aditya"; // Change ho sakta hai
const pi = 3.14;     // Change NAHI ho sakta (Constant)

Functions

Kaam ko reusable banane ke liye.

// Function Definition
function greet(user) {
  return "Hello " + user;
}

// Call
console.log(greet("Rahul")); // Output: Hello Rahul

2. DOM Manipulation (HTML ko control karna) 🎮

JS HTML ko badal sakti hai. Isse DOM (Document Object Model) kehte hain.

// 1. Element pakadna
const heading = document.getElementById("main-title");
const btn = document.querySelector(".submit-btn");

// 2. Content change karna
heading.innerText = "JS Magic!🪄";
heading.style.color = "blue";

// 3. Event Listener (Click par kuch karna)
btn.addEventListener("click", () => {
  alert("Button Clicked!");
});

3. Modern JS (ES6+) 🚀

Professional developers in features ko use karte hain.

Arrow Functions

Functions likhne ka chhota tareeka.

// Purana
function sum(a, b) { return a + b; }

// Naya (Arrow Function)
const sum = (a, b) => a + b;

Destructuring (Objects ko todna)

const user = { name: "Amit", age: 25 };

// Purana: const name = user.name;
// Naya:
const { name, age } = user;
console.log(name); // Amit

Template Literals (Backticks)

String ke beech variable element.

const msg = `Hello ${name}, aapki age ${age} hai.`;

4. Async JavaScript (Intezaar ka phal) ⏳

JS single threaded hai, par Async/Await se hum heavy tasks (API Calls) handle karte hain.

// Async Function
const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log("Kuch gadbad hai!", error);
  }
};

fetchData();

5. LocalStorage (Temporary Database) 💾

Browser me data save karna (Refresh ke baad bhi rahega).

// Data Save
localStorage.setItem("username", "Aditya");

// Data Get
const user = localStorage.getItem("username");

// Data clear
localStorage.clear();

Summary

JavaScript bahut powerful hai. Start inse karein:

Console.log: Debugging ke liye.
DOM: Screen par cheezein badalne ke liye.
Async/Await: Data fetch karne ke liye.

6. Deep Dive: Advanced Concepts 🧠

Interview me ye topics zaroor pooche jate hain!

A. Closures (Function with Memory)

Jab ek function apne bahar wale function ke variables ko “yaad” rakhta hai, bhale hi bahar wala function execute ho chuka ho.

function outer() {
  let count = 0; // Private variable
  return function inner() {
    count++;
    console.log(count);
  };
}

const counter = outer();
counter(); // 1
counter(); // 2 (Count variable destroy nahi hua!)

Use Case: Data Privacy banane ke liye.

B. Promises vs Async/Await 🤝

Callback Hell (Purana Dukh): Jab callback ke andar callback ho, code padhna mushkil ho jata hai.

Promise (Better):

const myPromise = new Promise((resolve, reject) => {
  let success = true;
  if (success) resolve("Kaam ho gaya!");
  else reject("Failed!");
});

myPromise
  .then(data => console.log(data))
  .catch(err => console.log(err));

Async/Await (Best): Promise ka syntactic sugar. Code synchronous jaisa dikhta hai.

async function doWork() {
  try {
    const data = await myPromise;
    console.log(data);
  } catch (err) {
    console.log(err);
  }
}

C. Prototypes (Inheritance) 🧬

JavaScript me sab kuch Object hai. Har object ke paas ek hidden link hota hai doosre object se, jise Prototype kehte hain.

const human = {
  talk: true
};

const aditya = Object.create(human); // Aditya prototype is Human
console.log(aditya.talk); // true (Inherited from human)

Modern JS me hum class keyword use karte hain, jo under-the-hood prototypes hi use karta hai.

D. The Event Loop (Single Thread Magic) 🎢

Node.js/JS single threaded hai, fir bhi non-blocking kaise?

Call Stack: Jahan code execute hota hai.
Web APIs: Browser ke features (Timer, Fetch) jo background me chalte hain.
Callback Queue: Jab kaam khatam hota hai, callback yahan wait karta hai.
Event Loop: Ye check karta hai “Kya Stack khali hai?“. Agar haan, to Queue se callback utha kar Stack me daal deta hai.

console.log("Start");
setTimeout(() => console.log("Timeout"), 0); // Queue me jayega
console.log("End");

// Output: Start -> End -> Timeout

Samajhne wali baat: setTimeout 0ms bhi ho, tab bhi wo queue me wait karega jab tak main code khatam na ho.

Summary: Ab aapne JS ke Core aur Advanced dono parts cover kar liye hain. Inhe practice karein aur console me run karke dekhein! 💻