JavaScript
Complete Reference Guide
Har code ka example + live output — browser aur [Link] dono ke liye!
Variables • Strings • Arrays • Objects • Loops • Functions • DOM • Async
1. VARIABLES - let, const, var
Cheez store karo naam ke saath
// let - badal sakte ho (recommended)
let naam = 'Rahul';
naam = 'Ali'; // OK - value change kar sakte ho
// const - nahi badal sakte (constant)
const PI = 3.14159;
// PI = 3; // ERROR! const nahi badal sakta
// var - purana tarika (avoid karo)
var score = 95;
// Data Types
let text = 'Hello'; // String
let num = 42; // Number
let decimal = 3.14; // Number (float bhi same)
let flag = true; // Boolean
let nothing = null; // Null (intentionally khaali)
let undef; // Undefined (value assign nahi ki)
// typeof - type check karo
[Link](typeof 'Hello'); // string
[Link](typeof 42); // number
[Link](typeof true); // boolean
[Link](typeof null); // object (JS ka purana bug!)
// OUTPUT:
string
number
boolean
object
Rule: let use karo normal variables ke liye. const use karo jab value kabhi nahi badlegi. var avoid karo - modern JS mein
let/const prefer hai.
2. STRINGS - Text ke saath kaam
let s = 'Hello Duniya';
// Length
[Link]([Link]); // 12
// Upper / Lower
[Link]([Link]()); // HELLO DUNIYA
[Link]([Link]()); // hello duniya
// Template Literals - backtick se (sabse important!)
let naam = 'Rahul';
let umar = 22;
[Link](`Mera naam ${naam} hai aur umar ${umar} hai`);
// includes - word hai ya nahi?
[Link]([Link]('Hello')); // true
[Link]([Link]('World')); // false
// indexOf - position kahan hai?
[Link]([Link]('Duniya')); // 6
// replace
[Link]([Link]('Duniya', 'World')); // Hello World
// split - list/array mein todo
let words = [Link](' ');
[Link](words); // ['Hello', 'Duniya']
// trim - spaces hatao
let messy = ' Rahul ';
[Link]([Link]()); // 'Rahul'
// slice - hissa lo
[Link]([Link](0, 5)); // Hello
[Link]([Link](6)); // Duniya
// repeat
[Link]('Ha'.repeat(3)); // HaHaHa
// startsWith / endsWith
[Link]([Link]('Hello')); // true
[Link]([Link]('ya')); // true
// OUTPUT:
12
HELLO DUNIYA | hello duniya
Mera naam Rahul hai aur umar 22 hai
true | false
6
Hello World
['Hello', 'Duniya']
Rahul
Hello | Duniya
HaHaHa
true | true
3. NUMBERS & MATH
// Basic Math
[Link](10 + 3); // 13
[Link](10 - 3); // 7
[Link](10 * 3); // 30
[Link](10 / 3); // 3.333...
[Link](10 % 3); // 1 (remainder)
[Link](2 ** 8); // 256 (power)
// Math object
[Link]([Link](4.7)); // 5
[Link]([Link](4.9)); // 4
[Link]([Link](4.1)); // 5
[Link]([Link](-10)); // 10
[Link]([Link](16)); // 4
[Link]([Link](3,1,9,5)); // 9
[Link]([Link](3,1,9,5)); // 1
[Link]([Link]); // 3.14159...
// Random number
[Link]([Link]()); // 0.0 to 0.999
[Link]([Link]([Link]()*100)+1); // 1-100
// Number methods
let n = 3.14159;
[Link]([Link](2)); // '3.14' (string return karta hai)
[Link]([Link](42)); // true
[Link]([Link](NaN)); // true
[Link](parseInt('42px')); // 42
[Link](parseFloat('3.14m')); // 3.14
// OUTPUT:
13 | 7 | 30 | 3.333 | 1 | 256
5 | 4 | 5 | 10 | 4
9 | 1 | 3.14159...
0.573 (random)
74 (random 1-100)
3.14 | true | true | 42 | 3.14
4. ARRAYS - List of Items
Python ke list jaisa
let fruits = ['Apple', 'Banana', 'Mango'];
// Access
[Link](fruits[0]); // Apple
[Link](fruits[[Link]-1]); // Mango (aakhri)
// Add karo
[Link]('Orange'); // end mein add
[Link]('Grapes'); // start mein add
[Link](fruits);
// Hatao
[Link](); // aakhri hatao
[Link](); // pehla hatao
// splice - specific position pe add/hatao
[Link](1, 0, 'Kiwi'); // index 1 pe insert
[Link](2, 1); // index 2 se 1 element hatao
// indexOf / includes
[Link]([Link]('Banana')); // 1
[Link]([Link]('Mango')); // true
// join - array ko string banao
[Link]([Link](', ')); // Apple, Banana, Mango
// slice - hissa lo (original safe rahe)
let part = [Link](0, 2);
[Link](part);
// concat - do arrays jodo
let more = ['Pear', 'Cherry'];
let all = [Link](more);
[Link](all);
// sort
let nums = [3,1,4,1,5,9];
[Link]((a,b) => a-b); // ascending
[Link](nums); // [1,1,3,4,5,9]
[Link]((a,b) => b-a); // descending
[Link](nums);
// OUTPUT:
Apple
Mango
['Grapes','Apple','Banana','Mango','Orange']
1 | true
Apple, Banana, Mango
[1,1,3,4,5,9]
[9,5,4,3,1,1]
4b. ARRAY METHODS - forEach, map, filter, reduce
let nums = [1, 2, 3, 4, 5];
// forEach - har element pe kuch karo
[Link](n => [Link](n * 2)); // 2 4 6 8 10
// map - nayi array banao (transform karo)
let doubled = [Link](n => n * 2);
[Link](doubled); // [2,4,6,8,10]
let names = ['ali', 'bob', 'cara'];
let upper = [Link](n => [Link]());
[Link](upper); // ['ALI','BOB','CARA']
// filter - condition pe chhano
let evens = [Link](n => n % 2 === 0);
[Link](evens); // [2,4]
let longNames = [Link](n => [Link] > 3);
[Link](longNames); // ['cara']
// find - pehla match wala element lo
let first = [Link](n => n > 3);
[Link](first); // 4
// reduce - sab ko ek value mein compress karo
let total = [Link]((sum, n) => sum + n, 0);
[Link](total); // 15
// every / some
[Link]([Link](n => n > 0)); // true (sab positive?)
[Link]([Link](n => n > 4)); // true (koi > 4 hai?)
// flat - nested array flatten karo
let nested = [1, [2,3], [4,[5,6]]];
[Link]([Link]()); // [1,2,3,4,[5,6]]
[Link]([Link](2)); // [1,2,3,4,5,6]
// OUTPUT:
2 4 6 8 10
[2,4,6,8,10]
['ALI','BOB','CARA']
[2,4]
['cara']
4
15
true | true
[1,2,3,4,5,6]
5. OBJECTS - Key-Value Data
Python ke dictionary jaisa
let student = {
naam: 'Rahul',
umar: 22,
city: 'Mumbai',
greet() { // method (function inside object)
return `Hello, I'm ${[Link]}`;
}
};
// Access - dot notation ya bracket
[Link]([Link]); // Rahul
[Link](student['umar']); // 22
[Link]([Link]()); // Hello, I'm Rahul
// Add / Update
[Link] = 'rahul@[Link]'; // nayi property
[Link] = 23; // update
// Delete
delete [Link];
// Keys / Values
[Link]([Link](student)); // ['naam','umar','email']
[Link]([Link](student)); // ['Rahul',23,'rahul@...']
// Loop
for (let key in student) {
[Link](key, ':', student[key]);
}
// Destructuring - values seedha variables mein lo
let { naam, umar } = student;
[Link](naam, umar); // Rahul 23
// Spread operator - copy/merge
let copy = { ...student };
let merged = { ...student, score: 95 };
// Optional chaining - safely nested access
let user = { profile: { city: 'Delhi' } };
[Link](user?.profile?.city); // Delhi
[Link](user?.address?.zip); // undefined (error nahi!)
// OUTPUT:
Rahul | 22
Hello, I'm Rahul
['naam','umar','email']
naam : Rahul | umar : 23
Rahul 23
Delhi | undefined
6. CONDITIONS - if/else & switch
// if / else if / else
let score = 78;
if (score >= 90) {
[Link]('Grade A');
} else if (score >= 75) {
[Link]('Grade B');
} else if (score >= 60) {
[Link]('Grade C');
} else {
[Link]('Fail');
}
// Ternary operator
let status = score >= 40 ? 'Pass' : 'Fail';
[Link](status); // Pass
// Nullish coalescing ??
let name = null;
[Link](name ?? 'Guest'); // Guest
// switch
let day = 'Monday';
switch(day) {
case 'Monday':
case 'Tuesday':
[Link]('Weekday');
break;
case 'Saturday':
case 'Sunday':
[Link]('Weekend!');
break;
default:
[Link]('Din batao');
}
// Logical operators
let age = 20, hasID = true;
if (age >= 18 && hasID) [Link]('Entry milegi');
if (age < 18 || !hasID) [Link]('Entry nahi');
// OUTPUT:
Grade B
Pass
Guest
Weekday
Entry milegi
7. LOOPS - for, while, for...of
// Classic for loop
for (let i = 1; i <= 5; i++) {
[Link](i + ' '); // 1 2 3 4 5
}
// for...of - arrays pe (Python ke for...in jaisa)
let fruits = ['Apple', 'Banana', 'Mango'];
for (let fruit of fruits) {
[Link](fruit);
}
// for...in - objects ke keys pe
let person = {naam:'Rahul', umar:22};
for (let key in person) {
[Link](key + ': ' + person[key]);
}
// while
let count = 0;
while (count < 3) {
[Link]('Count:', count);
count++;
}
// do...while - kam se kam ek baar chalega
let x = 10;
do {
[Link]('x =', x);
x++;
} while (x < 10); // condition false hai phir bhi ek baar chala
// break / continue
for (let i = 0; i < 10; i++) {
if (i === 5) break; // 5 pe band
if (i % 2 === 0) continue; // even skip
[Link](i); // 1 3
}
// OUTPUT:
1 2 3 4 5
Apple | Banana | Mango
naam: Rahul | umar: 22
Count: 0 | Count: 1 | Count: 2
x = 10
1 3
8. FUNCTIONS - 3 tarike se likhne ke
// 1. Function Declaration
function greet(naam) {
return `Namaste, ${naam}!`;
}
[Link](greet('Rahul')); // Namaste, Rahul!
// 2. Function Expression
const add = function(a, b) {
return a + b;
};
[Link](add(5, 3)); // 8
// 3. Arrow Function (modern, sabse chhota)
const multiply = (a, b) => a * b;
[Link](multiply(4, 5)); // 20
const square = x => x ** 2; // single param - brackets optional
[Link](square(7)); // 49
// Default parameters
function power(base, exp = 2) {
return base ** exp;
}
[Link](power(3)); // 9
[Link](power(2, 10)); // 1024
// Rest parameters (...)
function total(...nums) {
return [Link]((s,n) => s+n, 0);
}
[Link](total(1,2,3,4,5)); // 15
// Destructuring in parameters
function showUser({naam, umar}) {
[Link](`${naam} is ${umar} years old`);
}
showUser({naam:'Rahul', umar:22, city:'Mumbai'});
// Higher order functions
function applyTwice(fn, value) {
return fn(fn(value));
}
[Link](applyTwice(x => x*2, 3)); // 12 (3*2=6, 6*2=12)
// OUTPUT:
Namaste, Rahul!
8
20 | 49
9 | 1024
15
Rahul is 22 years old
12
9. DOM - Browser mein HTML control karo
Website interactive banao!
DOM (Document Object Model) sirf browser mein kaam karta hai. [Link] mein [Link] use karo. Yeh examples
HTML file mein likhne hain.
// HTML element select karo
const btn = [Link]('myBtn');
const heading = [Link]('h1'); // CSS selector
const allBtns = [Link]('.btn'); // sab elements
// Content badlo
[Link] = 'Naya Heading!';
[Link] = '<b>Bold</b> Heading';
// Style badlo
[Link] = 'red';
[Link] = '24px';
// Class add/remove
[Link]('highlight');
[Link]('old-class');
[Link]('dark'); // tha toh hatao, nahi tha toh daalo
// Event listener - user ke actions pe react karo
[Link]('click', function() {
alert('Button click hua!');
});
// Arrow function se bhi
[Link]('mouseover', () => {
[Link] = 'yellow';
});
// Input se value lo
const input = [Link]('nameInput');
[Link]('click', () => {
let naam = [Link];
[Link]('User ne likha:', naam);
});
// Nayi element banao
const newDiv = [Link]('div');
[Link] = 'Naya element!';
[Link] = 'card';
[Link](newDiv); // page pe daalo
// Element hatao
const oldElement = [Link]('old');
[Link]();
// OUTPUT:
// Browser mein run karo HTML file mein
// heading ka text badal jaayega
// button pe click karo toh alert aayega
// input ki value console mein aayegi
10. ASYNC/AWAIT - API se data lo
Server se data fetch karna
// fetch API - server se data lo
// (Browser + [Link] 18+ mein available)
// Promise wala tarika
fetch('[Link]
.then(response => [Link]())
.then(data => [Link](data))
.catch(error => [Link]('Error:', error));
// Async/Await - zyada readable (recommended)
async function getUsers() {
try {
const response = await fetch('[Link]
const data = await [Link]();
[Link](data);
return data;
} catch (error) {
[Link]('Error:', error);
}
}
getUsers();
// POST request - data bhejo
async function createUser(userData) {
const response = await fetch('/api/users', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: [Link](userData)
});
const result = await [Link]();
return result;
}
createUser({naam: 'Rahul', umar: 22});
// setTimeout - thodi der baad kaam karo
setTimeout(() => {
[Link]('2 second baad!');
}, 2000);
// setInterval - baar baar karo
const timer = setInterval(() => {
[Link]('Har 1 second!');
}, 1000);
// Band karo
clearInterval(timer);
// OUTPUT:
// Network request - real API se data aayega
// [{id:1, naam:'Rahul'}, ...]
2 second baad!
Har 1 second! (jab tak clearInterval na ho)
11. CLASSES - OOP in JavaScript
class Student {
#marks = []; // private field
constructor(naam, umar) {
[Link] = naam;
[Link] = umar;
}
addMark(mark) {
this.#[Link](mark);
}
get average() { // getter
if (!this.#[Link]) return 0;
return this.#[Link]((s,m) => s+m, 0) / this.#[Link];
}
toString() {
return `${[Link]} (avg: ${[Link]})`;
}
}
// Inheritance
class TopStudent extends Student {
constructor(naam, umar, scholarship) {
super(naam, umar); // parent constructor
[Link] = scholarship;
}
info() {
return `${[Link]} - ${[Link]} scholarship`;
}
}
const s1 = new Student('Rahul', 20);
[Link](85);
[Link](90);
[Link]([Link]()); // Rahul (avg: 87.5)
[Link]([Link]); // 87.5
const ts = new TopStudent('Priya', 19, 'Full');
[Link](98);
[Link]([Link]()); // Priya - Full scholarship
[Link]([Link]); // 98 (inherited!)
[Link](ts instanceof Student); // true
// OUTPUT:
Rahul (avg: 87.5)
87.5
Priya - Full scholarship
98
true
12. LOCAL STORAGE & JSON
Browser mein data save karo
// localStorage - browser close hone ke baad bhi rehta hai
// Save karo
[Link]('naam', 'Rahul');
[Link]('umar', '22');
// Wapas lo
let naam = [Link]('naam');
[Link](naam); // Rahul
// Object save karo (pehle JSON string banao)
let user = { naam: 'Rahul', score: 95 };
[Link]('user', [Link](user));
// Wapas object mein convert karo
let saved = [Link]([Link]('user'));
[Link]([Link]); // Rahul
// Delete
[Link]('naam');
[Link](); // sab hatao
// JSON methods
let data = { items: ['Ali','Bob'], count: 2 };
let str = [Link](data); // object -> string
[Link](str);
let back = [Link](str); // string -> object
[Link]([Link]); // 2
// OUTPUT:
Rahul
Rahul
{"items":["Ali","Bob"],"count":2}
2
JAVASCRIPT DICTIONARY
Har method/function ka matlab + live example
Quick reference: Har entry mein method naam, description, code example aur output. [Link]() = Python ka print()
[Link]()
Screen pe print karo (Python ka print())
[Link]('Hello');
[Link](1, 2, 3);
[Link]({naam:'Rahul'});
=> Hello | 1 2 3 | { naam: 'Rahul' }
typeof
Value ka type check karo
[Link](typeof 'Hi');
[Link](typeof 42);
[Link](typeof true);
[Link](typeof undefined);
=> string | number | boolean | undefined
parseInt() / parseFloat()
String se number nikalo
[Link](parseInt('42px'));
[Link](parseFloat('3.14abc'));
[Link](parseInt('0xFF', 16));
=> 42 | 3.14 | 255
String()
Kuch bhi string mein badlo
[Link](String(42));
[Link](String(true));
[Link](String(null));
=> '42' | 'true' | 'null'
Number()
String/Bool ko number mein badlo
[Link](Number('42'));
[Link](Number(true));
[Link](Number('abc'));
=> 42 | 1 | NaN
Boolean()
Value truthy hai ya falsy?
[Link](Boolean(0));
[Link](Boolean(''));
[Link](Boolean('Hi'));
[Link](Boolean(1));
=> false | false | true | true
[Link]()
Koi value array hai ya nahi?
[Link]([Link]([1,2,3]));
[Link]([Link]('hello'));
=> true | false
[Link]
String ki length
[Link]('Hello'.length);
[Link](''.length);
=> 5 | 0
[Link]()
String ko capitals mein
[Link]('hello'.toUpperCase());
=> HELLO
[Link]()
String ko small letters mein
[Link]('HELLO'.toLowerCase());
=> hello
[Link]()
Start/end ke spaces hatao
[Link](' hi '.trim());
=> hi
[Link]()
String mein koi word hai?
[Link]('Hello World'.includes('World'));
[Link]('Hello'.includes('xyz'));
=> true | false
[Link]()
Word kahan hai - index return karo
[Link]('Hello World'.indexOf('World'));
[Link]('Hello'.indexOf('xyz'));
=> 6 | -1
[Link]()
String mein kuch badlo
[Link]('I love JS'.replace('JS','Python'));
[Link]('aabbcc'.replaceAll('b','x'));
=> I love Python | aaxxcc
[Link]()
String ko array mein todo
[Link]('a,b,c'.split(','));
[Link]('Hello'.split(''));
=> ['a','b','c'] | ['H','e','l','l','o']
[Link]()
String ka hissa lo
[Link]('Hello World'.slice(0,5));
[Link]('Hello World'.slice(6));
=> Hello | World
[Link]() / padEnd()
String ko fixed length tak pad karo
[Link]('5'.padStart(3,'0'));
[Link]('Hi'.padEnd(5,'.'));
=> 005 | Hi...
[Link]()
Array ke end mein element add karo
let a=[1,2]; [Link](3); [Link](a);
=> [1,2,3]
[Link]()
Array ke end se element hatao aur return karo
let a=[1,2,3]; [Link]([Link]()); [Link](a);
=> 3 | [1,2]
[Link]()
Array ke start mein element add karo
let a=[2,3]; [Link](1); [Link](a);
=> [1,2,3]
[Link]()
Array ke start se element hatao
let a=[1,2,3]; [Link]([Link]()); [Link](a);
=> 1 | [2,3]
[Link]()
Array mein add/remove karo specific position pe
let a=[1,2,4,5];
[Link](2,0,3); // index 2 pe 3 insert
[Link](a);
=> [1,2,3,4,5]
[Link]()
Array ka hissa lo (original safe)
let a=[1,2,3,4,5];
[Link]([Link](1,4));
[Link]([Link](-2));
=> [2,3,4] | [4,5]
[Link]()
Element kahan hai?
[Link]([1,2,3].indexOf(2));
[Link]([1,2,3].indexOf(9));
=> 1 | -1
[Link]()
Element array mein hai?
[Link]([1,2,3].includes(2));
[Link]([1,2,3].includes(9));
=> true | false
[Link]()
Array ko string mein jodo
[Link](['a','b','c'].join('-'));
[Link]([1,2,3].join(', '));
=> a-b-c | 1, 2, 3
[Link]()
Array ulta karo
let a=[1,2,3]; [Link](); [Link](a);
=> [3,2,1]
[Link]()
Array sort karo
let a=[3,1,4,1,5];
[Link]((x,y)=>x-y); [Link](a);
=> [1,1,3,4,5]
[Link]()
Har element transform karo - nayi array
let doubled=[1,2,3].map(x=>x*2);
[Link](doubled);
=> [2,4,6]
[Link]()
Condition se elements chhunaao - nayi array
let evens=[1,2,3,4,5].filter(x=>x%2===0);
[Link](evens);
=> [2,4]
[Link]()
Sab elements ko ek value mein compress karo
let sum=[1,2,3,4,5].reduce((acc,x)=>acc+x,0);
[Link](sum);
=> 15
[Link]()
Pehla matching element lo
let found=[1,2,3,4,5].find(x=>x>3);
[Link](found);
=> 4
[Link]()
Kya sab elements condition pass karte hain?
[Link]([2,4,6].every(x=>x%2===0));
[Link]([1,2,3].every(x=>x>0));
=> true | true
[Link]()
Kya koi ek element condition pass karta hai?
[Link]([1,2,3].some(x=>x>2));
[Link]([1,2,3].some(x=>x>10));
=> true | false
[Link]()
Nested array flatten karo
[Link]([1,[2,3],[4,[5]]].flat());
[Link]([1,[2,[3]]].flat(Infinity));
=> [1,2,3,4,[5]] | [1,2,3]
[Link]()
Object ki saari keys lo
let o={a:1,b:2,c:3};
[Link]([Link](o));
=> ['a','b','c']
[Link]()
Object ki saari values lo
let o={a:1,b:2,c:3};
[Link]([Link](o));
=> [1,2,3]
[Link]()
Key-value pairs ka array lo
let o={a:1,b:2};
[Link]([Link](o));
=> [['a',1],['b',2]]
[Link]()
Object ko JSON string mein badlo
let o={naam:'Rahul',umar:22};
[Link]([Link](o));
[Link]([Link](o,null,2));
=> {"naam":"Rahul","umar":22} | (formatted output)
[Link]()
JSON string ko object mein badlo
let s='{"naam":"Rahul"}';
let o=[Link](s);
[Link]([Link]);
=> Rahul
[Link]()
0 se 1 ke beech random number
[Link]([Link]());
let n=[Link]([Link]()*100)+1;
[Link](n);
=> 0.573 (random) | 74 (random 1-100)
setTimeout()
Kuch time baad ek baar karo
setTimeout(() => { [Link]('Baad mein!'); }, 1000);
=> (1 sec baad) Baad mein!
setInterval()
Baar baar karo fixed time pe
const id = setInterval(() => [Link]('Tick!'), 1000);
clearInterval(id); // band karo
=> Tick! (har 1 sec)
