Learn in 10 minutes

Learn in 10 minutes

10 मिनट में JavaScript सीखें

JavaScript एक उच्च-स्तरीय, व्याख्या की गई प्रोग्रामिंग भाषा है जो अपनी बहुमुखी प्रतिभा और वेब विकास में व्यापक उपयोग के लिए जानी जाती है। यह ट्यूटोरियल आधुनिक JavaScript (ES6+) सुविधाओं को कवर करता है ताकि आप भाषा को जल्दी सीख सकें।

1. अपना पहला JavaScript प्रोग्राम लिखना

आइए एक सरल प्रोग्राम से शुरू करते हैं। hello.js नाम की एक फाइल बनाएं और निम्नलिखित कोड दर्ज करें:

console.log("Hello, World!");

फाइल को सेव करें और टर्मिनल या कमांड लाइन में निम्नलिखित कमांड चलाएं:

node hello.js

या इसे HTML फाइल में शामिल करें:

<script>
  console.log("Hello, World!");
</script>

आउटपुट होगा:

Hello, World!

यह सरल प्रोग्राम JavaScript की बुनियादी आउटपुट कार्यक्षमता प्रदर्शित करता है। console.log() फ़ंक्शन का उपयोग कंसोल में टेक्स्ट जानकारी प्रदर्शित करने के लिए किया जाता है।

2. बुनियादी सिंटैक्स

JavaScript का सिंटैक्स अन्य C-शैली की भाषाओं के समान है। यह स्टेटमेंट्स को समाप्त करने के लिए सेमीकोलन और कोड ब्लॉक्स को परिभाषित करने के लिए कर्ली ब्रेसिज़ {} का उपयोग करता है।

// यह एक एकल-पंक्ति टिप्पणी है
console.log("Hello, World!");

/*
यह एक बहु-पंक्ति टिप्पणी है
जो कई पंक्तियों में फैली हुई है।
*/

JavaScript में बुनियादी सिंटैक्स नियम:

  • सेमीकोलन: वैकल्पिक लेकिन स्टेटमेंट्स को समाप्त करने के लिए अनुशंसित
  • टिप्पणियाँ: एकल-पंक्ति टिप्पणियाँ // से शुरू होती हैं, बहु-पंक्ति /* */ से
  • केस संवेदनशीलता: JavaScript केस-संवेदनशील है
  • कोड ब्लॉक्स: कर्ली ब्रेसिज़ {} द्वारा परिभाषित

3. वेरिएबल्स और डेटा प्रकार

JavaScript में, वेरिएबल्स let, const, या var का उपयोग करके घोषित किए जाते हैं। आधुनिक JavaScript let और const को प्राथमिकता देता है।

वेरिएबल घोषणा:

let name = "John"; // परिवर्तनशील वेरिएबल
const age = 25;     // अपरिवर्तनीय स्थिरांक
var oldWay = "deprecated"; // var के उपयोग से बचें

JavaScript के मुख्य डेटा प्रकार:

  • Number: 42, 3.14, -10
  • String: "hello", 'world', `template`
  • Boolean: true, false
  • Undefined: undefined (वेरिएबल घोषित लेकिन असाइन नहीं)
  • Null: null (मूल्य की जानबूझकर अनुपस्थिति)
  • Object: {key: "value"}, [1, 2, 3]
  • Symbol: Symbol("description") (ES6+)
  • BigInt: 1234567890123456789012345678901234567890n (ES2020+)

3.1 Number प्रकार

JavaScript सभी संख्यात्मक मानों के लिए 64-बिट फ्लोटिंग पॉइंट नंबर्स का उपयोग करता है।

let integer = 42;
let float = 3.14159;
let scientific = 2.5e3; // 2500
let hex = 0xFF;         // 255
let binary = 0b1010;    // 10
let octal = 0o10;       // 8

3.2 String प्रकार

स्ट्रिंग्स सिंगल कोट्स, डबल कोट्स या टेम्पलेट लिटरल्स के साथ बनाई जा सकती हैं।

let single = 'सिंगल कोट स्ट्रिंग';
let double = "डबल कोट स्ट्रिंग";
let template = `टेम्पलेट लिटरल`;

// इंटरपोलेशन के साथ टेम्पलेट लिटरल्स
let name = "Alice";
let greeting = `Hello, ${name}!`; // "Hello, Alice!"

स्ट्रिंग ऑपरेशन्स:

let text = "JavaScript प्रोग्रामिंग";
console.log(text.length);        // स्ट्रिंग लंबाई: 19
console.log(text.toUpperCase()); // "JAVASCRIPT प्रोग्रामिंग"
console.log(text.toLowerCase()); // "javascript प्रोग्रामिंग"
console.log(text[0]);            // पहला वर्ण: "J"
console.log(text.slice(0, 10)); // "JavaScript"

3.3 Boolean प्रकार

बूलियन प्रकार के दो मान होते हैं: true और false

let isActive = true;
let isComplete = false;

// बूलियन ऑपरेशन्स
let result1 = true && false;  // false
let result2 = true || false;  // true
let result3 = !true;          // false

3.4 Undefined और Null

undefined का मतलब है कि एक वेरिएबल घोषित किया गया है लेकिन कोई मान असाइन नहीं किया गया है। null किसी भी मान की जानबूझकर अनुपस्थिति है।

let unassigned; // undefined
let empty = null;

if (unassigned === undefined) {
  console.log("वेरिएबल अपरिभाषित है");
}

if (empty === null) {
  console.log("मान null है");
}

4. डेटा संरचनाएं

4.1 Array

एरे मानों के क्रमबद्ध, परिवर्तनशील संग्रह हैं।

let numbers = [1, 2, 3, 4, 5];
numbers.push(6);        // तत्व जोड़ें: [1, 2, 3, 4, 5, 6]
numbers.pop();          // अंतिम हटाएं: [1, 2, 3, 4, 5]
numbers.unshift(0);     // शुरुआत में जोड़ें: [0, 1, 2, 3, 4, 5]
numbers.shift();        // पहला हटाएं: [1, 2, 3, 4, 5]
numbers[0] = 10;        // संशोधित करें: [10, 2, 3, 4, 5]

एरे मेथड्स:

let fruits = ["सेब", "केला", "संतरा"];

// पुनरावृत्ति
fruits.forEach(fruit => console.log(fruit));

// परिवर्तन
let lengths = fruits.map(fruit => fruit.length); // [3, 4, 6]

// फिल्टरिंग
let longFruits = fruits.filter(fruit => fruit.length > 4); // ["केला", "संतरा"]

## 4.2 Object

ऑबस क-़िोंरह हैं।

```javascript
let person = {
  name: "John",
  age: 30,
  city: "New York",
  isStudent: false
};

// गुणों तक पहुंच
console.log(person.name);       // "John"
console.log(person["age"]);     // 30

// गुण जोड़ना
person.country = "USA";
person["occupation"] = "Developer";

// गुण हटाना
delete person.isStudent;

// ऑब्जेक्ट मेथड्स
let keys = Object.keys(person);    // ["name", "age", "city", "country", "occupation"]
let values = Object.values(person); // ["John", 30, "New York", "USA", "Developer"]
let entries = Object.entries(person); // [["name", "John"], ["age", 30], ...]

4.3 Set

सेट अद्वितीय मानों के संग्रह हैं।

let numbers = new Set([1, 2, 3, 3, 4, 4, 5]);
console.log(numbers); // Set {1, 2, 3, 4, 5}

// सेट ऑपरेशन्स
numbers.add(6);       // मान जोड़ें
numbers.delete(1);    // मान हटाएं
numbers.has(2);       // true
numbers.size;         // 5

// पुनरावृत्ति
numbers.forEach(num => console.log(num));

4.4 Map

मैप्स की-वैल्यू जोड़ियों के संग्रह हैं जिनमें किसी भी डेटा प्रकार को कुंजी के रूप में उपयोग किया जा सकता है।

let map = new Map();
map.set("name", "Alice");
map.set(1, "number one");
map.set(true, "boolean true");

console.log(map.get("name"));    // "Alice"
console.log(map.has(1));         // true
console.log(map.size);           // 3

// पुनरावृत्ति
for (let [key, value] of map) {
  console.log(`${key}: ${value}`);
}

5. ऑपरेटर्स

JavaScript गणनाओं और तुलनाओं के लिए विभिन्न ऑपरेटर्स प्रदान करता है।

  • अंकगणित: +, -, *, /, %, ** (घातांक)
  • तुलना: ==, ===, !=, !==, >, <, >=, <=
  • तार्किक: &&, ||, !
  • असाइनमेंट: =, +=, -=, *=, /=, %=
  • टर्नरी: condition ? expr1 : expr2

5.1 अंकगणितीय ऑपरेटर्स

let a = 10, b = 3;

console.log(a + b);   // 13
console.log(a - b);   // 7
console.log(a * b);   // 30
console.log(a / b);   // 3.333...
console.log(a % b);   // 1
console.log(a ** b);  // 1000

5.2 तुलना ऑपरेटर्स

let x = 5, y = 10;

console.log(x == y);    // false
console.log(x === y);   // false (सख्त समानता)
console.log(x != y);    // true
console.log(x !== y);   // true (सख्त असमानता)
console.log(x > y);     // false
console.log(x < y);     // true
console.log(x >= y);    // false
console.log(x <= y);    // true

5.3 तार्किक ऑपरेटर्स

let a = true, b = false;

console.log(a && b);   // false
console.log(a || b);   // true
console.log(!a);       // false

6. कंट्रोल फ्लो

6.1 if स्टेटमेंट्स

let age = 20;

if (age >= 18) {
  console.log("वयस्क");
} else if (age >= 13) {
  console.log("किशोर");
} else {
  console.log("बच्चा");
}

6.2 switch स्टेटमेंट

let day = "Monday";

switch (day) {
  case "Monday":
    console.log("सप्ताह की शुरुआत");
    break;
  case "Friday":
    console.log("सप्ताहांत लगभग आ गया");
    break;
  default:
    console.log("सामान्य दिन");
}

6.3 for लूप्स

// पारंपरिक for लूप
for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

// for...of लूप (एरे, स्ट्रिंग्स)
let fruits = ["सेब", "केला", "संतरा"];
for (let fruit of fruits) {
  console.log(fruit);
}

// for...in लूप (ऑब्जेक्ट गुण)
let person = {name: "John", age: 30};
for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

6.4 while लूप्स

// while लूप
let count = 0;
while (count < 5) {
  console.log(count);
  count++;
}

// do...while लूप
let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

6.5 break और continue

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // लूप से बाहर निकलें
  }
  if (i % 2 === 0) {
    continue; // सम संख्याओं को छोड़ें
  }
  console.log(i); // 1, 3
}

7. फ़ंक्शंस

फ़ंक्शंस पुन: प्रयोज्य कोड ब्लॉक हैं।

7.1 फ़ंक्शन डिक्लेरेशन

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("Alice")); // "Hello, Alice!"

7.2 फ़ंक्शन एक्सप्रेशन

const multiply = function(a, b) {
  return a * b;
};

console.log(multiply(4, 5)); // 20

7.3 एरो फ़ंक्शंस (ES6+)

const add = (a, b) => a + b;
const square = x => x * x;
const greet = name => `Hello, ${name}!`;

console.log(add(2, 3));      // 5
console.log(square(4));      // 16
console.log(greet("Bob"));   // "Hello, Bob!"

7.4 डिफ़ॉल्ट पैरामीटर्स

function createUser(name, age = 18, isActive = true) {
  return {name, age, isActive};
}

console.log(createUser("John"));        // {name: "John", age: 18, isActive: true}
console.log(createUser("Alice", 25));  // {name: "Alice", age: 25, isActive: true}

7.5 रेस्ट पैरामीटर्स

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 10
console.log(sum(5, 10, 15));  // 30

7.6 स्प्रेड ऑपरेटर

let numbers = [1, 2, 3];
let moreNumbers = [4, 5, 6];
let allNumbers = [...numbers, ...moreNumbers]; // [1, 2, 3, 4, 5, 6]

let person = {name: "John", age: 30};
let updatedPerson = {...person, city: "New York"}; // {name: "John", age: 30, city: "New York"}

8. क्लासेस और ऑब्जेक्ट्स (ES6+)

8.1 क्लास डिक्लेरेशन

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  introduce() {
    return `मैं ${this.name} हूं, ${this.age} साल का`;
  }

  haveBirthday() {
    this.age++;
    return `${this.name} का जन्मदिन था, अब ${this.age} साल का`;
  }
}

let person = new Person("John", 25);
console.log(person.introduce());      // "मैं John हूं, 25 साल का"
console.log(person.haveBirthday());   // "John का जन्मदिन था, अब 26 साल का"

8.2 इनहेरिटेंस

class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }

  makeSound() {
    return `${this.name} आवाज करता है`;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name, "कुत्ता");
    this.breed = breed;
  }

  makeSound() {
    return `${this.name} भौंकता है`;
  }

  fetch() {
    return `${this.name} गेंद लाता है`;
  }
}

let dog = new Dog("Buddy", "Golden Retriever");
console.log(dog.makeSound()); // "Buddy भौंकता है"
console.log(dog.fetch());     // "Buddy गेंद लाता है"

8.3 गेटर्स और सेटर्स

class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  get diameter() {
    return this.radius * 2;
  }

  set diameter(diameter) {
    this.radius = diameter / 2;
  }

  get area() {
    return Math.PI * this.radius ** 2;
  }
}

let circle = new Circle(5);
console.log(circle.diameter); // 10
console.log(circle.area);     // 78.53981633974483

circle.diameter = 20;
console.log(circle.radius);   // 10

9. अतुल्यकालिक JavaScript

9.1 कॉलबैक्स

function fetchData(callback) {
  setTimeout(() => {
    callback("डेटा प्राप्त हुआ");
  }, 1000);
}

fetchData(data => {
  console.log(data); // 1 सेकंड बाद "डेटा प्राप्त हुआ"
});

9.2 प्रॉमिसेस

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("डेटा प्राप्त हुआ");
      // reject("त्रुटि हुई");
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data)) // "डेटा प्राप्त हुआ"
  .catch(error => console.error(error));

9.3 async/await (ES2017+)

async function getData() {
  try {
    let data = await fetchData();
    console.log(data); // "डेटा प्राप्त हुआ"
  } catch (error) {
    console.error(error);
  }
}

getData();

9.4 Fetch API

async function getUser() {
  try {
    let response = await fetch('https://api.example.com/user');
    let user = await response.json();
    console.log(user);
  } catch (error) {
    console.error('त्रुटि:', error);
  }
}

10. एरर हैंडलिंग

try {
  let result = 10 / 0;
  if (!isFinite(result)) {
    throw new Error("शून्य से विभाजन");
  }
  console.log(result);
} catch (error) {
  console.error("त्रुटि:", error.message);
} finally {
  console.log("यह हमेशा चलता है");
}

11. मॉड्यूल्स (ES6+)

11.1 एक्सपोर्टिंग

// math.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export default function multiply(a, b) {
  return a * b;
}

11.2 इम्पोर्टिंग

// main.js
import multiply, { PI, add } from './math.js';

console.log(PI);           // 3.14159
console.log(add(2, 3));    // 5
console.log(multiply(4, 5)); // 20

12. आधुनिक JavaScript सुविधाएं

12.1 डिस्ट्रक्चरिंग

// एरे डिस्ट्रक्चरिंग
let [first, second, third] = [1, 2, 3];
console.log(first, second, third); // 1 2 3

// ऑब्जेक्ट डिस्ट्रक्चरिंग
let {name, age} = {name: "John", age: 30, city: "NY"};
console.log(name, age); // John 30

// फ़ंक्शन पैरामीटर डिस्ट्रक्चरिंग
function greet({name, age}) {
  return `Hello ${name}, आप ${age} साल के हैं`;
}

12.2 टेम्पलेट लिटरल्स

let name = "Alice";
let age = 25;

// बेसिक इंटरपोलेशन
let greeting = `Hello, ${name}!`;

// मल्टी-लाइन स्ट्रिंग्स
let message = `
  नाम: ${name}
  उम्र: ${age}
  स्थिति: ${age >= 18 ? "वयस्क" : "नाबालिग"}
`;

// एक्सप्रेशन इवैल्यूएशन
let calculation = `2 + 3 = ${2 + 3}`; // "2 + 3 = 5"

12.3 ऑप्शनल चेनिंग (?.)

let user = {
  profile: {
    name: "John",
    address: {
      city: "New York"
    }
  }
};

console.log(user?.profile?.name);           // "John"
console.log(user?.profile?.age);            // undefined
console.log(user?.profile?.address?.city);  // "New York"
console.log(user?.employment?.company);     // undefined (कोई त्रुटि नहीं)

12.4 नलिश कोएलसिंग (??)

let name = "";
let age = 0;
let city = null;
let country = undefined;

console.log(name || "अज्ञात");    // "अज्ञात" (खाली स्ट्रिंग falsy है)
console.log(name ?? "अज्ञात");    // "" (केवल null/undefined)

console.log(age || 18);           // 18 (0 falsy है)
console.log(age ?? 18);           // 0 (केवल null/undefined)

console.log(city ?? "अज्ञात");   // "अज्ञात"
console.log(country ?? "USA");    // "USA"

13. उपयोगी एरे मेथड्स

let numbers = [1, 2, 3, 4, 5];

// map: प्रत्येक तत्व को रूपांतरित करें
let squares = numbers.map(n => n * n); // [1, 4, 9, 16, 25]

// filter: तत्वों का चयन करें
let evens = numbers.filter(n => n % 2 === 0); // [2, 4]

// reduce: मानों को संचित करें
let sum = numbers.reduce((total, n) => total + n, 0); // 15

// find: पहला मिलान वाला तत्व ढूंढें
let firstEven = numbers.find(n => n % 2 === 0); // 2

// some: जांचें कि कोई तत्व मेल खाता है
let hasEven = numbers.some(n => n % 2 === 0); // true

// every: जांचें कि सभी तत्व मेल खाते हैं
let allPositive = numbers.every(n => n > 0); // true

// sort: तत्वों को क्रमबद्ध करें
let sorted = numbers.sort((a, b) => b - a); // [5, 4, 3, 2, 1]

14. तारीख और समय

let now = new Date();
console.log(now.toString());      // वर्तमान तारीख और समय
console.log(now.getFullYear());   // वर्तमान वर्ष
console.log(now.getMonth());      // वर्तमान महीना (0-11)
console.log(now.getDate());       // वर्तमान दिन (1-31)
console.log(now.getHours());      // वर्तमान घंटा (0-23)

// तारीखों का फॉर्मेटिंग
console.log(now.toLocaleDateString()); // स्थानीयकृत तारीख स्ट्रिंग
console.log(now.toLocaleTimeString()); // स्थानीयकृत समय स्ट्रिंग
console.log(now.toISOString());        // ISO फॉर्मेट स्ट्रिंग

// विशिष्ट तारीखें बनाना
let specificDate = new Date(2025, 0, 1); // 1 जनवरी 2025
let timestamp = new Date(1640995200000); // टाइमस्टैम्प से

15. रेगुलर एक्सप्रेशन्स

let text = "Hello, मेरा ईमेल [email protected] है और फोन 123-456-7890 है";

// ईमेल पैटर्न
let emailPattern = /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g;
let emails = text.match(emailPattern); // ["[email protected]"]

// फोन पैटर्न
let phonePattern = /\d{3}-\d{3}-\d{4}/g;
let phones = text.match(phonePattern); // ["123-456-7890"]

// टेस्ट मेथड
let isValidEmail = emailPattern.test("[email protected]"); // true

// रिप्लेस मेथड
let maskedText = text.replace(phonePattern, "XXX-XXX-XXXX");
console.log(maskedText);

JavaScript एक शक्तिशाली और बहुमुखी भाषा है जो लगातार विकसित हो रही है। यह ट्यूटोरियल आपको शुरुआत करने के लिए आवश्यक अवधारणाओं को कवर करता है, लेकिन जनरेटर्स, प्रॉक्सीज और वेब APIs जैसे उन्नत विषयों सहित बहुत कुछ खोजने के लिए है।