🏠

🎓 Introduction to JavaScript

        🌟 Objective: Learn Variables, Data Types, Operators in JavaScript with
        Practical Examples!
      

📑 Table of Contents

What is JavaScript?
Setting up Environment
Variables and Data Types
Declaring Variables
Naming Rules
Constants (const)
var vs let vs const
Operators in JavaScript
Type Conversion
Common Beginner Mistakes
Practice Exercises

🌐 What is JavaScript?

JavaScript is a versatile programming language that makes websites interactive and dynamic.
It runs on browsers (like Chrome, Firefox) and servers (Node.js).
JavaScript is used in websites, mobile apps, games, and IoT devices.
Created in 1995, it's now one of the world's most popular programming languages.
It's not related to Java despite the similar name.

🛠️ Setting up Environment

Install VS Code from code.visualstudio.com.
Create a folder for your JavaScript projects.
Create a file named first.js in that folder.
Open Chrome Browser → Right click → Inspect → Console tab.
First Code:
```
console.log("Hello, World!");
```

📈 Variables and Data Types

Variables are containers for storing data values. JavaScript has several data types:

Type	Description	Example	Real-world Use
String	Text inside quotes	`"Hello"`	User names, messages, text content
Number	Numeric values	`123` or `3.14`	Ages, prices, quantities
Boolean	True or False	`true` / `false`	User logged in status, form validation
Null	Intentional empty value	`null`	When you want to explicitly clear a value
Undefined	No value assigned yet	`undefined`	Default value for uninitialized variables
Object	Key-value pair collection	`{ name: "John", age: 30 }`	User profiles, product details
Array	Ordered list of items	`["Apple", "Banana", "Cherry"]`	Shopping cart items, to-do lists

✏️ Declaring Variables

JavaScript provides three ways to declare variables:

let age = 25;        // Block-scoped variable that can be reassigned
  var name = "John";    // Function-scoped variable (older syntax)
  const birthYear = 2000; // Block-scoped constant (cannot be reassigned)

⚡ Naming Rules

✅ Can include: letters, digits, $, and _
✅ Must start with a letter, $, or _
✅ JavaScript is case-sensitive (myName ≠ myname)
✅ Use camelCase for multi-word names: firstName
❌ Cannot start with a number (e.g., 1name)
❌ Cannot use reserved keywords (like let, const, function)

Common Naming Convention Patterns:

camelCase: First word lowercase, others capitalized (e.g., firstName) - Used for variables and functions
PascalCase: All words capitalized (e.g., FirstName) - Used for classes and constructor functions
UPPER_SNAKE_CASE: All uppercase with underscores (e.g., MAX_SIZE) - Used for constants

🎯 Constants (`const`)

const pi = 3.14159;
  pi = 3.14; // ❌ Error! Cannot reassign a constant

🧠 Note: You can modify contents inside an object or array declared with const, but not reassign the variable itself.

const car = { brand: "Toyota" };
  car.brand = "Honda"; // ✅ Allowed - Modifying property
  car.model = "Civic"; // ✅ Allowed - Adding property
  car = {};            // ❌ Not allowed - Reassigning variable
  
  const colors = ["red", "green"];
  colors.push("blue");  // ✅ Allowed - Modifying array
  colors = ["yellow"];  // ❌ Not allowed - Reassigning variable

🧠 var vs let vs const (Quick Tips)

Feature	var	let	const
Scope	Function	Block	Block
Re-declarable?	✅ Yes	🚫 No	🚫 No
Re-assignable?	✅ Yes	✅ Yes	🚫 No
Hoisting	✅ (initialized with undefined)	✅ (but not initialized)	✅ (but not initialized)
When to use	Legacy code	Values that change	Values that shouldn't change

Best Practice: Use const by default, let when you need to reassign, and avoid var in modern JavaScript.

➕ Operators in JavaScript

🧮 Arithmetic Operators

Operator	Description	Example	Result
+	Addition	`5 + 2`	7
-	Subtraction	`5 - 2`	3
*	Multiplication	`5 * 2`	10
/	Division	`10 / 2`	5
%	Modulus (remainder)	`5 % 2`	1
**	Exponentiation	`2 ** 3`	8
++	Increment	`let x = 5; x++;`	x becomes 6
--	Decrement	`let x = 5; x--;`	x becomes 4

let a = 10;
  let b = 3;
  console.log(a + b);  // 13
  console.log(a - b);  // 7
  console.log(a * b);  // 30
  console.log(a / b);  // 3.333...
  console.log(a % b);  // 1
  console.log(a ** 2); // 100 (10 squared)
  
  let c = 5;
  console.log(c++);    // 5 (returns c first, then increments)
  console.log(c);      // 6
  let d = 5;
  console.log(++d);    // 6 (increments d first, then returns)

Special Case: The + operator can also concatenate strings:

let firstName = "John";
  let lastName = "Doe";
  console.log(firstName + " " + lastName); // "John Doe"

📝 Assignment Operators

Operator	Description	Example	Equivalent to
=	Assign value	`x = 10`	`x = 10`
+=	Add and assign	`x += 5`	`x = x + 5`
-=	Subtract and assign	`x -= 2`	`x = x - 2`
*=	Multiply and assign	`x *= 3`	`x = x * 3`
/=	Divide and assign	`x /= 2`	`x = x / 2`
%=	Modulus and assign	`x %= 3`	`x = x % 3`
**=	Exponent and assign	`x **= 2`	`x = x ** 2`

let x = 5;
  x += 3; // x = 8
  x -= 2; // x = 6
  x *= 4; // x = 24
  x /= 6; // x = 4
  console.log(x); // 4
  
  // String assignment
  let greeting = "Hello";
  greeting += " World"; // greeting = "Hello World"
  console.log(greeting);

⚖️ Comparison Operators

Operator	Description	Example	Result
==	Equal to (value only)	`5 == '5'`	true
===	Strict equal (value and type)	`5 === '5'`	false
!=	Not equal (value only)	`5 != 3`	true
!==	Strict not equal (value and type)	`5 !== '5'`	true
>	Greater than	`5 > 2`	true
<	Less than	`2 < 5`	true
>=	Greater than or equal to	`5 >= 5`	true
<=	Less than or equal to	`3 <= 5`	true

let num = 5;
  console.log(num == '5');   // true - values are equal
  console.log(num === '5');  // false - types are different
  console.log(num != 3);     // true - values are not equal
  console.log(num !== '5');  // true - types are different
  console.log(num > 3);      // true
  console.log(num < 10);     // true
  console.log(num >= 5);     // true
  console.log(num <= 5);     // true

Best Practice: Always use strict equality (===) and strict inequality (!==) to avoid unexpected type conversions.