JavaScript में Variables और Data Types की पूरी जानकारी

by

JavaScript में डेटा को स्टोर और मैनिपुलेट करना variables और data types के बिना संभव नहीं। यह ब्लॉग variables (let, const, var), data types (String, Number, Boolean, आदि), type checking, और string operations को गहराई से कवर करता है।

Extra theory के साथ, practical exercise, quiz, और एक mini project आपके कोडिंग स्किल्स को boost करेंगे। यह गाइड हिंदी में है, लेकिन टेक्निकल टर्म्स English में हैं ताकि आप प्रोफेशनल टर्मिनोलॉजी से परिचित हो सकें।

Variables: डेटा स्टोर करने का आधार

Variables प्रोग्राम में डेटा को स्टोर करने के लिए कंटेनर हैं। JavaScript में variables डिक्लेयर करने के तीन तरीके हैं: let, const, और var। इनके बीच scope और behavior में अंतर हैं।

1. let

  • Block-scoped: केवल उस ब्लॉक (जैसे {} में if, loop) में accessible।
  • Reassignment: Value को बदल सकते हैं, लेकिन redeclare नहीं कर सकते।
  • Theory: let मॉडर्न JavaScript में preferred है क्योंकि यह scoping errors को कम करता है। Block scope की वजह से variable का lifecycle छोटा और predictable रहता है।
  • Example:
    let score = 100;
score = 150; // Allowed
// let score = 200; // Error: Identifier 'score' has already been declared

2. const

  • Block-scoped: let की तरह।
  • Constant: Value को reassigned नहीं कर सकते, लेकिन objects/arrays के content को modify कर सकते हैं।
  • Theory: const immutability को promote करता है, जो bugs कम करता है। Objects के साथ, reference constant रहता है, लेकिन properties बदल सकती हैं।
  • Example:
    const user = { name: "Amit" };
user.name = "Priya"; // Allowed
// user = { name: "Rahul" }; // Error: Assignment to constant variable

3. var

  • Function-scoped: Function के बाहर globally scoped, जिससे unexpected behavior हो सकता है।
  • Redeclaration/Reassignment: दोनों allowed।
  • Theory: var ES6 से पहले standard था, लेकिन hoisting और scope issues की वजह से अब कम यूज़ होता है। Hoisting में variable declaration को function के top पर “hoist” किया जाता है।
  • Example:
    console.log(x); // undefined (hoisting)
var x = 10;
var x = 20; // Allowed

Theoretical Insight:

  • Hoisting: JavaScript engine declarations को scope के top पर ले जाता है, लेकिन initialization नहीं। var hoisted होता है, let और const नहीं।
  • Best Practice: let और const यूज़ करें। const को default रखें जब तक reassignment जरूरी न हो।

Data Types: डेटा की विविधता

    JavaScript एक dynamically typed language hai, yani variables ka type runtime par determine hota hai. Yahan mukhya data types hain:

    1. String: Text data (single quotes ‘, double quotes “, ya backticks `) ।

      • Theory: Strings immutable hain, yani ek baar banne ke baad unki value change nahi ho sakti. Methods jaise slice(), toUpperCase() nai string banate hain.

      • Example: "Hello", 'World', JavaScript

    2. Number: Integers aur decimals, 64-bit floating-point format mein।

      • Theory: JavaScript mein single number type hai, jo IEEE 754 standard follow karta hai. Precision issues ho sakte hain (jaise 0.1 + 0.2 !== 0.3)।

      • Example: 42, 3.14

    3. Boolean: true ya false, logical operations ke liye।

      • Theory: Comparisons (==, ===) aur conditions mein use hota hai. === strict equality check karta hai.

      • Example: let isActive = true;

    4. Undefined: Variable jo declared hai, lekin value assign nahi hui।

      • Theory: Default value jab variable initialize nahi hota. Function jo return nahi karta, vah undefined deta hai.

      • Example: let x; // x is undefined

    5. Null: Intentionally “no value” ko darshata hai।

      • Theory: null ek object type hai (historical bug), lekin logically “empty” value hai. null aur undefined mein antar: null explicitly set hota hai.

      • Example: let y = null;

    6. BigInt: Arbitrary-precision integers ke liye।

      • Theory: Number type ki limit (2^53 – 1) se bade integers ke liye. n suffix ke saath define hota hai.

      • Example: let bigNum = 12345678901234567890n;

    7. Symbol: Unique aur immutable identifiers।

      • Theory: Object properties ke liye unique keys banate hain. Symbol collision se bachata hai.

      • Example: let sym = Symbol("id");

    Theoretical Insight:

    • Primitive vs. Reference Types: String, Number, Boolean, Undefined, Null, BigInt, Symbol primitive hain (immutable, pass-by-value). Objects (arrays, functions) reference types hain (mutable, pass-by-reference).

    • Dynamic Typing Risks: Type changes se bugs aa sakte hain, isliye type checking zaroori hai.

    Type Checking और Type Coercion

    Type Checking: typeof

    • typeof ऑपरेटर variable का type return करता है।
    • Theory: typeof runtime type checking के लिए core tool है। Historical quirk: typeof null “object” देता है।
    • Example:
      console.log(typeof "Hello"); // "string"
console.log(typeof 42); // "number"
console.log(typeof null); // "object"

    Type Coercion

    • JavaScript automatically types को convert करता है (implicit coercion)।
    • Theory: Coercion operators जैसे +, == में होता है। + string concatenation को prioritize करता है अगर एक operand string है।
    • Example:
      let num = 5;
let str = "10";
console.log(num + str); // "510" (number to string)
console.log(num * str); // 50 (string to number)
    • Explicit Conversion: Bugs से बचने के लिए parseInt, parseFloat, String(), Number() यूज़ करें।
      let str = "123";
let num = Number(str); // 123

    Theoretical Insight:

    • Strict vs. Loose Equality: === type और value दोनों चेक करता है, == coercion के बाद चेक करता है। हमेशा === यूज़ करें।
    • Example:
      console.log("5" == 5); // true (coercion)
console.log("5" === 5); // false (no coercion)

    String Operations: Concatenation और Template Literals

    1. Concatenation

    • Strings को + ऑपरेटर से जोड़ा जाता है।
    • Theory: Concatenation memory-intensive हो सकता है, क्योंकि strings immutable हैं। हर concatenation नई string बनाता है।
    • Example:
      let firstName = "Amit";
let lastName = "Sharma";
let fullName = firstName + " " + lastName; // "Amit Sharma"

    2. Template Literals

    • Backticks (`) और ${} से dynamic strings बनाएँ।
    • Theory: Template literals multi-line strings और expressions को support करते हैं, जो code को readable बनाते हैं।
    • Example:

    let name = "Priya"; 
    let age = 25; console.log(`Hello, ${name}! You are ${age}.`); // "Hello, Priya! You are 25."

    Theoretical Insight:

    • Performance: Template literals concatenation से ज्यादा efficient हैं large strings के लिए।
    • Use Cases: Dynamic HTML generation, logging, और user-facing messages में ideal।

    Practical Exercise: User Profile Bio

    Task: एक user profile बनाएँ और bio को template literals से generate करें।

    • Variables: name (string), age (number), isStudent (boolean), city (string)।
    • Bio string बनाएँ और console में प्रिंट करें।

    Code:

    let name = "Rahul";
let age = 22;
let isStudent = true;
let city = "Mumbai";

let bio = Hi, I'm ${name}, ${age} years old, living in ${city}. Student: ${isStudent};
console.log(bio);
// Output: Hi, I'm Rahul, 22 years old, living in Mumbai. Student: true

    Run: Browser console या VS Code में टेस्ट करें।

    Quiz: Data Types और Variable Rules

    यहाँ 5 multiple-choice सवाल हैं:

    1. let और const में क्या अंतर है?

      • A) let constant है, const variable
      • B) let reassigned हो सकता है, const नहीं
      • C) दोनों function-scoped हैं
      • D) दोनों block-scoped नहीं हैं
      • Answer: B) let reassigned हो सकता है, const नहीं
    2. कौन सा data type text को represent करता है?

      • A) Number
      • B) String
      • C) Boolean
      • D) Null
      • Answer: B) String
    3. typeof null का output क्या होगा?

      • A) “null”
      • B) “undefined”
      • C) “object”
      • D) “string”
      • Answer: C) “object”
    4. Template literals में variables कैसे embed करते हैं?

      • A) + ऑपरेटर
      • B) ${} और backticks
      • C) % ऑपरेटर
      • D) concat() method
      • Answer: B) ${} और backticks
    5. Hoisting किसके साथ होता है?

      • A) let
      • B) const
      • C) var
      • D) सभी
      • Answer: C) var

    Mini Project: Profile Card Generator

    Objective: एक dynamic profile card generator बनाएँ जो variables में user details स्टोर करे और HTML में display करे।

    Steps:

      1. Variables डिक्लेयर करें: name, age, city, hobby।
      2. Template literals से formatted HTML string बनाएँ।
      3. <div> में dynamically content डालें।

    Code:

    <!DOCTYPE html>
<html>
<head>
<title>Profile Card Generator</title>
<style>
.card {
border: 1px solid #ccc;
padding: 20px;
width: 300px;
margin: 20px auto;
font-family: Arial, sans-serif;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div id="profileCard"></div>

    How to Run:

    • .html फाइल में सेव करें और browser में ओपन करें।
    • Output: एक styled profile card दिखेगा।

    Theoretical Addition:

    • DOM Manipulation: document.getElementById DOM को access करता है। innerHTML HTML content को dynamically set करता है।
    • Security: User input के साथ innerHTML यूज़ करते समय XSS (Cross-Site Scripting) से बचने के लिए input sanitize करें।

    निष्कर्ष

    इस ब्लॉग में हमने JavaScript में variables (let, const, var), data types, type checking, और string operations को गहराई से समझा। Hoisting, scope, dynamic typing, और coercion जैसे concepts ने theoretical foundation दिया।

    Practical exercise और profile card mini project के साथ आप डेटा मैनिपुलेशन में confident हो गए होंगे। अगले मॉड्यूल में हम functions और control flow (if-else, loops) explore करेंगे। Practice करें और सवाल पूछें!

    Also Read:

    Leave a Comment