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 है, यानी variables का type runtime पर determine होता है। यहाँ मुख्य data types हैं:
String: Text डेटा (single quotes ‘, double quotes “, या backticks `) ।
Theory: Strings immutable हैं, यानी एक बार बनने के बाद उनकी value change नहीं हो सकती। Methods जैसे slice(), toUpperCase() नई string बनाते हैं।
Example: “Hello”, ‘World’, `JavaScript`
Number: Integers और decimals, 64-bit floating-point format में।
Theory: JavaScript में single number type है, जो IEEE 754 standard follow करता है। Precision issues हो सकते हैं (जैसे 0.1 + 0.2 !== 0.3)।
Example: 42, 3.14
Boolean: true या false, logical operations के लिए।
Theory: Comparisons (==, ===) और conditions में यूज़ होता है। === strict equality चेक करता है।
Example: let isActive = true;
Undefined: Variable जो declared है, लेकिन value assign नहीं हुई।
Theory: Default value जब variable initialize नहीं होता। Function जो return नहीं करता, वह undefined देता है।
Example: let x; // x is undefined
Null: Intentionally “no value” को दर्शाता है।
Theory: null एक object type है (historical bug), लेकिन logically “empty” value है। null और undefined में अंतर: null explicitly set होता है।
Example: let y = null;
BigInt: Arbitrary-precision integers के लिए।
Theory: Number type की limit (2^53 – 1) से बड़े integers के लिए। n suffix के साथ define होता है।
Example: let bigNum = 12345678901234567890n;
Symbol: Unique और immutable identifiers।
Theory: Object properties के लिए unique keys बनाते हैं। Symbol collision से बचाता है।
Example:
let sym = Symbol("id");
Theoretical Insight:
Primitive vs. Reference Types: String, Number, Boolean, Undefined, Null, BigInt, Symbol primitive हैं (immutable, pass-by-value)। Objects (arrays, functions) reference types हैं (mutable, pass-by-reference)।
Dynamic Typing Risks: Type changes से bugs आ सकते हैं, इसलिए type checking जरूरी है।
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: trueRun: Browser console या VS Code में टेस्ट करें।
Quiz: Data Types और Variable Rules
यहाँ 5 multiple-choice सवाल हैं:
let और const में क्या अंतर है?
A) let constant है, const variable
B) let reassigned हो सकता है, const नहीं
C) दोनों function-scoped हैं
D) दोनों block-scoped नहीं हैं
Answer: B) let reassigned हो सकता है, const नहीं
कौन सा data type text को represent करता है?
A) Number
B) String
C) Boolean
D) Null
Answer: B) String
typeof null का output क्या होगा?
A) “null”
B) “undefined”
C) “object”
D) “string”
Answer: C) “object”
Template literals में variables कैसे embed करते हैं?
A) + ऑपरेटर
B) ${} और backticks
C) % ऑपरेटर
D) concat() method
Answer: B) ${} और backticks
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:
Variables डिक्लेयर करें: name, age, city, hobby।
Template literals से formatted HTML string बनाएँ।
<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" class="card"></div>
<script>
let name = "Anjali";
let age = 25;
let city = "Delhi";
let hobby = "Reading";
let profile = `
<h2>${name}</h2>
<p>Age: ${age}</p>
<p>City: ${city}</p>
<p>Hobby: ${hobby}</p>
`;
document.getElementById("profileCard").innerHTML = profile;
</script>
</body>
</html>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: