🚀 Mastering JavaScript: Variables, Data Types, Operators & Control Flow Simplified! 🔥

Suraj KumarSuraj Kumar
10 min read

VARIABLE KA MATLAB JAVASCRIPT MAI 🤔

JavaScript mein "variable" ek container ki tarah hota hai jisme aap data (jaise numbers, text, objects, etc.) store kar sakte ho. Jaise real life mein hum dibbe mein samaan rakhte hain, waise hi variable ka use data ko temporarily hold karne ke liye hota hai.


VARIABLE DECLARE KARNE KE TAREEKE 🛠️
JavaScript mein variable banane ke liye 3 keywords use hote hain:

  1. var (Old way, ab kam use hota hai)

     var naam = "Suraj"; // String type ka variable
    
  2. let (New way, flexible variables ke liye)

      let age = 25; // Number type ka variable
    
  3. const (Constant variable, jisko change nahi kar sakte)

const pi = 3.14; // Constant value

var,let and const difference✨

Featurevar 🛑 (Avoid)let ✅ (Recommended)const 🔒 (Fixed)
ScopeFunction ScopedBlock ScopedBlock Scoped
HoistingYes (But undefined milega)Yes (Use se pehle declare zaroori)Yes (Use se pehle declare zaroori)
Redeclaration✅ Allowed❌ Not Allowed❌ Not Allowed
Reassignment✅ Allowed✅ Allowed❌ Not Allowed
Use CaseAvoid (Old JS)Use for variables that changeUse for values that never change
Examplevar x = 10;let y = 20;const pi = 3.14;

VARIABLE BANANE KE RULES

  • Variable names letters, numbers, _, $ se start ho sakte hain.

  • Names case-sensitive hote hain (jaise age aur Age alag hain).

  • Reserved keywords (jaise let, if) use nahi kar sakte.

  • CamelCase use karna behtar hai (jaise userName).


Data Types in Javascripts📔

JavaScript mein 8 main types of data types hain! 🎉 Ye sab JavaScript ki duniya mein apni jagah banaye hue hain. Chalo, let's take a quick look:

  1. Primitive Data Types (Simple values):

    • Number: Numbers ko represent karta hai (int, float, etc.)

    • String: Text ko represent karta hai (e.g., words, sentences)

    • Boolean: True ya false value hoti hai (logical values)

    • Undefined: Jab koi variable declare to hota hai, lekin usko value assign nahi ki gayi hoti

    • Null: Value ki absence ko represent karta hai (manually set kiya jata hai)

    • Symbol: Unique, immutable values create karta hai (used for object property keys)

    • BigInt: Bahut bade integer values ko represent karta hai

Data TypeDescriptionExample
NumberNumbers ko represent karta hai (int, float, etc.)42, 3.14, -5
StringText ko represent karta hai (words, sentences)'Hello', "JavaScript"
BooleanTrue ya false value hoti hai (logical values)true, false
UndefinedJab koi variable declare to hota hai, lekin usko value assign nahi ki gayi hotilet x; (undefined by default)
NullValue ki absence ko represent karta hai (manually set kiya jata hai)let y = null;
SymbolUnique, immutable values create karta hai (used for object property keys)let sym = Symbol('unique');
BigIntBahut bade integer values ko represent karta haiBigInt(12345678901234567890)
  1. Non-Primitive Data Type (Complex structures):

    • Object: Key-value pairs ka collection, jisme properties aur methods ho sakte hain

    • Array: Ordered list of items (which are essentially objects in JavaScript)

Non-Primitive Data TypeDescriptionExample
ObjectKey-value pairs ka collection, jisme properties aur methods ho sakte hain{ name: "John", age: 30 }
ArrayOrdered list of items (jo ki JavaScript mein objects hote hain)[1, 2, 3], ['apple', 'banana']

Operators In JS✨

JavaScript mai mainly 6 types ke operators hote hain. Chaliye unke examples ke sath samajhte hain:

1️⃣ Arithmetic Operators

Ye maths wale calculations ke liye hote hain.

let a = 10, b = 5;
console.log(a + b);  // 15 (Addition)
console.log(a - b);  // 5  (Subtraction)
console.log(a * b);  // 50 (Multiplication)
console.log(a / b);  // 2  (Division)
console.log(a % b);  // 0  (Modulus)
console.log(a ** b); // 100000 (Exponentiation)

2️⃣ Assignment Operators (Value assign karne wale)

Ye kisi variable ko value dene ke kaam aate hain.

let x = 10;
x += 5;  // x = x + 5 → 15
x -= 3;  // x = x - 3 → 12
x *= 2;  // x = x * 2 → 24
x /= 4;  // x = x / 4 → 6
x %= 3;  // x = x % 3 → 0

3️⃣ Comparison Operators (Compare karne wale)

Ye check karte hain ki do values same hain ya nahi.

console.log(10 == "10");  // true  (Only value check hoti hai)
console.log(10 === "10"); // false (Type bhi check hoti hai)
console.log(10 != 5);     // true  (Not equal to)
console.log(10 > 5);      // true  (Greater than)
console.log(10 < 5);      // false (Less than)

4️⃣ Logical Operators (Logical conditions ke liye)

Ye mainly AND (&&), OR (||), NOT (!) hote hain.

console.log(true && false); // false  (Dono true hone chahiye)
console.log(true || false); // true   (Koi ek bhi true ho to chalega)
console.log(!true);         // false  (Opposite kardega)

5️⃣ Bitwise Operators (Binary wale)

Ye numbers ko bits mai convert karke operate karte hain.

console.log(5 & 1);  // 1  (AND)
console.log(5 | 1);  // 5  (OR)
console.log(5 ^ 1);  // 4  (XOR)
console.log(~5);     // -6 (NOT)
console.log(5 << 1); // 10 (Left Shift)
console.log(5 >> 1); // 2  (Right Shift)

6️⃣ Ternary Operator (Shortcut if-else wala)

Ek hi line mai if-else likhne ke liye kaam aata hai.

let age = 18;
let result = (age >= 18) ? "Eligible" : "Not Eligible";
console.log(result);  // Eligible

JavaScript Operators 📋 (Full Deep Detail)

🔹 Type⚡ Operator🔥 Meaning📝 Example🎯 Output
1️⃣ Arithmetic (Maths wale)+Addition (jodna)10 + 515
-Subtraction (ghatana)10 - 55
*Multiplication (guna)10 * 550
/Division (bhag)10 / 52
%Modulus (remainder dega)10 % 31
**Exponentiation (power)2 ** 38
2️⃣ Assignment (Value assign karne wale)=Value assign karegax = 10x = 10
+=Add & assignx += 5 (x = x + 5)x = 15
-=Subtract & assignx -= 3 (x = x - 3)x = 12
*=Multiply & assignx *= 2 (x = x * 2)x = 24
/=Divide & assignx /= 4 (x = x / 4)x = 6
%=Modulus & assignx %= 3 (x = x % 3)x = 0
3️⃣ Comparison (Compare karne wale)==Value same hai ya nahi10 == "10"true
===Value + Type bhi same hai ya nahi10 === "10"false
!=Not equal to10 != 5true
>Greater than10 > 5true
<Less than10 < 5false
>=Greater than or equal to10 >= 10true
<=Less than or equal to10 <= 5false
4️⃣ Logical (Conditions ke liye)&&AND (Dono true hone chahiye)true && falsefalse
``OR (Ek bhi true ho to chalega)
!NOT (Opposite kar dega)!truefalse
5️⃣ Bitwise (Binary ke saath kaam karne wale)&AND5 & 11
``OR`5
^XOR5 ^ 14
~NOT~5-6
<<Left Shift5 << 110
>>Right Shift5 >> 12
6️⃣ Ternary (Short if-else wala)? :Condition check karega(age >= 18) ? "Adult" : "Minor""Adult"

🔥 JavaScript Control Flow: if, else, and switch 🔥

Control flow ka matlab hota hai code ko condition ke according execute karna. JavaScript me 3 main control flow statements hote hain:

1️⃣ if Statement (Condition check karne wala)

👉 Agar condition true hai to code chalega, warna nahi chalega.

💖Flowchart:

✅ Example:

let age = 18;
if (age >= 18) { 
    console.log("You are an adult! ✅");
}

Agar age 18 ya usse zyada hoga, tabhi "You are an adult!" print hoga.


2️⃣ if-else Statement (Condition false ho to alag code chalega)

👉 Agar condition true hai to ek kaam hoga, warna dusra kaam hoga.

💖Flowchart:

✅ Example:

let age = 16;
if (age >= 18) {
    console.log("You can vote 🗳️");
} else {
    console.log("You are too young to vote ❌");
}

Agar age 18 se kam hoga, to "You are too young to vote" print hoga.


3️⃣ if-else if-else (Multiple Conditions Handle karne ke liye)

👉 Jab ek se zyada conditions ho, tab else if ka use hota hai.

💖Flowchart:

✅ Example:

let marks = 85;
if (marks >= 90) {
    console.log("Grade: A+ 🎯");
} else if (marks >= 75) {
    console.log("Grade: A 🏆");
} else if (marks >= 60) {
    console.log("Grade: B 😊");
} else {
    console.log("Grade: C 😐");
}

Agar marks 75 se zyada hai, to "Grade: A" print hoga.


4️⃣ switch Statement (Multiple Cases Handle karne ke liye)

👉 Agar ek variable ke multiple values compare karni ho to switch ka use hota hai.

💖Flowchart:

✅ Example:

let day = 3;
switch (day) {
    case 1:
        console.log("Monday 😴");
        break;
    case 2:
        console.log("Tuesday 🏋️");
        break;
    case 3:
        console.log("Wednesday 🍕");
        break;
    case 4:
        console.log("Thursday 🏖️");
        break;
    case 5:
        console.log("Friday 🎉");
        break;
    case 6:
        console.log("Saturday 💤");
        break;
    case 7:
        console.log("Sunday 🏕️");
        break;
    default:
        console.log("Invalid day ❌");
}

Agar day = 3 hai to output "Wednesday 🍕" aayega.
Har case ke baad break lagana zaroori hai, warna sab cases execute ho sakte hain.


🎯 Difference Between if-else & switch

Featureif-elseswitch
Use CaseJab complex conditions hoJab ek variable ki multiple values check karni ho
PerformanceSlow ho sakta hai agar bohot zyada conditions hoFast hota hai kyunki direct matching karta hai
ReadabilityZyada conditions ho to confusing ho sakta haiClean & easy to understand

Yeh article JavaScript variables, data types, operators, aur control flow statements ka overview deta hai. Isme bataya gaya hai kaise `var`, `let`, aur `const` se variables declare karte hain, JavaScript ke primitive aur non-primitive data types ko highlight karta hai, aur operators ko arithmetic, assignment, comparison, logical, bitwise, aur ternary mein categorize karta hai. Saath hi, yeh control flow mechanisms jaise `if`, `if-else`, `if-else-if`, aur `switch` statements ko explore karta hai, unke uses aur differences ko outline karta hai taaki code execution mein effective decision-making ho sake.

14
Subscribe to my newsletter

Read articles from Suraj Kumar directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Suraj Kumar
Suraj Kumar

I am MERN STACK Web Developer.I am Student of BCA.