Day 1: JavaScript Basics — Variables, Data Types & Operators 🚀

👋 Welcome to the 30-Day JavaScript Learning Journey!

JavaScript is the backbone of web development and one of the most in-demand programming languages today. If you are just starting out or want to strengthen your JavaScript foundation, you’re in the right place!

This is Day 1 of our 30-day JavaScript learning series, where we will start from the very basics and gradually move to advanced topics.

Today’s lesson is all about Variables, Data Types, and Operators — the building blocks of JavaScript. By the end of this post, you’ll be able to:
✅ Declare and use variables correctly
✅ Understand different types of data in JavaScript
✅ Use operators to perform calculations and logic

Let’s dive in! 🚀

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

📌 What Are Variables in JavaScript?

==> A variable is like a labeled container that holds a value. Imagine you have a box where you store your favorite snacks. You can open the box, check what’s inside, replace it with something else, or even lock it so nobody can change its contents.

In JavaScript, variables work in the same way. They store data that can be used and manipulated throughout the program.

🟢 How to Declare a Variable?

JavaScript provides three ways to declare a variable:
1️⃣ var – The old way (not recommended)
2️⃣ let – The modern and preferred way
3️⃣ const – Used for constants (values that don’t change)

var name = "TestUser";  // Old way (avoid using this)
let age = 25;       // Modern way (preferred)
const country = "India"; // Cannot be changed

🔹 Key Differences: var, let, and const

🔹 Best Practices for Using Variables:

✅ Use const whenever possible (for values that don’t change).
✅ Use let for variables that may change.
✅ Avoid var due to scoping issues.
✅ Give meaningful variable names (e.g., userName instead of x).

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

📌 Understanding JavaScript Data Types

==> In JavaScript, data types define the kind of values a variable can hold. Since JavaScript is a loosely typed (or dynamically typed) language, a variable can hold different types of data without specifying the type explicitly.

🔹 JavaScript Has Two Main Categories of Data Types

JavaScript data types are divided into two main categories:

1️⃣ Primitive Data Types (Immutable, stored directly in memory)
2️⃣ Non-Primitive (Reference) Data Types (Stored as references)

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

1️⃣ Primitive Data Types (Hold a single value) : Primitive data types are immutable (cannot be changed after creation) and are stored directly in memory.

JavaScript has 7 primitive data types:

• 📜 String - "Hello World"
• 🔢 Number - 100, 3.14
• ✅ Boolean - true, false
• ❓ Undefined - Variable declared but no value assigned
• ⚫ Null - Intentionally empty
• 🎭 Symbol (Unique identifier)
• 🔢 BigInt (For large numbers)

2️⃣ Non-Primitive (Reference) Data Types (Hold complex values) : Non-primitive data types, also known as reference types, are objects and derived data types. They can store collections of values or more complex entities. The two key non-primitive data types in JavaScript are:

JavaScript has 3 primitive data types:

• 🏠 Object - { name: "John", age: 30 }
• 📦 Array - [1, 2, 3, 4]
• 🎭 Function - function greet() { console.log("Hello!"); }

🔍 Example of Data Types in Action

let city = "New York";  // String
let temperature = 25.5; // Number
let isRaining = false;  // Boolean
let fruits = ["Apple", "Mango", "Banana"]; // Array
let person = { name: "John", age: 30 }; // Object

console.log(typeof city); // "string"
console.log(typeof temperature); // "number"
console.log(typeof fruits); // "object"

🛠 Tip: Use typeof to check the data type of any value!

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

📌 JavaScript Operators — Performing Operations

Just like a calculator, JavaScript uses operators to perform calculations and comparisons.

1️⃣ Arithmetic Operators 🧮 (Math Operations) : Used for basic calculations.

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   (Remainder)
console.log(a ** b); // 100000 (Exponentiation)

2️⃣ Assignment Operators 🖊 (Assigning Values) : Used to assign values to variables.

let x = 10;
x += 5; // x = x + 5 (Now x = 15)
x -= 3; // x = x - 3 (Now x = 12)
x *= 2; // x = x * 2 (Now x = 24)
x /= 4; // x = x / 4 (Now x = 6)

3️⃣ Comparison Operators 🔄 (Checking Conditions) : Used to compare values.

console.log(10 == "10");  // true  (Checks value only)
console.log(10 === "10"); // false (Checks value and type)
console.log(10 != 5);     // true  (Not equal)
console.log(10 > 5);      // true  (Greater than)
console.log(10 < 5);      // false (Less than)

4️⃣ Logical Operators 🤯 (Combining Conditions) : Used to make decisions.

let isSunny = true, isWarm = false;
console.log(isSunny && isWarm); // false (AND: both must be true)
console.log(isSunny || isWarm); // true  (OR: one must be true)
console.log(!isSunny); // false (NOT: reverses boolean value)

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

🎯 Real-World Example — Shopping Cart Calculation

Let’s put everything we learned into a simple shopping cart total price calculator:

let price = 500;
let discount = 10; // 10% discount

let finalPrice = price - (price * discount / 100);

console.log(`Final Price after Discount: $${finalPrice}`);
// Final Price after Discount: $450.

🛍 Scenario: You have a product worth $500, and a 10% discount applies. The final price is calculated as $450.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

🔚 Conclusion

Today, we learned:
✅ How to declare variables using var, let, and const
✅ The difference between primitive and reference data types
✅ How to use arithmetic, assignment, comparison, and logical operators

🔹 This knowledge is essential for writing JavaScript programs and will be the base for all future topics.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

📌 Next Up: Day 2 — JavaScript Functions & Scope

💬 Did you learn something new today? Let me know in the comments!

🔔 Follow me to stay updated for the next 29 days of JavaScript learning!