JavaScript

Complete Study Guide

Variables • Data Types • Operators • Loops • Functions • Arrays • Objects • Strings • Dates
──────────────────────────────

Ye document do files se bana hai:

[Link] + JavaScript_Cheatsheet.docx

JavaScript Complete Study Guide | Page 1 of 40

1. Variables (var, let, const)

Variable ek container hai jisme data store hota hai. JavaScript mein teen keywords hain: var, let,
aur const.

Scope Comparison Table

Keyword Scope Redeclare? Reassign? Kab Use Karein?

var Global / Function Haan Haan Purana code (avoid karein)

let Block { } Nahi Haan Jab value change ho sakti ho

const Block { } Nahi Nahi Jab value fix ho (recommended)

Rules
• let aur const ko use se pehle declare karna zaruri hai
• Ek hi scope mein let/const dobara declare nahi ho sakta
• const use karo jab value change na ho — ye best practice hai
• var global scope mein hota hai, isliye bugs aa sakte hain

Example Code
let name = "Maaz"; // value badal sakti hai
const PI = 3.14; // value fix hai
var old = "avoid this"; // global scope, purana tarika

JavaScript Complete Study Guide | Page 2 of 40

2. Data Types

Data type batata hai value ka nature kya hai — text, number, ya kuch aur.

Primitive Types (Simple Values)

Data Type Example Description

String "Hello", 'World' Text data

Number 10, 3.14, -5 Integer ya decimal number

Boolean true, false Sirf do values — true ya false

Null null Intentionally empty value

Undefined let x; Variable declared lekin assigned nahi

Symbol Symbol('id') Unique identifier (advanced use)

BigInt 9007199254740991n Bahut bade integers ke liye

Reference Types (Complex Values)

Data Type Example Description

Object {name: "Maaz", age: 20} Key-value pairs

Array [1, 2, 3, 4] Ordered list of values

Function function add(a,b){} Reusable code block

Date new Date() Date aur time

RegExp /abc/ String pattern matching

Map new Map() Key-value pairs (any key type)

Set new Set([1,2,3]) Unique values ka collection

JavaScript Complete Study Guide | Page 3 of 40

3. Operators

Operator data ya values pe kaam karte hain — calculations ya comparisons ke liye.

Types of Operators
Type Symbols Use

Arithmetic + - * / % ** Math calculations karna

Assignment = += -= *= /= Variable mein value assign karna

Comparison == === != !== > < >= <= Values compare karna

Logical && || ! True/false logic

Ternary condition ? a : b Short if-else

Important: == vs ===
• == (loose equality): sirf value compare karta hai, type ignore karta hai
• === (strict equality): value aur type dono compare karta hai — ALWAYS use this!
5 == "5" // true (type ignore hua)
5 === "5" // false (types alag hain: number vs string)

Ternary Operator Example

let age = 20;
let result = age >= 18 ? "Adult" : "Minor";
// age 18+ hai? haan → "Adult", nahi → "Minor"

JavaScript Complete Study Guide | Page 4 of 40

4. Conditions (if / else / switch)

Conditional statements program ko decide karne mein help karte hain ke kaunsa block execute
hoga.

if / else if / else
let x = 15;

if(x > 10) {

[Link]("10 se bada hai");
} else if(x === 10) {
[Link]("exactly 10 hai");
} else {
[Link]("10 se chota hai");
}

switch Statement
switch tab use karo jab ek variable ki multiple exact values check karni hon — if-else se zyada
readable hota hai.

let day = 2;

switch(day) {
case 1:
[Link]("Monday");
break;
case 2:
[Link]("Tuesday");
break;
default:
[Link]("Koi aur din");
}

if vs switch — Kab Kya Use Karein?

Situation Use Karo

Range check karna ho (x > 10, x < 5) if / else if

Ek value ki exact multiple cases check karni hon switch

JavaScript Complete Study Guide | Page 5 of 40

 Situation Use Karo

Sirf 2 options hain (true/false) if / else ya ternary

Complex conditions (&&, ||) if / else

JavaScript Complete Study Guide | Page 6 of 40

5. Loops

Loops kaam ko repeatedly execute karte hain jab tak condition true hai.

Kaunsa Loop Kab Use Karein?

Situation Loop Use Karo

Exact number of iterations pata hai for

Pata nahi kitni baar chalega, condition par depend while

Kam se kam ek baar zarur chalana hai do...while

Object ke keys chahiye for...in

Array ya string ke values chahiye for...of

Array ke har element pe kaam karna forEach()

Loop Syntax Examples

// for loop — jab iterations pata hain
for(let i = 0; i < 5; i++) { [Link](i); }

// while loop — condition par depend

let i = 0;
while(i < 5) { [Link](i); i++; }

// for...of — array values ke liye

let arr = [10, 20, 30];
for(let val of arr) { [Link](val); }

// for...in — object keys ke liye

let obj = {name: "Maaz", age: 20};
for(let key in obj) { [Link](key, obj[key]); }

// do...while — pehle chalao, phir check karo

let i = 0;
do {
[Link](i);
i++;
} while(i < 5);
// NOTE: kam se kam ek baar zarur chalega chahe condition false ho!

JavaScript Complete Study Guide | Page 7 of 40

JavaScript Complete Study Guide | Page 8 of 40
6. Functions

Function reusable code block hai jo input leta hai aur output deta hai.

Function Types
Type Syntax Notes

Regular Function function add(a,b){ return a+b; } Hoisting hoti hai

Arrow Function const add = (a,b) => a+b; Short syntax, modern way

Anonymous Function const greet = function(){ }; Named reference se call

Example
// Regular function
function greet(name) {
return "Hello, " + name + "!";
}
[Link](greet("Maaz")); // Hello, Maaz!

// Arrow function (same kaam, short syntax)

const greet = (name) => "Hello, " + name + "!";

JavaScript Complete Study Guide | Page 9 of 40

7. String Methods

Strings = text ke liye methods. Ye methods original string nahi badlate, naya result return karte
hain.

Common String Methods

Method Kya Karta Hai Example Output

length Characters ki count "Hello".length 5

toUpperCase() Uppercase mein convert "hello".toUpperCase() "HELLO"

toLowerCase() Lowercase mein convert "WORLD".toLowerCase() "world"

trim() Spaces remove karta hai " hi ".trim() "hi"

(dono sides se)

includes() Check karta hai substring "JS".includes("J") true

hai ya nahi

indexOf() Pehli position dhundta hai "hello".indexOf("e") 1

startsWith() Kya string se shuru hota "hello".startsWith("he") true

hai?

endsWith() Kya string se khatam hota "hello".endsWith("lo") true

hai?

slice(s, e) String ka hissa nikalta hai "JavaScript".slice(0,4) "Java"

substring(s, e) slice jaisa, lekin negative "JavaScript".substring(4,10) "Script"

index nahi leta

replace(a, b) Ek part replace karta hai "Hi "Hi JS"

World".replace("World","JS")

split(sep) String ko array mein todta "a,b,c".split(",") ["a","b","c"]

hai

repeat(n) String ko repeat karta hai "Hi ".repeat(3) "Hi Hi Hi "

charAt(i) Index pe character deta hai "hello".charAt(1) "e"

padStart(n, ch) Start se pad karta hai "5".padStart(3,"0") "005"

padEnd(n, ch) End se pad karta hai "5".padEnd(3,"0") "500"

JavaScript Complete Study Guide | Page 10 of 40

8. Arrays

Array ordered list hai values ki, index ke through access hoti hain. Index 0 se shuru hota hai.

Array Banao
let fruits = ["Apple", "Banana", "Mango"];
[Link](fruits[0]); // "Apple"
[Link]([Link]); // 3

Add / Remove Methods

Method Kya Karta Hai Example

push() End mein add karta hai [Link](4)

pop() End se remove karta hai [Link]()

unshift() Start mein add karta hai [Link](0)

shift() Start se remove karta hai [Link]()

splice(i,n) Middle se add/remove (original change [Link](1, 2)

hota hai)

slice(s,e) Part nikalta hai (original same rehta hai) [Link](1, 3)

Search Methods
Method Kya Return Karta Hai Example

indexOf() Pehli position (number ya -1) [Link](3)

lastIndexOf() Aakhri position (number ya - [Link](3)

1)

includes() Boolean (true/false) [Link](3)

find() Pehla matching element [Link](x => x > 10)

findIndex() Pehle match ki index [Link](x => x > 10)

filter() Saare matching elements [Link](x => x > 10)

(new array)

Iteration Methods
Method Kya Karta Hai Return

forEach() Har element pe function chalata hai undefined

JavaScript Complete Study Guide | Page 11 of 40

 Method Kya Karta Hai Return

map() Har element transform karta hai New array

filter() Matching elements return karta hai New array

reduce() Array ko single value mein reduce karta hai Single value

some() Koi ek element condition pass kare? Boolean

every() Sab elements condition pass karein? Boolean

flat() Nested arrays ko flatten karta hai New array

flatMap() map + flat ek saath New array

sort() Array sort karta hai Same array (changed)

reverse() Array ulta karta hai Same array (changed)

JavaScript Complete Study Guide | Page 12 of 40

9. Objects

Object key-value pairs ka collection hai. Arrays mein number index hota hai, Objects mein string
key hoti hai.

Object Banao aur Use Karo

let user = { name: "Maaz", age: 20, city: "Lahore" };

// Access karo
[Link]([Link]); // "Maaz" — dot notation
[Link](user["age"]); // 20 — bracket notation

// Add karo
[Link] = "maaz@[Link]";

// Loop karo
for(let key in user) { [Link](key, ":", user[key]); }

Arrays vs Objects
Feature Array Object

Index Type Number (0, 1, 2...) String (key)

Use Karo Jab Ordered list chahiye Named data chahiye

Example [1, 2, 3] {name: "Maaz"}

Access arr[0] [Link] ya obj["name"]

JavaScript Complete Study Guide | Page 13 of 40

10. this Keyword

this reference karta hai current object ko jisme code execute ho raha hai.

let obj = {
name: "Maaz",
greet: function() {
[Link]("Hello, " + [Link]); // this = obj
}
};
[Link](); // Hello, Maaz

• Regular function mein: this = jo object ne function call kiya

• Arrow function mein: this = parent scope se inherit hoti hai

JavaScript Complete Study Guide | Page 14 of 40

11. Number Methods

Number object mein built-in methods hain jo numbers check aur convert karne ke liye use hote
hain.

Number Object Methods

Method Description

[Link]() True return karta hai agar integer ho

[Link]() True return karta hai agar NaN ho

[Link]() True return karta hai agar Infinity ya NaN nahi ho

[Link]() True return karta hai agar safe integer ho

[Link]() String ko decimal number mein convert karta hai

[Link]() String ko whole number mein convert karta hai

Math Methods
Method Description Example Output

[Link]() Neeche round karta hai [Link](4.7) 4

[Link]() Upar round karta hai [Link](4.1) 5

[Link]() Nearest integer [Link](4.5) 5

[Link]() 0 se 1 ke beech random [Link]() [Link]

number

[Link]() Sabse bada number [Link](1,2,3) 3

[Link]() Sabse chota number [Link](1,2,3) 1

[Link]() Positive value deta hai [Link](-5) 5

[Link]() Power calculate karta hai [Link](2,3) 8

[Link]() Square root nikalta hai [Link](16) 4

Built-in JavaScript Constructors

JavaScript mein kuch built-in constructors hain jo new keyword se objects banate hain. Inhe
typeof se check kar sakte ho.

JavaScript Complete Study Guide | Page 15 of 40

 Constructor typeof Result Example

new Object() object let obj = new Object();

new Array() object let arr = new Array();

new Map() object let m = new Map();

new Set() object let s = new Set();

new Date() object let d = new Date();

new RegExp() object let r = new RegExp();

new Function() function let f = new Function();

NOTE: Primitive values ke liye new mat use karo (jaise new String(), new Number()) — yeh
objects bana dete hain, primitive nahi, aur bugs create karte hain. Direct likho: let x = "hello";
nahi new String("hello");

JavaScript Complete Study Guide | Page 16 of 40

12. Date Methods

Date object se time aur date handle karte hain JavaScript mein.

let d = new Date(); // current date aur time

Date Get Methods

Method Description Range

getFullYear() Saal 4 digits mein e.g. 2025

getMonth() Mahina (0-based) 0 (Jan) - 11 (Dec)

getDate() Din number 1 - 31

getDay() Weekday number 0 (Sun) - 6 (Sat)

getHours() Ghante 0 - 23

getMinutes() Minute 0 - 59

getSeconds() Second 0 - 59

getMilliseconds() Millisecond 0 - 999

getTime() 1970 se milliseconds mein time Large number

Date Set Methods

Method Description

setFullYear(y) Saal set karo

setMonth(m) Mahina set karo (0-11)

setDate(d) Din set karo (1-31)

setHours(h) Ghante set karo (0-23)

setMinutes(m) Minute set karo (0-59)

setSeconds(s) Second set karo (0-59)

setTime(ms) 1970 se ms mein time set karo

UTC Date Methods (Universal Time)

UTC methods same hain jaise local methods — lekin ye UTC (world standard time) mein kaam
karte hain, tumhari local timezone se independent.

JavaScript Complete Study Guide | Page 17 of 40

 UTC Method Same As (Local) Description

getUTCDate() getDate() UTC din return karta hai

getUTCFullYear() getFullYear() UTC saal return karta hai

getUTCMonth() getMonth() UTC mahina return karta hai

getUTCDay() getDay() UTC weekday return karta hai

getUTCHours() getHours() UTC ghante return karta hai

getUTCMinutes() getMinutes() UTC minutes return karta hai

getUTCSeconds() getSeconds() UTC seconds return karta hai

getUTCMilliseconds() getMilliseconds() UTC milliseconds return karta hai

JS Temporals (Modern Date API)

Temporal ek naya modern API hai jo Date object ki problems fix karta hai. Har use case ke liye
alag object hai.

Temporal Object Kya Represent Karta Hai

[Link] Sirf date — year, month, day (koi time nahi)

[Link] Sirf time (koi date nahi)

[Link] Date + time, lekin koi timezone nahi

[Link] Date + time + timezone sab saath

[Link] Exact UTC moment (timestamp)

[Link] Time ka length — e.g. 2 days, 5 hours

[Link] Sirf saal aur mahina

[Link] Sirf mahina aur din (birthday jaisa)

[Link] Current time — UTC timestamp

// Example: Temporal use karna

const today = [Link]();
[Link]([Link]()); // e.g. 2025-04-29

JavaScript Complete Study Guide | Page 18 of 40

13. Sets aur Maps

Set = unique values store karta hai. Map = key-value pairs, koi bhi key type ho sakti hai.

Set
let s = new Set([1, 2, 2, 3]); // duplicates automatically remove
[Link](4); // 4 add karo
[Link](2); // true — 2 hai ya nahi?
[Link](1); // 1 remove karo
[Link]; // kitne unique elements hain

Map
let m = new Map();
[Link]("name", "Maaz"); // key-value add karo
[Link]("name"); // "Maaz" — value get karo
[Link]("name"); // true
[Link]("name"); // key remove karo
[Link]; // kitne entries hain

Set vs Map vs Object vs Array

Feature Array Object Set Map

Data Store Ordered values Key-value (string Unique values Key-value (any
key) key)

Duplicates Allowed Same key override Not allowed Same key

override

Order Maintained Not guaranteed Maintained Maintained

Use Karo Jab Ordered list Named properties Unique values Flexible keys
chahiye chahiye

JavaScript Complete Study Guide | Page 19 of 40

14. JSON

JSON (JavaScript Object Notation) — data ko string mein convert karke server ya file mein
store/transfer karne ke liye.

let obj = { name: "Maaz", age: 20 };

// Object → String (server ko bhejne ke liye)

let jsonStr = [Link](obj);
// Result: '{"name":"Maaz","age":20}'

// String → Object (server se aane ke baad)

let newObj = [Link](jsonStr);
[Link]([Link]); // "Maaz"

• [Link]() — Object/Array ko JSON string mein convert karta hai

• [Link]() — JSON string ko Object/Array mein convert karta hai
• JSON mein functions nahi ho sakte, sirf data types

JavaScript Complete Study Guide | Page 20 of 40

15. Debugging

Debugging tools help karte hain errors find karne aur code test karne mein. Browser DevTools
mein F12 press karo.

Method Use Example

[Link]() Value print karo — sabse common [Link](x)

[Link]() Error message print karo (red) [Link]("Error!")

[Link]() Warning print karo (yellow) [Link]("Warning!")

[Link]() Array/Object ko table mein dikhao [Link](arr)

debugger; Code ko us point pe rok do debugger;

typeof x Variable ka type check karo typeof "hello" // string

JavaScript Complete Study Guide | Page 21 of 40

17. JS Classes (OOP)

Class ek blueprint hai objects banane ka. Ek baar class banao, phir usse baar baar objects
create karo — ye Object Oriented Programming (OOP) hai.

Class Banana aur Use Karna

class Animal {
constructor(name, sound) { // constructor: object banate waqt chalta hai
[Link] = name;
[Link] = sound;
}

speak() { // method: class ka function

[Link]([Link] + " kehta hai: " + [Link]);
}
}

let dog = new Animal("Dog", "Bhow");

[Link](); // Dog kehta hai: Bhow

Inheritance — Class se Class Banana

extends se ek class doosri class ki cheezein inherit kar sakti hai. super() parent class ka
constructor call karta hai.

class Dog extends Animal { // Animal ki sab cheezein milti hain

constructor(name) {
super(name, "Bhow Bhow"); // parent constructor call karo
}

fetch() { // naya method sirf Dog mein

[Link]([Link] + " ball le aaya!");
}
}

let myDog = new Dog("Bruno");

[Link](); // Bruno kehta hai: Bhow Bhow (inherited)
[Link](); // Bruno ball le aaya! (own method)

JavaScript Complete Study Guide | Page 22 of 40

getters aur setters
class Person {
constructor(firstName, lastName) {
[Link] = firstName;
[Link] = lastName;
}

get fullName() { // getter: property ki tarah access hota hai

return [Link] + " " + [Link];
}

set fullName(name) { // setter: value set karte waqt chalta hai

let parts = [Link](" ");
[Link] = parts[0];
[Link] = parts[1];
}
}

let p = new Person("Maaz", "Khan");

[Link]([Link]); // "Maaz Khan" — getter
[Link] = "Ali Raza"; // setter

Static Methods
static method class pe directly call hota hai, object pe nahi. Utility functions ke liye use hota hai.
class MathHelper {
static add(a, b) { return a + b; }
static multiply(a, b) { return a * b; }
}

[Link](5, 3); // 8 — class pe call (object banane ki zarurat nahi)

[Link](4, 2); // 8

Concept Kya Hai Example

class Object ka blueprint class Car { }

constructor() Object banane ka function constructor(name) { [Link] = name; }

new Class se object banana let c = new Car("Honda");

extends Ek class se doosri banana class ElectricCar extends Car { }

super() Parent class ko call karna super(name);

get / set Property ki tarah access get speed() { return this._speed; }

JavaScript Complete Study Guide | Page 23 of 40

 Concept Kya Hai Example

static Class method (object nahi) static compare(a, b) { }

JavaScript Complete Study Guide | Page 24 of 40

18. Asynchronous JavaScript

Asynchronous matlab: kuch kaam time lagata hai (server se data lana, file padhna). JS in kamon
ko background mein karta hai aur baaki code rokta nahi.

Callbacks — Purana Tarika

function getData(callback) {
setTimeout(() => { // 2 second baad chalta hai
callback("Data aa gaya!");
}, 2000);
}

getData((result) => {
[Link](result); // "Data aa gaya!"
});
[Link]("Ye pehle print hoga!"); // ye pehle print hoga

Promises — Behtar Tarika

Promise ek object hai jo future mein value deta hai — ya succeed karta hai (resolve) ya fail
(reject).

let myPromise = new Promise((resolve, reject) => {

let success = true;

if(success) {
resolve("Kaam ho gaya!"); // success case
} else {
reject("Kuch galat ho gaya!"); // fail case
}
});

myPromise
.then(result => [Link](result)) // resolve hone pe
.catch(error => [Link](error)) // reject hone pe
.finally(() => [Link]("Promise khatam")); // hamesha

JavaScript Complete Study Guide | Page 25 of 40

async / await — Sabse Saaf Tarika (Recommended)
async/await Promises ka hi cleaner version hai. Code synchronous jaisa dikhta hai lekin
asynchronous kaam karta hai.

// async function — ye Promise return karta hai

async function fetchUser() {
try {
let response = await fetch("[Link] // wait karo
let data = await [Link](); // phir ye karo
[Link]([Link]);
} catch(error) {
[Link]("Error:", error); // kuch galat hua
}
}

fetchUser(); // call karo

Promise ke 3 States
State Matlab Agle Step

Pending Kaam chal raha hai (wait) Abhi result nahi aaya

Fulfilled (resolved) Kaam ho gaya — success .then() chalta hai

Rejected Kaam fail ho gaya .catch() chalta hai

Callback vs Promise vs Async/Await

Style Readability Error Handling Modern?

Callback Mushkil (callback hell) Manually karna padta hai Purana

Promise (.then) Theek hai .catch() use karo Okay

async/await Sabse saaf try/catch use karo Recommended

JavaScript Complete Study Guide | Page 26 of 40

19. JS DOM Navigation

DOM (Document Object Model) = browser mein HTML ka ek tree structure. JS se HTML
elements ko select, add, change aur delete kar sakte ho.

Elements Select Karna

// ID se (ek element)
[Link]("myId")

// Class se (sab matching, HTMLCollection)

[Link]("myClass")

// CSS selector se — pehla match

[Link](".card") // class
[Link]("#title") // id
[Link]("h1") // tag

// CSS selector se — SARE matches (NodeList)

[Link](".card")

Content Change Karna

let el = [Link]("msg");

[Link] = "Naya text"; // sirf plain text

[Link] = "<b>Bold</b>"; // HTML bhi inject kar sakte ho
[Link] = "input field ka text"; // form inputs ke liye

Style aur Classes Change Karna

let box = [Link](".box");

// Direct style set karo

[Link] = "red";
[Link] = "20px";

// CSS class add/remove karo (better tarika)

[Link]("active");
[Link]("hidden");
[Link]("dark"); // hai to hata do, nahi to lagao
[Link]("active"); // check karo — true/false

JavaScript Complete Study Guide | Page 27 of 40

Elements Create aur Add Karna
// Naya element banao
let newDiv = [Link]("div");
[Link] = "Main naya hoon!";
[Link]("card");

// Page pe add karo

[Link](newDiv); // body ke end mein
[Link](newDiv); // body ke start mein

// Specific jagah add karo

let parent = [Link]("list");
[Link](newDiv);

Events — User Actions Handle Karna

Event tab fire hota hai jab user kuch kare — button click, key press, mouse move, etc.

let btn = [Link]("myBtn");

// Event listener add karo

[Link]("click", function() {
[Link]("Button click hua!");
});

// Arrow function se (same kaam)

[Link]("click", () => {
[Link]("Click!");
});

Common Events Table

Event Kab Fire Hota Hai Example Element

click Mouse click hone pe Button, link, div

dblclick Double click pe Any element

mouseover Mouse element pe aaye Image, card

mouseout Mouse element se bahar jaye Menu item

keydown Key press karte waqt Input, document

JavaScript Complete Study Guide | Page 28 of 40

 Event Kab Fire Hota Hai Example Element

keyup Key release hone pe Input, document

input Input value change ho Text input, textarea

change Value change + focus hata Select dropdown, checkbox

submit Form submit ho Form element

load Page ya image load ho Window, img

DOMContentLoaded HTML load ho (images nahi) Document

scroll Page scroll ho Window, div

resize Window size change ho Window

JavaScript Complete Study Guide | Page 29 of 40

20. AJAX / Fetch API

AJAX matlab page reload kiye bagair server se data lana ya bhejna. fetch() modern aur
recommended tarika hai.

fetch() — Data Lana (GET Request)

// Server se data lao
fetch("[Link]
.then(response => [Link]()) // response ko JSON mein convert karo
.then(data => {
[Link]([Link]); // data use karo
})
.catch(error => [Link]("Error:", error));

fetch() with async/await (Recommended)

async function getUser(id) {
try {
const response = await fetch(`[Link]

if(![Link]) { // status 200-299 nahi hai?

throw new Error("Server error: " + [Link]);
}

const data = await [Link]();

return data;
} catch(error) {
[Link]("Fetch failed:", error);
}
}

POST Request — Data Bhejna

async function createUser(userData) {
const response = await fetch("[Link] {
method: "POST", // POST, PUT, DELETE, etc.
headers: {
"Content-Type": "application/json"
},
body: [Link](userData) // object ko string mein convert karo
});
const result = await [Link]();

JavaScript Complete Study Guide | Page 30 of 40

 [Link](result);
}

createUser({ name: "Maaz", email: "maaz@[Link]" });

HTTP Methods Table

Method Kab Use Karein Body?

GET Data lana (read only) Nahi

POST Naya data create karna Haan

PUT Poora record update karna Haan

PATCH Kuch fields update karna Haan

DELETE Record delete karna Usually nahi

JavaScript Complete Study Guide | Page 31 of 40

21. JS Modules (import / export)

Modules se code alag files mein organize kar sakte ho. Ek file se functions/variables export karo,
doosri file mein import karo.

Named Export (Multiple cheezein export karo)

// [Link] file
export function add(a, b) { return a + b; }
export function subtract(a, b) { return a - b; }
export const PI = 3.14159;

// [Link] file — import karo

import { add, subtract, PI } from "./[Link]";
[Link](add(5, 3)); // 8
[Link](PI); // 3.14159

Default Export (Ek main cheez export karo)

// [Link] file
export default class User {
constructor(name) { [Link] = name; }
greet() { [Link]("Hello, " + [Link]); }
}

// [Link] file — import karo (koi bhi naam rakh sakte ho)
import User from "./[Link]";
let u = new User("Maaz");
[Link](); // Hello, Maaz

Named vs Default Export

Feature Named Export Default Export

Kitne? Ek file mein multiple Ek file mein sirf ek

Import syntax import { name } from ... import anything from ...

Use karo jab Multiple utilities ho Ek main class/function ho

Rename karna import { add as sum } import mySum from ...

JavaScript Complete Study Guide | Page 32 of 40

Dynamic Import (Zarurat pe load karo)
// Button click pe module load karo (lazy loading)
[Link]("click", async () => {
const module = await import("./[Link]");
[Link]();
});

JavaScript Complete Study Guide | Page 33 of 40

22. Closures aur Scope

Closure tab banta hai jab ek inner function apne outer function ke variables ko yaad rakhta hai —
chahe outer function execute ho chuki ho.

Scope (Variable Visibility)

Scope Type Kahan Accessible Example

Global Scope Puri file mein Window ke bahar declare kiya hua

Function Scope Sirf us function mein function ke andar var/let/const

Block Scope Sirf us { } block mein if/for ke andar let/const

Module Scope Sirf us file mein Module ki top level variables

Closure Example
function makeCounter() {
let count = 0; // ye variable andar hai

return function() { // ye inner function return ho raha hai

count++; // bahar ka count yaad hai!
[Link](count);
};
}

let counter = makeCounter();

counter(); // 1
counter(); // 2
counter(); // 3
// makeCounter khatam ho gayi, lekin count abhi bhi accessible hai!

• Closure ka matlab: function apni surrounding scope ki variables ko yaad rakhta hai
• Use: private variables, factory functions, event handlers

JavaScript Complete Study Guide | Page 34 of 40

23. Error Handling

try/catch se program crash hone se bachao. Error hone pe use handle karo, user ko inform karo.

try / catch / finally

try {
let result = riskyOperation(); // ye fail ho sakta hai
[Link](result);
} catch(error) {
// error ka naam aur message
[Link]([Link]); // e.g. "TypeError"
[Link]([Link]); // e.g. "x is not a function"
} finally {
[Link]("Hamesha chalta hai — success ya fail"); // cleanup
}

Custom Errors Throw Karna

function divide(a, b) {
if(b === 0) {
throw new Error("Zero se divide nahi kar sakte!"); // khud error throw karo
}
return a / b;
}

try {
[Link](divide(10, 0));
} catch(e) {
[Link]([Link]); // "Zero se divide nahi kar sakte!"
}

Common Error Types

Error Type Kab Aata Hai Example

SyntaxError Code likhne mein galti let x = ; (incomplete)

ReferenceError Undefined variable use karna [Link](xyz) — xyz declare nahi

TypeError Wrong type pe operation [Link] — null pe property access

RangeError Value valid range se bahar new Array(-1) — negative size

URIError URI functions mein galti decodeURI("%")

JavaScript Complete Study Guide | Page 35 of 40

JavaScript Complete Study Guide | Page 36 of 40
24. Modern JS Syntax (ES6+)

ES6+ mein bohat saari naye aur useful features aaye jo code ko short aur readable banate hain.

Spread Operator (...)

Spread (...) array ya object ko khol deta hai — unpack karta hai.
// Array spread
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let merged = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

// Object spread
let user = { name: "Maaz", age: 20 };
let updated = { ...user, city: "Lahore" }; // copy + naya field
// { name: "Maaz", age: 20, city: "Lahore" }

Rest Parameter (...)

Rest (...) multiple arguments ko ek array mein pack karta hai.
function sum(...numbers) { // sab arguments ek array mein
return [Link]((a, b) => a + b, 0);
}
sum(1, 2, 3, 4, 5); // 15

Destructuring
Destructuring se array ya object ki values easily variables mein assign kar sakte ho.
// Array Destructuring
let [first, second, third] = [10, 20, 30];
[Link](first); // 10
[Link](second); // 20

// Object Destructuring
let { name, age, city = "Unknown" } = { name: "Maaz", age: 20 };
[Link](name); // "Maaz"
[Link](city); // "Unknown" — default value

// Function parameter destructuring

function greet({ name, age }) {

JavaScript Complete Study Guide | Page 37 of 40

 [Link](`${name} ki umar ${age} saal hai`);
}
greet({ name: "Maaz", age: 20 });

Template Literals
let name = "Maaz";
let age = 20;

// Purana tarika (string concatenation)

let msg1 = "Mera naam " + name + " hai aur umar " + age + " hai";

// Naya tarika — template literals (backtick use karo)

let msg2 = `Mera naam ${name} hai aur umar ${age} hai`;

// Multi-line string
let html = `
<div>
<h1>${name}</h1>
</div>
`;

Optional Chaining (?.)

?. se safely nested properties access kar sakte ho — agar koi null/undefined ho to crash nahi
karta, undefined return karta hai.
let user = { address: { city: "Lahore" } };

// Bina ?. — crash ho sakta hai

let city1 = [Link]; // OK
let zip1 = [Link]; // ERROR: Cannot read properties of undefined

// ?. ke saath — safe hai

let zip2 = user?.address?.zip?.code; // undefined — crash nahi hua

Nullish Coalescing (??)

?? operator: agar left side null ya undefined ho to right side use karo. 0 ya false ko override nahi
karta (ye || se different hai).
let username = null;
let display = username ?? "Guest"; // "Guest" — username null tha

let score = 0;

JavaScript Complete Study Guide | Page 38 of 40

let s1 = score || 100; // 100 — GALAT! 0 falsy hai
let s2 = score ?? 100; // 0 — SAHI! 0 null nahi hai

JavaScript Complete Study Guide | Page 39 of 40

25. Quick Reference — Yaad Rakhne Wali Cheezein

Variable Rules
• const prefer karo — sirf tab let use karo jab value change hogi
• var bilkul mat use karo modern code mein
• let aur const block scope mein hain

Common Mistakes se Bacho

• = (assignment) aur == (comparison) ko confuse mat karo
• === strict equality use karo, == nahi
• Array index 0 se shuru hota hai, 1 se nahi
• getMonth() 0-based hai: January = 0, December = 11
• forEach/map/filter mein await kaam nahi karta — for...of use karo async mein
• ?. optional chaining use karo deep nesting mein
• async function hamesha Promise return karta hai

Best Practices
• const se start karo, zarurat ho to let pe jao
• async/await use karo Promises ke bajaaye — readable hota hai
• try/catch zarur lagao async code mein
• Modules use karo — har file ek kaam kare
• Classes use karo jab related data aur functions ek saath chahiye hon
• Meaningful variable names rakho: x mat likho, userName likho
• [Link]() se debugging karo

Document complete hai! Basics (Variables → Debugging) + Advanced (Classes → Modern

ES6+) — JavaScript ka poora roadmap ek jagah. Happy Coding! 🚀

JavaScript Complete Study Guide | Page 40 of 40