Complete modern JavaScript guide – click a topic to jump
What is JavaScript? JavaScript is a high-level, interpreted programming language primarily used for web development to make web pages interactive. It runs in the browser and also on servers (Node.js).
Key features: lightweight, dynamic typing, prototype-based, first-class functions, event-driven.
ECMAScript (ES) is the specification; ES6 (2015) introduced major modern features.
जावास्क्रिप्ट क्या है? यह एक हाई-लेवल, इंटरप्रेटेड प्रोग्रामिंग भाषा है, जिसका उपयोग वेब पेजों को इंटरैक्टिव बनाने के लिए किया जाता है। यह ब्राउज़र और सर्वर (Node.js) दोनों पर चलती है।
मुख्य विशेषताएँ: हल्की, डायनामिक टाइपिंग, फर्स्ट-क्लास फंक्शन, इवेंट-ड्रिवन।
ECMAScript (ES) इसका मानक है; ES6 (2015) ने आधुनिक सुविधाएँ जोड़ीं।
// First JavaScript code
console.log("Hello, World!");
Explanation: console.log() prints output to the browser's console.
व्याख्या: console.log() ब्राउज़र के कंसोल में आउटपुट दिखाता है।
var: Function-scoped, can be redeclared, hoisted. Avoid in modern code.
let: Block-scoped, cannot be redeclared in same scope, can be updated.
const: Block-scoped, cannot be updated or redeclared. Must be initialized at declaration.
var: फंक्शन स्कोप में काम करता है, दोबारा डिक्लेयर किया जा सकता है, आधुनिक कोड में इससे बचें।
let: ब्लॉक स्कोप में, एक ही स्कोप में दोबारा नहीं डिक्लेयर कर सकते, वैल्यू बदल सकते हैं।
const: ब्लॉक स्कोप, एक बार वैल्यू देने के बाद न बदलें, न दोबारा डिक्लेयर करें। डिक्लेरेशन के समय वैल्यू देना जरूरी।
let age = 25; const PI = 3.14; var oldWay = "avoid";
Primitive: string, number, boolean, null, undefined, symbol, bigint.
Reference: object, array, function.
Use typeof to check type.
प्रिमिटिव: string (टेक्स्ट), number (संख्या), boolean (सही/गलत), null (खाली), undefined (अपरिभाषित), symbol, bigint.
रेफरेंस: object, array, function.
typeof से टाइप पता कर सकते हैं।
let name = "HITCOM"; // string let count = 42; // number let isDone = false; // boolean let nothing = null; // object (historical) let notDefined; // undefined
Explicit conversion: String(), Number(), Boolean(), parseInt(), parseFloat().
Implicit coercion: JavaScript automatically converts types when using operators like + or ==. Prefer === to avoid coercion.
एक्सप्लिसिट (जानबूझकर): String(), Number(), Boolean(), parseInt(), parseFloat() से टाइप बदलते हैं।
इम्प्लिसिट (अपने आप): जावास्क्रिप्ट कभी-कभी टाइप अपने आप बदल देती है। == की जगह === इस्तेमाल करें।
let str = "123"; let num = Number(str); // 123 let sum = "5" + 3; // "53" (string) let equal = 5 == "5"; // true (coercion) let strict = 5 === "5"; // false
Arithmetic: +, -, *, /, %, **, ++, --
Assignment: =, +=, -=, etc.
Comparison: ==, ===, !=, !==, <, >, <=, >=
Logical: &&, ||, !
Ternary: condition ? expr1 : expr2
Nullish coalescing: ?? (returns right side if left is null/undefined)
अरिथमेटिक: +, -, *, /, %, ** (घातांक), ++, --
असाइनमेंट: =, +=, -= आदि
तुलना: == (मान बराबर), === (मान और टाइप बराबर), !=, !==, <, >, <=, >=
लॉजिकल: && (AND), || (OR), ! (NOT)
टर्नरी: शर्त ? सही वाला : गलत वाला
let x = 10, y = 3; console.log(x + y); // 13 console.log(x ** y); // 1000 console.log(x > 5 && y < 5); // true let age = 20; let status = age >= 18 ? "Adult" : "Minor";
if-else if-else: executes blocks based on conditions.
switch: multi-way branching.
if-else if-else: शर्तों के अनुसार ब्लॉक चलाना।
switch: कई स्थितियों के लिए।
let num = 0;
if (num > 0) {
console.log("Positive");
} else if (num < 0) {
console.log("Negative");
} else {
console.log("Zero");
}
let color = "red";
switch(color) {
case "red": console.log("Stop"); break;
case "green": console.log("Go"); break;
default: console.log("Unknown");
}
for – classic loop
while – condition before
do-while – executes at least once
for...of – iterates over iterable values (arrays, strings)
for...in – iterates over object keys
for – पारंपरिक लूप
while – पहले शर्त चेक करता है
do-while – एक बार जरूर चलता है
for...of – ऐरे, स्ट्रिंग आदि के मानों पर लूप
for...in – ऑब्जेक्ट की keys पर लूप
for (let i = 0; i < 5; i++) {
console.log(i);
}
let arr = [10,20,30];
for (let val of arr) {
console.log(val);
}
let obj = {a:1, b:2};
for (let key in obj) {
console.log(key, obj[key]);
}
Function declaration: function name(params) { ... }
Function expression: const name = function(params) { ... }
Parameters can have default values.
फंक्शन डिक्लेरेशन: function नाम(पैरामीटर) { ... }
फंक्शन एक्सप्रेशन: const नाम = function(पैरामीटर) { ... }
पैरामीटर को डिफॉल्ट वैल्यू दे सकते हैं।
function add(a, b) {
return a + b;
}
const multiply = function(a, b) {
return a * b;
};
function greet(name = "Guest") {
console.log("Hello " + name);
}
Shorter syntax: (params) => expression or (params) => { statements }
Lexical this (does not bind its own this).
छोटा सिंटैक्स: (पैरामीटर) => एक्सप्रेशन या (पैरामीटर) => { स्टेटमेंट्स }
यह अपना this नहीं बनाता, बल्कि आसपास वाले स्कोप से लेता है।
const add = (a, b) => a + b;
const square = x => x * x;
const greet = name => console.log("Hi " + name);
// with block
const sum = (a, b) => {
let result = a + b;
return result;
};
Objects store key-value pairs. Created with {}.
Access: dot notation or bracket notation.
ES6 shorthand: if variable name matches key, you can write just the variable.
ऑब्जेक्ट में key-value जोड़े होते हैं। {} से बनाते हैं।
एक्सेस: dot (.) या bracket [] से।
let person = {
name: "Rahul",
age: 22,
greet() {
console.log("Hello " + this.name);
}
};
console.log(person.name);
person.city = "Delhi"; // add new property
Arrays hold ordered lists. Created with []. Zero-indexed. Dynamic size.
ऐरे में क्रमबद्ध सूची रहती है। [] से बनाते हैं। इंडेक्स 0 से शुरू। आकार बदल सकता है।
let fruits = ["apple", "banana", "mango"];
console.log(fruits[0]); // apple
fruits.push("orange"); // add at end
fruits.pop(); // remove last
map – transform each element
filter – keep elements that pass a test
reduce – accumulate values
forEach – iterate
find – first matching element
map – हर एलिमेंट पर कुछ करके नया ऐरे बनाना
filter – शर्त के अनुसार एलिमेंट चुनना
reduce – सभी वैल्यू को जोड़कर एक मान निकालना
let nums = [1,2,3,4]; let squares = nums.map(n => n * n); // [1,4,9,16] let evens = nums.filter(n => n % 2 === 0); // [2,4] let sum = nums.reduce((acc, n) => acc + n, 0); // 10
length, toUpperCase(), toLowerCase(), includes(), indexOf(), slice(), split(), replace(), trim().
length (लंबाई), toUpperCase() (बड़े अक्षर), toLowerCase() (छोटे अक्षर), includes() (ढूँढ़ना), slice() (काटना), split() (तोड़ना), replace() (बदलना), trim() (स्पेस हटाना)।
let msg = " Hello World ";
console.log(msg.trim().toLowerCase()); // "hello world"
console.log(msg.includes("World")); // true
let parts = msg.split(" "); // ["", "Hello", "World", ""]
Use backticks ` ` to create strings. Embed expressions with ${expression}. Support multi-line strings.
बैकटिक्स ` ` का उपयोग करके स्ट्रिंग बनाते हैं। ${expression} से वेरिएबल डाल सकते हैं। मल्टी-लाइन स्ट्रिंग आसानी से बना सकते हैं।
let name = "Anjali";
let age = 22;
let msg = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(msg);
let multi = `This is
a multi-line
string.`;
Unpack values from arrays or properties from objects into distinct variables.
ऐरे से मानों को या ऑब्जेक्ट से प्रॉपर्टी को अलग-अलग वेरिएबल में निकालना।
// Array destructuring
let [a, b] = [10, 20];
console.log(a); // 10
// Object destructuring
let person = {name: "Raj", age: 25};
let {name, age} = person;
console.log(name); // Raj
Spread (...) expands an array/object into individual elements.
Rest (...) collects remaining elements into an array.
Spread (...) किसी ऐरे/ऑब्जेक्ट को अलग-अलग तत्वों में फैलाता है।
Rest (...) बचे हुए तत्वों को एक ऐरे में इकट्ठा करता है।
// Spread
let arr1 = [1,2,3];
let arr2 = [...arr1, 4,5]; // [1,2,3,4,5]
// Rest
function sum(...numbers) {
return numbers.reduce((acc, n) => acc + n, 0);
}
console.log(sum(1,2,3,4)); // 10
Syntactic sugar over prototype-based inheritance. Use class, constructor, methods, extends, super.
प्रोटोटाइप-बेस्ड इनहेरिटेंस का आसान सिंटैक्स। class, constructor, मेथड्स, extends, super का उपयोग।
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
class Dog extends Animal {
speak() {
console.log(`${this.name} barks.`);
}
}
let d = new Dog("Rex");
d.speak(); // Rex barks.
Use export to expose functions, objects, or primitives. Use import to bring them in.
export से किसी फंक्शन/ऑब्जेक्ट को दूसरी फाइल में उपयोग के लिए भेजते हैं। import से लेते हैं।
// lib.js
export const PI = 3.14;
export function add(a,b) { return a+b; }
// main.js
import { PI, add } from './lib.js';
console.log(add(2,3));
Promise represents eventual completion of an async operation. States: pending, fulfilled, rejected.
async/await syntactic sugar to work with promises in a synchronous style.
Promise किसी एसिंक्रोनस कार्य के पूरा होने पर रिजल्ट या एरर देता है।
async/await से प्रॉमिस को आसानी से हैंडल कर सकते हैं।
// Promise
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => resolve("Data"), 1000);
});
};
fetchData().then(data => console.log(data));
// Async/Await
async function getData() {
let data = await fetchData();
console.log(data);
}
Use try...catch...finally to handle runtime errors gracefully.
try...catch...finally से एरर को पकड़ सकते हैं और प्रोग्राम क्रैश होने से बचा सकते हैं।
try {
let result = riskyOperation();
console.log(result);
} catch (error) {
console.log("An error occurred:", error.message);
} finally {
console.log("This always runs");
}
Select elements: getElementById, querySelector, querySelectorAll.
Change content: innerHTML, textContent, setAttribute, style.
एलिमेंट चुनना: getElementById, querySelector।
कंटेंट बदलना: innerHTML, textContent, स्टाइल बदलना।
<div id="demo">Hello</div>
<script>
let el = document.getElementById("demo");
el.textContent = "Hi there!";
el.style.color = "blue";
</script>
Handle user interactions: click, mouseover, keydown, etc. Use addEventListener or inline onclick.
यूजर के कार्यों को हैंडल करना: क्लिक, माउस घुमाना, की-प्रेस आदि। addEventListener से इवेंट लगाते हैं।
<button id="btn">Click me</button>
<script>
document.getElementById("btn").addEventListener("click", function() {
alert("Button clicked!");
});
</script>
JSON (JavaScript Object Notation) is a lightweight data interchange format. JSON.stringify() converts object to JSON string. JSON.parse() converts JSON string to object.
JSON डेटा के आदान-प्रदान का एक आसान तरीका है। JSON.stringify() ऑब्जेक्ट को JSON स्ट्रिंग में बदलता है। JSON.parse() JSON स्ट्रिंग को ऑब्जेक्ट में।
let obj = {name: "Amit", age: 30};
let jsonStr = JSON.stringify(obj);
console.log(jsonStr); // {"name":"Amit","age":30}
let parsed = JSON.parse(jsonStr);
console.log(parsed.name); // Amit
Optional chaining (?.) – safely access nested properties.
Nullish coalescing (??) – returns right side if left is null/undefined, not falsy.
Optional chaining (?.) – अगर कोई प्रॉपर्टी मौजूद नहीं है तो एरर के बजाय undefined देता है।
Nullish coalescing (??) – यदि बायाँ मान null या undefined है तो दायाँ मान देता है।
let user = { profile: { name: "Raj" } };
console.log(user.profile?.name); // Raj
console.log(user.address?.city); // undefined
let count = 0;
let result = count ?? 10; // 0, because count is not null/undefined
let value = null ?? 5; // 5