JavaScript Operators: Easy Guide for Beginners

JavaScript में operators और expressions calculations, comparisons, और logical decisions के लिए core building blocks हैं। यह ब्लॉग arithmetic, comparison, logical, और assignment operators को गहराई से कवर करता है, साथ ही operator precedence और grouping को समझाता है। Extra theory, practical exercise (BMI calculator), quiz, और operator precedence diagram के साथ आप JavaScript में और confident हो जाएँगे।

JavaScript में ऑपरेटर्स क्या होते हैं? – What is Operators in JavaScript in Hindi?

Operators values पर operations perform करते हैं, और expressions operators और operands का combination हैं जो एक value produce करते हैं। उदाहरण: 5 + 3 एक expression है जो 8 देता है।

Theoretical Foundation

  • Operands: Operators जिन values पर काम करते हैं (जैसे 5, 3)।

  • Types of Operators: Unary (एक operand, जैसे !true), Binary (दो operands, जैसे 5 + 3), Ternary (तीन operands, जैसे condition ? expr1 : expr2)।

  • Evaluation: JavaScript expressions को left-to-right evaluate करता है, लेकिन precedence और associativity rules apply होते हैं।

  • Side Effects: कुछ operators (जैसे = या +=) variables की state बदलते हैं, जिसे side effect कहते हैं।

JavaScript में ऑपरेटर के प्रकार – Types of Operators in JavaScript in Hindi

1. Arithmetic Operators

Arithmetic operators mathematical calculations के लिए हैं।

  • + (Addition): दो values जोड़ता है।

    let sum = 10 + 5; // 15
  • (Subtraction): घटाव।

    let diff = 10 - 5; // 5
  • * (Multiplication): गुणा।

    let product = 10 * 5; // 50
  • / (Division): भाग।

    let quotient = 10 / 5; // 2
  • % (Modulus): Remainder देता है।

    let remainder = 10 % 3; // 1
  • ** (Exponentiation): Power calculate करता है।

    let power = 2 ** 3; // 8

Additional Theory:

  • Floating-Point Precision: JavaScript numbers IEEE 754 standard follow करते हैं, जिससे decimal calculations में precision issues हो सकते हैं (जैसे 0.1 + 0.2 !== 0.3)। Solution: toFixed() या libraries जैसे Big.js

  • Modulus with Negatives: % operator dividend का sign preserve करता है। उदाहरण: -10 % 3 = -1, क्योंकि -10 = (-3 * 3) - 1

  • Use Cases: Arithmetic operators loops, counters, और calculations (जैसे physics simulations, financial apps) में common हैं।

2. Comparison Operators

Comparison operators दो values की तुलना करते हैं और Boolean (true/false) return करते हैं।

  • == (Loose Equality): Values की तुलना, type coercion के साथ।

    console.log(5 == "5"); // true
  • === (Strict Equality): Value और type दोनों चेक करता है।

    console.log(5 === "5"); // false
  • != (Loose Inequality): Values में अंतर, type coercion के साथ।

    console.log(5 != "5"); // false
  • !== (Strict Inequality): Value और type में अंतर।

    console.log(5 !== "5"); // true
  • >, <, >=, <=: Greater than, less than, आदि।

    console.log(10 > 5); // true

Additional Theory:

  • Type Coercion Risks: == string को number या number को string में convert कर सकता है, जिससे bugs हो सकते हैं। हमेशा === यूज़ करें।

  • String Comparisons: Strings को ASCII/Unicode order में compare किया जाता है (जैसे "apple" < "banana" → true)

  • Edge Cases: NaN किसी भी value (खुद से भी) equal नहीं होता। NaN == NaN → false। isNaN() यूज़ करें।

    console.log(isNaN(10 / "text")); // true

3. Logical Operators

Logical operators conditions को combine करते हैं।

  • && (AND): दोनों conditions true होने पर true

    let isAdult = 20 > 18 && true; // true
  • || (OR): कोई एक condition true होने पर true

    let hasAccess = false || true; // true
  • ! (NOT): Condition को invert करता है।

    let isFalse = !true; // false

Additional Theory:

  • Short-Circuiting: && में पहली condition false हो तो दूसरी evaluate नहीं होती; || में पहली true हो तो दूसरी skip होती है। Performance optimization के लिए useful।

    let result = false && expensiveFunction(); // expensiveFunction() नहीं चलेगा
  • Truthy/Falsy Values: Non-boolean values पर logical operators truthy/falsy rules follow करते हैं। Falsy values: 0, “”, null, undefined, NaN, false

    console.log(0 || "Hello"); // "Hello" (0 is falsy)
  • Use Cases: Logical operators form validation, access control, और conditional rendering में यूज़ होते हैं।

4. Assignment Operators

Assignment operator’s variables को values assign करते हैं।

  • = (Assign): Value assign करता है।

    let x = 10;
  • +=, -=, *=, /=, आदि: Operation और assignment combine करते हैं।

    let y = 5;
    y += 3; // y = y + 3; // 8

Additional Theory:

  • Associativity: Assignment operators right-to-left evaluate होते हैं, इसलिए chaining possible है।

    let a, b;
    a = b = 10; // a = 10, b = 10
  • Performance: Compound assignment operators (+=, आदि) single operation में calculation और assignment करते हैं, जो memory-efficient है।

  • Edge Case: Objects के साथ, = shallow copy बनाता है, जिससे reference issues हो सकते हैं।

    let obj1 = { x: 10 };
    let obj2 = obj1;
    obj2.x = 20; // obj1.x भी 20 हो जाता है

5. Operator Precedence और Grouping

  • Precedence: Operators का execution order निर्धारित करता है। उदाहरण:

    • *, / की precedence +, से ज्यादा है।

    • उदाहरण: 5 + 3 * 2 = 11 (क्योंकि * पहले evaluate होता है)।

  • Grouping: Parentheses () precedence को override करते हैं।

    let result = (5 + 3) * 2; // 16

Additional Theory:

  • Precedence Table: MDN पर Operator Precedence देखें। Highest precedence: () और member access (.), lowest: ,.

  • Associativity: Same precedence वाले operators left-to-right (जैसे +, ) या right-to-left (जैसे =, **) evaluate होते हैं।

    let x = 2 ** 3 ** 2; // right-to-left: 2 ** (3 ** 2) = 2 ** 9 = 512
  • Best Practice: Complex expressions में हमेशा parentheses यूज़ करें readability और predictability के लिए।

  • Common Pitfall: Precedence ignorance से bugs। उदाहरण: true || false && false में && पहले evaluate होता है।

    console.log(true || false && false); // true (&& पहले, फिर ||)

Visual: Operator Precedence Diagram

Operators Precedence Diagram
यह diagram operator precedence को visually दर्शाता है। Highest precedence (जैसे *, /, **) ऊपर हैं, lowest (जैसे +, -, =) नीचे। Parentheses precedence को override करते हैं।

Practical Exercise: BMI Calculator

Task: एक program बनाएँ जो user से weight (kg) और height (m) ले और BMI (Body Mass Index) calculate करे।

  • Formula: BMI = weight / (height * height)

  • Input: prompt से weight और height लें।

  • Output: BMI को console में प्रिंट करें।

Code:

let weight = parseFloat(prompt("Enter weight in kg:"));
let height = parseFloat(prompt("Enter height in meters:"));
let bmi = weight / (height * height);
console.log(`Your BMI is: ${bmi.toFixed(2)}`);

Theoretical Notes:

  • parseFloat string input को number में convert करता है।

  • height * height में multiplication की precedence division से ज्यादा है, लेकिन parentheses clarity के लिए optional हैं।

  • toFixed(2) decimals को 2 places तक limit करता है।

  • Edge Case: Invalid input (जैसे non-numeric) से NaN हो सकता है। Input validation add करें।

    if (isNaN(weight) || isNaN(height)) {
      console.log("Please enter valid numbers");
    }

Run: Browser में HTML फाइल बनाएँ और टेस्ट करें।

Quiz: Operator Outputs

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

  1. 5 + 3 * 2 का output क्या है?

    • A) 16

    • B) 11

    • C) 10

    • D) 8

    • Answer: B) 11

  2. 5 == “5” का result क्या है?

    • A) true

    • B) false

    • C) undefined

    • D) null

    • Answer: A) true

  3. true && false का output क्या है?

    • A) true

    • B) false

    • C) null

    • D) undefined

    • Answer: B) false

  4. x = 5; x += 3; के बाद x का value क्या होगा?

    • A) 5

    • B) 3

    • C) 8

    • D) 15

    • Answer: C) 8

  5. 2 ** 3 ** 2 का output क्या है?

    • A) 64

    • B) 512

    • C) 9

    • D) 16

    • Answer: B) 512

Conclusion

इस ब्लॉग में हमने JavaScript के operators (arithmetic, comparison, logical, assignment) और expressions को गहराई से समझा। Precedence, associativity, और type coercion जैसे theoretical concepts ने foundation दिया। BMI calculator exercise और quiz ने practical skills को reinforce किया। अगले मॉड्यूल में हम control flow (if-else, loops) explore करेंगे। Practice करें और सवाल पूछें!

Also Read: 

Leave a Comment

Your email address will not be published. Required fields are marked *