जावास्क्रिप्ट की मूल बातें

यह लेख जावास्क्रिप्ट की मूल बातें समझाता है।

YouTube Video

Hello World! को निष्पादित करना

जावास्क्रिप्ट का अवलोकन

जावास्क्रिप्ट वेब विकास में सबसे व्यापक रूप से उपयोग की जाने वाली प्रोग्रामिंग भाषाओं में से एक है। यह मुख्य रूप से वेब पृष्ठों में गतिशील तत्व जोड़ने, उपयोगकर्ता इंटरफ़ेस में हेरफेर, डेटा संचारण, और एनीमेशन निर्माण के लिए उपयोग किया जाता है। यह क्लाइंट-साइड (ब्राउज़र में) और सर्वर-साइड पर Node.js जैसी तकनीकों का उपयोग करके कार्य कर सकता है। अपनी सरलता और लचीलापन के कारण, यह शुरुआती लोगों के लिए आसानी से सीखने योग्य है और पेशेवर डेवलपर्स द्वारा व्यापक रूप से उपयोग किया जाता है।

जावास्क्रिप्ट में वेरिएबल्स

जावास्क्रिप्ट में वेरिएबल्स कंटेनर्स की तरह होते हैं, जिनका उपयोग डेटा स्टोर और पुनः उपयोग करने के लिए किया जाता है। वेरिएबल्स का उपयोग करके आप अपने प्रोग्राम में मानों को बनाए रख सकते हैं और संपादित कर सकते हैं।

वेरिएबल डिक्लेरेशन

जावास्क्रिप्ट में वेरिएबल्स को डिक्लेयर करने के लिए तीन कीवर्ड्स हैं।

• var: वेरिएबल्स को डिक्लेयर करने की एक पुरानी विधि, लेकिन इसके स्कोप को संभालना जटिल है और सतर्कता की आवश्यकता होती है। यह फंक्शन स्कोप पर आधारित है।

1var x = 10;

• let: ES6 में पेश किया गया, यह वेरिएबल्स को ब्लॉक स्कोप के साथ डिक्लेयर करने का एक तरीका है। इसे पुनः असाइन किया जा सकता है, लेकिन इसे एक ही स्कोप में पुनः डिक्लेयर नहीं किया जा सकता।

1let y = 20;

• const: अपरिवर्तनीय (constants) चर घोषित करने के लिए उपयोग किया जाता है। इसका ब्लॉक स्कोप होता है और इसे घोषित करने के बाद पुनः असाइन या पुनः घोषित नहीं किया जा सकता।

1const z = 30;

स्कोप

चरों के पास स्कोप की अवधारणा होती है।

ग्लोबल स्कोप

1var globalVar = 'This is global'; // Global scope
2
3function accessGlobal() {
4    console.log(globalVar); // Able to access global variable
5}
6
7accessGlobal(); // Outputs "This is global"

• ग्लोबल स्कोप के चर कहीं से भी सुलभ होते हैं। var द्वारा घोषित चर ग्लोबल या फंक्शन स्कोप में आते हैं, लेकिन let और const का ब्लॉक स्कोप होता है।

ब्लॉक स्कोप

1if (true) {
2    let localVar = "This is a block-scoped variable";
3
4    // Accessible inside the brackets
5    console.log(localVar);
6}
7
8// Error: localVar cannot be used outside of this scope
9console.log(localVar);

• ब्लॉक स्कोप: let या const के साथ घोषित चर केवल {} (घुंघराले ब्रैकेट) के अंदर ही मान्य होते हैं।

• बाहर से {} (कर्ली ब्रैकेट्स) तक पहुंचने पर एक त्रुटि होती है।

फंक्शन स्कोप

 1function myFunction() {
 2    var functionScoped = 'This is function scope';
 3    // Accessible inside the function
 4    console.log(functionScoped);
 5
 6    if (true) {
 7        var functionVar = 'This is also function scope';
 8    }
 9    // functionVar can be used inside of the fucntion
10    console.log(functionVar);
11}
12
13myFunction(); // Outputs "This is function scope"
14
15// Error: functionScoped is not defined
16console.log(functionScoped);

• फंक्शन स्कोप: किसी फंक्शन के अंदर परिभाषित चर और फंक्शन को फंक्शन के बाहर से एक्सेस नहीं किया जा सकता। किसी फंक्शन के अंदर var के साथ घोषित किए गए चर इसी स्कोप के अंतर्गत आते हैं।

• इस उदाहरण में, चर functionVar को {} (घुमावदार ब्रैकेट) के बाहर से एक्सेस किया जा सकता है, जब तक कि वह फ़ंक्शन के दायरे में हो। दूसरी ओर, फ़ंक्शन सीमा के बाहर से चर functionScoped को एक्सेस करने पर एक त्रुटि होती है।

इस प्रकार, var के साथ घोषित चर का केवल फंक्शन स्कोप होता है और ब्लॉक स्कोप नहीं होता, जो अप्रत्याशित रेंज में उपयोग किए जाने का खतरा पैदा करता है। अपरिवर्तनीय चरों के लिए const का उपयोग करना बेहतर होता है और आमतौर पर let का उपयोग करना चाहिए, और var का उपयोग यथासंभव कम करना चाहिए।

डेटा टाइप्स

जावास्क्रिप्ट चर विभिन्न प्रकार के डेटा प्रकारों के मान को संग्रहीत कर सकते हैं। पाठ को संभालने के लिए string और संख्यात्मक मानों को संभालने के लिए number होता है।

मुख्य डेटा प्रकार निम्नलिखित हैं:।

 1// Number: Numeric type (integer and floating point number)
 2let integerNumber = 42;
 3let floatNumber = 3.14;
 4console.log("Number (Integer):", integerNumber);
 5console.log("Number (Float):", floatNumber);
 6
 7// String: String type
 8let text = "Hello, JavaScript!";
 9console.log("String:", text);
10
11// Boolean: Boolean type (true or false)
12let isJavaScriptFun = true;
13let isError = false;
14console.log("Boolean (true):", isJavaScriptFun);
15console.log("Boolean (false):", isError);
16
17// Null: Explicitly represents "nothing"
18let emptyValue = null;
19console.log("Null:", emptyValue);
20
21// Undefined: The default value assigned to an uninitialized variable
22let notDefined;
23console.log("Undefined:", notDefined);
24
25// Symbol: A data type for creating unique values
26let uniqueKey = Symbol("id");
27console.log("Symbol:", uniqueKey);

• प्रारंभिक प्रकार (Primitive Types):
  • number: संख्यात्मक मानों (पूर्णांक और फ्लोटिंग-पॉइंट संख्याएं) को संभालता है।
  • string: वर्णों के स्ट्रिंग्स को संभालता है।
  • बूलियन: बूलियन मानों true या false को संभालता है।
  • null: स्पष्ट रूप से 'कुछ भी नहीं' का मूल्य दर्शाता है।
  • undefined: यह एक मान है जो स्वचालित रूप से उन वेरिएबल्स को असाइन किया जाता है जो इनिशियलाइज़ नहीं किए गए हैं।
  • Symbol: अद्वितीय मान बनाने के लिए उपयोग किया जाने वाला डेटा प्रकार।

 1// Object: A data structure that holds multiple properties
 2let person = {
 3    name: "Alice",
 4    age: 25,
 5    isStudent: false
 6};
 7console.log("Object:", person);
 8console.log("Object Property (name):", person.name);
 9console.log("Object Property (age):", person.age);
10
11// Array: A list that holds multiple values
12let numbers = [10, 20, 30, 40];
13console.log("Array:", numbers);
14console.log("Array Element (index 0):", numbers[0]);
15
16// Function: A function object
17function greet(name) {
18  return "Hello, " + name + "!";
19}
20console.log("Function Output:", greet("Bob"));
21
22// Another way to define a function using arrow syntax
23let add = (a, b) => a + b;
24console.log("Arrow Function Output (3 + 5):", add(3, 5));

• ऑब्जेक्ट प्रकार:
  • ऑब्जेक्ट: एक डेटा संरचना जिसमें कई गुण होते हैं।
  • Array: एक सूची जिसमें कई मान होते हैं।
  • Function: एक फ़ंक्शन ऑब्जेक्ट।

वैरिएबल को असाइन करना और पुनः असाइन करना

let या var के साथ घोषित किए गए वैरिएबल को पुनः असाइन किया जा सकता है, लेकिन const को एक बार घोषित होने के बाद पुनः असाइन नहीं किया जा सकता।

1let score = 100;
2score = 150; // Correct
3
4const pi = 3.14;
5pi = 3.14159; // Error

वैरिएबल होइस्टिंग

जावास्क्रिप्ट में, एक घटना है जहां वैरिएबल घोषणाएं उनके स्कोप के शीर्ष पर 'होइस्ट' हो जाती हैं। var के साथ घोषित किए गए वैरिएबल होइस्टेड होते हैं, लेकिन let या const को घोषणा से पहले उपयोग करने पर त्रुटि होती है।

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10

• इस मामले में, var के साथ घोषित वेरिएबल्स को होइस्टीड किया जाता है, और उनकी मान प्रदर्शित होती हैं।

1console.log(b); // ReferenceError
2let b = 20;

• let के साथ घोषित वेरिएबल्स होइस्टीड नहीं होते, जिसके कारण एक त्रुटि होती है।

वेरिएबल्स के सही उपयोग

वेरिएबल्स के सही उपयोग के लिए निम्न बिंदुओं पर विचार करें।

• const का उपयोग प्राथमिकता दें और var से बचें।
• वेरिएबल नामकरण मानकों का पालन करें।
  • camelCase का उपयोग करें, जैसे userName या totalPrice।
  • data या value जैसे अस्पष्ट नामों से बचें, और पठनीयता में सुधार के लिए अर्थपूर्ण नामों का उपयोग करें।
  • वेरिएबल का नाम संख्या से शुरू नहीं हो सकता, इसलिए 1variable जैसे नाम अनुमत नहीं हैं।
• ग्लोबल वेरिएबल्स का अत्यधिक उपयोग स्कोप अस्पष्टता पैदा कर सकता है और बग्स का कारण बन सकता है, इसलिए जहां तक संभव हो इन्हें उपयोग करने से बचें।

सारांश

• var: एक पुरानी वैरिएबल घोषणा विधि जिसमें फंक्शन स्कोप होता है।
• let: एक ब्लॉक-स्कोप्ड वैरिएबल जिसे पुनः असाइन किया जा सकता है।
• const: एक ब्लॉक-स्कोप्ड वैरिएबल जिसे पुनः असाइन नहीं किया जा सकता (कॉन्स्टेंट)।
• यह महत्वपूर्ण है कि वैरिएबल्स का उपयोग उनके डेटा प्रकारों के अनुसार करें और उनके स्कोप का ध्यान रखें।

जावास्क्रिप्ट में एस्केप कैरेक्टर्स क्या होते हैं?

एस्केप कैरेक्टर्स का उपयोग नियमित स्ट्रिंग लिटरल्स में विशिष्ट अर्थ वाले कैरेक्टर्स को दर्शाने के लिए किया जाता है। जावास्क्रिप्ट में, एस्केप कैरेक्टर्स \ बैकस्लैश से शुरू होते हैं ताकि स्ट्रिंग में विशेष प्रभाव जोड़े जा सकें या नियंत्रण कैरेक्टर्स शामिल किए जा सकें। एस्केप कैरेक्टर्स का उपयोग न्यूलाइन, टैब्स, या उद्धरण चिह्न जैसे तत्वों को स्ट्रिंग में शामिल करने के लिए किया जाता है।

एस्केप कैरेक्टर्स का उपयोग करने के उदाहरण

नीचे एस्केप कैरेक्टर्स का उपयोग करके कुछ नमूना कोड दिए गए हैं।

डबल और सिंगल कोट्स को एस्केप करना

स्ट्रिंग में डबल या सिंगल कोट्स को दिखाने के लिए एस्केप कैरेक्टर्स का उपयोग करें।

1const singleQuote = 'It\'s a beautiful day!';
2console.log(singleQuote); // Output: It's a beautiful day!
3
4const doubleQuote = "He said, \"Hello there!\"";
5console.log(doubleQuote); // Output: He said, "Hello there!"

बैकस्लैश को एस्केप करना

स्ट्रिंग में बैकस्लैश को शामिल करने के लिए उसे \ के साथ एस्केप करें।

1const path = "C:\\Program Files\\MyApp";
2console.log(path); // Output: C:\Program Files\MyApp

न्यूलाइन और टैब्स को एस्केप करना

लंबी स्ट्रिंग्स को ज्यादा पढ़ने योग्य बनाने के लिए आप न्यूलाइन और टैब्स शामिल कर सकते हैं।

1const multiline = "First line\nSecond line\nThird line";
2console.log(multiline);
3// Output:
4// First line
5// Second line
6// Third line
7
8const tabbed = "Column1\tColumn2\tColumn3";
9console.log(tabbed); // Output: Column1  Column2  Column3

यूनिकोड कैरेक्टर्स को एस्केप करना

यूनिकोड एस्केप सीक्वेंस का उपयोग करके आप विशेष कैरेक्टर्स को हेक्साडेसिमल कोड के साथ दर्शा सकते हैं।

1const smiley = "\u263A";  // Copyright Mark
2console.log(smiley);

नोट्स

एस्केप का अत्यधिक उपयोग पढ़ने की क्षमता को नुकसान पहुंचा सकता है।

एस्केप कैरेक्टर्स का अधिक उपयोग आपके कोड की पढ़ने की क्षमता को कम कर सकता है। लंबी स्ट्रिंग्स में एस्केप कैरेक्टर्स का समझदारी से उपयोग करना विशेष रूप से महत्वपूर्ण है।

टेम्पलेट लिटरल्स का उपयोग करने पर विचार करें।

जावास्क्रिप्ट में, बैकटिक्स का उपयोग करने वाले टेम्पलेट लिटरल्स आपको बिना एस्केप कैरेक्टर्स के न्यूलाइन या एंबेडेड एक्सप्रेशंस शामिल करने की अनुमति देते हैं।

1const message = `This is a message
2that spans multiple lines`;
3console.log(message);
4// Output:
5// This is a message
6// that spans multiple lines

सारांश

एस्केप कैरेक्टर्स स्ट्रिंग्स में विशेष या कंट्रोल कैरेक्टर्स को दर्शाने के लिए आवश्यक हैं। सिंगल या डबल कोट्स को एस्केप करके और न्यूलाइन या टैब जोड़कर आप अधिक लचीली स्ट्रिंग्स बना सकते हैं। हालांकि, एस्केप कैरेक्टर्स का अत्यधिक उपयोग कोड को पढ़ने में कठिन बना सकता है, इसलिए जब उचित हो तो टेम्पलेट लिटरल्स का उपयोग करने पर विचार करें।

जावास्क्रिप्ट संस्करण

जावास्क्रिप्ट में ECMAScript (ES) नामक एक मानक विनिर्देशन है। इस मानक के आधार पर जावास्क्रिप्ट विकसित हुआ है। नीचे इसके प्रमुख संस्करणों का एक संक्षिप्त विवरण दिया गया है।

• ES3 (1999)

  पहला व्यापक रूप से अपनाया गया संस्करण। मूल सिंटैक्स और विशेषताएं स्थापित की गईं।

• ES5 (2009)

  strict mode की शुरूआत, और Array.prototype.forEach, Object.keys, आदि जैसे नई विशेषताएं जोड़ी गईं।

• ES6 / ES2015 (2015)

  JavaScript में एक बड़ा अपडेट किया गया है। आधुनिक जावास्क्रिप्ट की आधारशिला माने जाने वाले कई फीचर्स, जैसे कि let, const, arrow functions, classes, promises, modules, आदि, पेश किए गए थे।

• ES7 / ES2016 (2016)

  Array.prototype.includes और Exponentiation Operator (**) जोड़े गए।

• ES8 / ES2017 (2017)

  async/await पेश किया गया, जिससे असिंक्रोनस प्रक्रियाओं को लिखना आसान हो गया।

• ES9 / ES2018 (2018)

  असिंक्रोनस इटररेटर्स और Rest/Spread Properties जोड़े गए।

• ES10 / ES2019 (2019)

  flatMap और Object.fromEntries जोड़े गए।

• ES11 / ES2020 (2020)

  Optional Chaining (?.) और Nullish Coalescing Operator (??) जोड़े गए, जिससे कोड को सरलता और सुरक्षित रूप से लिखा जा सके।

• ES12 / ES2021 (2021)

  String.prototype.replaceAll और Promise.any जैसे अन्य फीचर्स जोड़े गए।

• ES13 / ES2022 (2022)

  Array.prototype.at और क्लास प्राइवेट फील्ड्स (#field) जैसे अन्य फीचर्स जोड़े गए।

• ES14 / ES2023 (2023)

  Array.prototype.toSorted और Symbol.prototype.description जैसे अन्य फीचर्स जोड़े गए।

• ES15 / ES2024 (2024)

  Promise प्रबंधन को आसान बनाने के लिए Promise.withResolvers और रीसाइजेबल ArrayBuffer जैसे अन्य फीचर्स जोड़े गए।

वर्तमान जावास्क्रिप्ट हर साल अपडेट होती है, और नई विशेषताएं नवीनतम संस्करण में भी जोड़ी जाती हैं।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video