JavaScript ????????? Variables ?????? Data Types ?????? ???????????? ?????????????????????

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 ?????????:

1. String: Text ???????????? (single quotes ', double quotes ", ?????? backticks `) ???

   • Theory: Strings immutable ?????????, ???????????? ?????? ????????? ???????????? ?????? ????????? ???????????? value change ???????????? ?????? ??????????????? Methods ???????????? slice(), toUpperCase() ?????? string ??????????????? ????????????

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

2. 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

3. Boolean: true ?????? false, logical operations ?????? ????????????

   • Theory: Comparisons (==, ===) ?????? conditions ????????? ???????????? ???????????? ????????? === strict equality ????????? ???????????? ?????????

   • Example: let isActive = true;

4. Undefined: Variable ?????? declared ??????, ??????????????? value assign ???????????? ????????????

   • Theory: Default value ?????? variable initialize ???????????? ??????????????? Function ?????? return ???????????? ????????????, ?????? undefined ???????????? ?????????

   • Example: let x; // x is undefined

5. Null: Intentionally "no value" ?????? ????????????????????? ?????????

   • Theory: null ?????? object type ?????? (historical bug), ??????????????? logically "empty" value ????????? null ?????? undefined ????????? ????????????: null explicitly set ???????????? ?????????

   • Example: let y = null;

6. BigInt: Arbitrary-precision integers ?????? ????????????

   • Theory: Number type ?????? limit (2^53 - 1) ?????? ???????????? integers ?????? ???????????? n suffix ?????? ????????? define ???????????? ?????????

   • Example: let bigNum = 12345678901234567890n;

7. 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: 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. 1. Variables ???????????????????????? ????????????: name, age, city, hobby???

   2. Template literals ?????? formatted HTML string ??????????????????

   3. <div> ????????? dynamically content ??????????????????

<!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:??

• • JavaScript Operators: Easy Guide for Beginners
  • JavaScript ?????? ???????????? ????????????: ???????????????????????? ?????? ????????? ????????? ????????????