📖 JavaScript — Complete Notes

// This is a comment — it is not run by the browser
console.log("Hello, World!"); // Prints output to the console

// Semicolons end statements (optional but good practice)
let name = "Riya";            // Variable declaration
let age  = 22;                // Number
let isStudent = true;         // Boolean (true/false)

// Calling a function
alert("Welcome to JavaScript!");

/* ── External JS (best practice) ──
   In your HTML: <script src="app.js" defer></script>
   Inside app.js: */

console.log("External JS is loaded!");

// The 'defer' attribute means the script runs AFTER
// the HTML is fully loaded — preventing errors.

// Single-line comment — great for short notes

/*
  Multi-line comment
  Use this for longer explanations
  or to "comment out" blocks of code during debugging
*/

console.log("Comments are ignored by the browser");

// 1. Show in browser console (Developer Tools)
console.log("Best for debugging!");

// 2. Show a popup alert box
alert("Hello from JavaScript!");

// 3. Write directly into the HTML page
document.write("<h2>Hello World</h2>");

// 4. Change an element's text
document.getElementById("output").innerText = "Updated!";

// 5. console.error / console.warn
console.error("Something went wrong");
console.warn("Be careful here");

// Method 1: Inline (HTML attribute)
// <button onclick="sayHello()">Click Me</button>

function sayHello() {
  alert("You clicked the button!");
}

// Method 2: addEventListener (recommended)
const btn = document.getElementById("myBtn");

btn.addEventListener("click", function() {
  console.log("Button was clicked!");
});

// Common Events:
// click, dblclick, mouseover, mouseout
// keydown, keyup, keypress
// submit, change, focus, blur
// load, resize, scroll

// ── var (old way — avoid in modern code) ──
var city = "Dehradun";
var city = "Delhi"; // OK with var (can redeclare) — confusing!

// ── let (modern, use this for changing values) ──
let score = 0;
score = 50;          // ✅ can change
// let score = 100;  // ❌ cannot redeclare

// ── const (modern, use for values that won't change) ──
const PI = 3.14159;
// PI = 3;           // ❌ TypeError: Assignment to constant variable

// Example: student record
const studentName = "Aarav";
let studentMarks  = 85;

studentMarks = 90;  // marks can change
// studentName = "Rahul"; // name stays same (const)

console.log(studentName, studentMarks);

// ── TYPE CONVERSION (manual, explicit) ──
let numStr = "42";
let num    = Number(numStr);   // → 42
let str    = String(100);       // → "100"
let bool   = Boolean(0);        // → false

// ── TYPE COERCION (automatic, implicit — can be tricky!) ──
console.log("5" + 2);    // → "52"  (number becomes string)
console.log("5" - 2);    // → 3     (string becomes number)
console.log(true + 1);   // → 2
console.log(false + "x");// → "falsex"

// Best practice: always convert explicitly to avoid confusion
let input = "10";
let total = Number(input) + 5; // → 15 ✅

// var is hoisted as undefined
console.log(color); // → undefined (no error!)
var color = "blue";

// let/const are hoisted but NOT initialized (TDZ = Temporal Dead Zone)
// console.log(animal); // ❌ ReferenceError
let animal = "dog";

// Functions are fully hoisted
greet(); // ✅ Works!
function greet() {
  console.log("Hello from hoisted function!");
}

let a = 10, b = 3;

console.log(a + b);  // 13  — Addition
console.log(a - b);  // 7   — Subtraction
console.log(a * b);  // 30  — Multiplication
console.log(a / b);  // 3.33 — Division
console.log(a % b);  // 1   — Modulus (remainder)
console.log(a ** b); // 1000 — Exponentiation (10³)
console.log(++a);    // 11  — Pre-increment
console.log(b--);    // 3   — Post-decrement (returns then decrements)

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 %= 4;   // x = x % 4  → 2
x **= 3;  // x = x ** 3 → 8
x ??= 100;// x = x ?? 100 — assign only if x is null/undefined

console.log(5 == "5");   // true  (loose — coerces type)
console.log(5 === "5");  // false (strict — checks type too) ✅ prefer this
console.log(5 != "5");   // false
console.log(5 !== "5");  // true  ✅ prefer this
console.log(10 > 5);     // true
console.log(10 < 5);     // false
console.log(10 >= 10);   // true
console.log(10 <= 9);    // false

// && (AND) — both must be true
console.log(true && true);   // true
console.log(true && false);  // false

// || (OR) — at least one must be true
console.log(false || true);  // true
console.log(false || false); // false

// ! (NOT) — reverses
console.log(!true);  // false

// Nullish Coalescing (??) — use right side if left is null/undefined
let user = null;
let name = user ?? "Guest";  // "Guest"

// Optional Chaining (?.) — safe property access
let profile = null;
console.log(profile?.name);  // undefined (no error!)

// Syntax: condition ? valueIfTrue : valueIfFalse

let age = 18;
let status = age >= 18 ? "Adult" : "Minor";
console.log(status); // "Adult"

// Real-life: show discount or not
let isMember = true;
let price = isMember ? "₹499 (10% OFF)" : "₹549";
console.log(price);

// Nested ternary (use carefully!)
let score = 75;
let grade = score >= 90 ? "A" : score >= 70 ? "B" : "C";
console.log(grade); // "B"

console.log(typeof "Hello");       // "string"
console.log(typeof 42);            // "number"
console.log(typeof true);          // "boolean"
console.log(typeof undefined);     // "undefined"
console.log(typeof null);          // "object" ← famous JS bug
console.log(typeof {});            // "object"
console.log(typeof []);            // "object"
console.log(typeof function(){}); // "function"

// ── if / else if / else ──
let marks = 78;

if (marks >= 90) {
  console.log("Grade: A");
} else if (marks >= 75) {
  console.log("Grade: B");     // ← this runs
} else if (marks >= 60) {
  console.log("Grade: C");
} else {
  console.log("Grade: Fail");
}

// ── Switch Case (multiple fixed values) ──
let day = "Monday";

switch(day) {
  case "Monday":
    console.log("Start of the work week!");
    break;
  case "Friday":
    console.log("Almost weekend!");
    break;
  case "Saturday":
  case "Sunday":
    console.log("It's the weekend! 🎉");
    break;
  default:
    console.log("Just another weekday");
}

// ── Short-circuit evaluation (cool trick!) ──
let isLoggedIn = true;
isLoggedIn && console.log("Welcome back!"); // prints if true

let username = null;
let displayName = username || "Anonymous";  // fallback
console.log(displayName); // "Anonymous"

// Syntax: for(start; condition; step)
for (let i = 1; i <= 5; i++) {
  console.log("Count:", i);
}
// 1, 2, 3, 4, 5

// Loop through array
let fruits = ["🍎 Apple", "🍌 Banana", "🍊 Orange"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// Runs AS LONG AS condition is true
let count = 0;
while (count < 3) {
  console.log("count is", count);
  count++;
}
// 0, 1, 2

// Real-life: keep asking until correct answer
let answer;
let correctAnswer = "Dehradun";
// (In browser you'd use prompt())
// while(answer !== correctAnswer) { answer = prompt("Capital of Uttarakhand?"); }

// Runs AT LEAST ONCE — checks condition AFTER first run
let num = 10;
do {
  console.log("num:", num);  // prints 10 even though condition fails
  num++;
} while (num < 5);
// Output: num: 10  (runs once)

let colors = ["red", "green", "blue"];
for (let color of colors) {
  console.log(color);  // red, green, blue
}

// Works on strings too!
for (let char of "JS") {
  console.log(char);   // J, S
}

let student = { name: "Aarav", age: 20, city: "Dehradun" };

for (let key in student) {
  console.log(key, ":", student[key]);
}
// name : Aarav
// age  : 20
// city : Dehradun

// break — exit the loop entirely
for (let i = 0; i < 10; i++) {
  if (i === 5) break;
  console.log(i);  // 0, 1, 2, 3, 4
}

// continue — skip this iteration and go to next
for (let i = 0; i < 6; i++) {
  if (i === 3) continue;
  console.log(i);  // 0, 1, 2, 4, 5 (3 is skipped)
}

// 1. Function Declaration (hoisted — can call before definition)
function greet(name) {
  return "Hello, " + name + "!";
}
console.log(greet("Aarav")); // "Hello, Aarav!"

// 2. Function Expression (not hoisted)
const add = function(a, b) {
  return a + b;
};
console.log(add(3, 4));  // 7

// 3. Arrow Function (shorter syntax, no own 'this')
const multiply = (a, b) => a * b;
console.log(multiply(5, 6)); // 30

// 4. IIFE — Immediately Invoked Function Expression
(function() {
  console.log("I run immediately!");
})();

// 5. Named Arrow (stored in variable)
const square = n => n * n;
console.log(square(9)); // 81

// Default parameters
function welcome(name = "Guest", city = "Dehradun") {
  return `Welcome ${name} from ${city}!`;
}
console.log(welcome());              // Welcome Guest from Dehradun!
console.log(welcome("Priya", "Mumbai")); // Welcome Priya from Mumbai!

// Rest parameters — collect extra arguments into an array
function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3, 4, 5)); // 15

// Factorial: 5! = 5 × 4 × 3 × 2 × 1 = 120
function factorial(n) {
  if (n <= 1) return 1;         // base case — stops the recursion
  return n * factorial(n - 1);  // recursive call
}
console.log(factorial(5)); // 120
console.log(factorial(0)); // 1

// Primitives are PASS BY VALUE (copy is made)
function changeNum(n) { n = 100; }
let x = 5;
changeNum(x);
console.log(x); // Still 5 — original not changed

// Objects are PASS BY REFERENCE (same memory location)
function changeObj(obj) { obj.name = "Priya"; }
let person = { name: "Aarav" };
changeObj(person);
console.log(person.name); // "Priya" — original IS changed!

// Create an array
let fruits = ["Apple", "Banana", "Mango", "Orange"];

// Access elements (0-based index)
console.log(fruits[0]); // "Apple"
console.log(fruits[2]); // "Mango"
console.log(fruits[fruits.length - 1]); // Last item: "Orange"

// ── Essential Array Methods ──

// push / pop (end)
fruits.push("Grapes");    // Add to end → ["Apple","Banana","Mango","Orange","Grapes"]
fruits.pop();             // Remove from end → ["Apple","Banana","Mango","Orange"]

// unshift / shift (start)
fruits.unshift("Kiwi");   // Add to start
fruits.shift();           // Remove from start

// splice (remove or insert anywhere)
fruits.splice(1, 1);      // Remove 1 item at index 1
fruits.splice(1, 0, "Lychee"); // Insert at index 1

// slice (copy a portion — doesn't modify original)
let some = fruits.slice(1, 3); // Items at index 1 and 2

// indexOf / includes
console.log(fruits.indexOf("Mango")); // 2 or -1 if not found
console.log(fruits.includes("Apple")); // true or false

// join (array → string)
console.log(fruits.join(", ")); // "Apple, Banana, Mango"

// reverse and sort
let nums = [3, 1, 4, 1, 5, 9];
nums.sort((a, b) => a - b); // [1, 1, 3, 4, 5, 9]
nums.reverse();              // [9, 5, 4, 3, 1, 1]

let numbers = [1, 2, 3, 4, 5, 6];

// map — transform each item, returns NEW array
let doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10, 12]

// filter — keep items that pass the test, returns NEW array
let evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4, 6]

// reduce — boil array down to single value
let total = numbers.reduce((acc, n) => acc + n, 0);
console.log(total); // 21

// forEach — loop through (doesn't return anything)
numbers.forEach(n => console.log(n));

// find — first item that passes test
let firstEven = numbers.find(n => n % 2 === 0); // 2

// every / some
console.log(numbers.every(n => n > 0));  // true (all positive)
console.log(numbers.some(n => n > 5));   // true (6 is > 5)

// flat — flatten nested arrays
let nested = [1, [2, 3], [4, [5]]];
console.log(nested.flat());    // [1, 2, 3, 4, [5]]
console.log(nested.flat(2));   // [1, 2, 3, 4, 5]

// Remove duplicates
let arr = [1, 2, 2, 3, 3, 4];
let unique = [...new Set(arr)]; // [1, 2, 3, 4]

// Object literal (most common way)
const student = {
  name: "Aarav Sharma",
  age: 21,
  city: "Dehradun",
  isEnrolled: true,
  // Method inside object
  greet() {
    return `Hi! I am ${this.name} from ${this.city}.`;
  }
};

// Access properties
console.log(student.name);       // dot notation
console.log(student["city"]);    // bracket notation (for dynamic keys)
console.log(student.greet());

// Add / Update / Delete
student.course = "JavaScript";  // add
student.age = 22;               // update
delete student.isEnrolled;      // delete

// Check if key exists
console.log("name" in student);  // true
console.log(student.hasOwnProperty("city")); // true

// Destructuring (extract values cleanly)
const { name, age, city = "Unknown" } = student;
console.log(name, age, city);

// Spread operator (copy / merge objects)
const extra = { course: "React", year: 2025 };
const merged = { ...student, ...extra };

// Object.keys / values / entries
console.log(Object.keys(student));    // ["name", "age", "city", ...]
console.log(Object.values(student));  // ["Aarav Sharma", 22, "Dehradun", ...]
console.log(Object.entries(student)); // [["name","Aarav Sharma"], ...]

// Freeze (prevent changes)
const config = Object.freeze({ API: "https://api.codewareit.in" });
// config.API = "other"; // silently ignored

// Template literals (backtick) — the modern way
let name = "Codeware IT";
let city = "Dehradun";
console.log(`${name} is based in ${city}!`);
// Multi-line strings:
let html = `
  <div>
    <h1>${name}</h1>
  </div>
`;

// ── Key String Methods ──
let str = "  Hello, JavaScript!  ";

str.trim()          // "Hello, JavaScript!"  — remove whitespace
str.toUpperCase()   // "  HELLO, JAVASCRIPT!  "
str.toLowerCase()   // "  hello, javascript!  "
str.includes("Java")         // true
str.startsWith("Hello")      // false (leading spaces)
str.trim().startsWith("Hello") // true
str.indexOf("Java")          // 8
str.replace("JavaScript", "World") // "  Hello, World!  "
str.split(", ")              // ["  Hello", "JavaScript!  "]
str.slice(2, 7)              // "Hello"
str.padStart(25, "*")        // pads to length 25
str.repeat(2)                // repeats the string twice

// String to number and back
let numStr = "42.5";
console.log(Number(numStr));     // 42.5
console.log(parseInt(numStr));   // 42
console.log(parseFloat(numStr)); // 42.5
console.log((3.14159).toFixed(2)); // "3.14"

// camelCase converter
function toCamelCase(str) {
  return str.replace(/-./g, x => x[1].toUpperCase());
}
console.log(toCamelCase("my-best-course")); // "myBestCourse"

// A Promise has 3 states:
// pending → fulfilled (resolve) or rejected (reject)

const orderFood = new Promise((resolve, reject) => {
  let foodReady = true;  // pretend server check
  if (foodReady) {
    resolve("🍕 Pizza is ready!");
  } else {
    reject("❌ Sorry, out of stock");
  }
});

orderFood
  .then(msg => console.log("Success:", msg))  // on resolve
  .catch(err => console.log("Error:", err))    // on reject
  .finally(() => console.log("Order processed")); // always runs

// Promise.all — wait for ALL to finish
const p1 = Promise.resolve("Data 1");
const p2 = Promise.resolve("Data 2");
const p3 = new Promise(res => setTimeout(() => res("Data 3"), 1000));

Promise.all([p1, p2, p3]).then(values => console.log(values));
// ["Data 1", "Data 2", "Data 3"] after 1 second

// Promise.race — first one wins
Promise.race([p1, p3]).then(v => console.log(v)); // "Data 1"

// Promise.any — first SUCCESS wins (ignores rejections)
// Promise.allSettled — waits for all, never rejects

// async/await makes async code look synchronous (easier to read!)

async function fetchUser(id) {
  try {
    // Simulate API call (replace with real fetch)
    const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
    
    if (!response.ok) throw new Error("User not found!");
    
    const user = await response.json();
    console.log("User:", user.name);
    return user;
  } catch (error) {
    console.error("Something went wrong:", error.message);
  }
}

fetchUser(1);

// Parallel async calls (faster!)
async function getMultipleUsers() {
  const [user1, user2] = await Promise.all([
    fetch("https://jsonplaceholder.typicode.com/users/1").then(r => r.json()),
    fetch("https://jsonplaceholder.typicode.com/users/2").then(r => r.json()),
  ]);
  console.log(user1.name, user2.name);
}

// JS Object → JSON string (for sending to server)
const student = {
  name: "Priya",
  age: 20,
  skills: ["HTML", "CSS", "JavaScript"],
  address: { city: "Dehradun", state: "Uttarakhand" }
};

const jsonString = JSON.stringify(student);
console.log(jsonString);
// '{"name":"Priya","age":20,"skills":["HTML","CSS","JavaScript"],...}'

// Pretty print (for reading / display)
const pretty = JSON.stringify(student, null, 2);
console.log(pretty);

// JSON string → JS Object (for receiving from server)
const parsed = JSON.parse(jsonString);
console.log(parsed.name);          // "Priya"
console.log(parsed.skills[0]);     // "HTML"
console.log(parsed.address.city);  // "Dehradun"

// Check if a key exists
console.log("name" in parsed);  // true
console.log(parsed.hasOwnProperty("age")); // true

// Add element to JSON object
parsed.course = "React";
console.log(JSON.stringify(parsed));

// ── GET request (fetching data) ──
async function getUsers() {
  try {
    const res  = await fetch("https://jsonplaceholder.typicode.com/users");
    const data = await res.json();
    data.forEach(user => console.log(user.name));
  } catch (err) {
    console.error("Fetch failed:", err);
  }
}
getUsers();

// ── POST request (sending data) ──
async function createPost(postData) {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(postData)
  });
  const created = await res.json();
  console.log("Created:", created);
}
createPost({ title: "My First Post", body: "Hello!", userId: 1 });

// ── PUT vs PATCH ──
// PUT replaces the ENTIRE resource
// PATCH updates only specified fields
async function updateUser(id, changes) {
  const res = await fetch(`https://api.example.com/users/${id}`, {
    method: "PATCH",        // only update what changed
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(changes)
  });
  return res.json();
}

// ── localStorage ──
localStorage.setItem("username", "Aarav");
let user = localStorage.getItem("username"); // "Aarav"
localStorage.removeItem("username");
localStorage.clear(); // removes everything

// Store objects (must stringify!)
const prefs = { theme: "dark", lang: "en" };
localStorage.setItem("prefs", JSON.stringify(prefs));
const saved = JSON.parse(localStorage.getItem("prefs"));
console.log(saved.theme); // "dark"

// ── sessionStorage ── (same API, dies with tab)
sessionStorage.setItem("token", "abc123");
let tok = sessionStorage.getItem("token");

// ── JWT (JSON Web Token) ──
// Structure: header.payload.signature
// Used for authentication — store in memory or httpOnly cookie
// NEVER store JWT in localStorage if it's super sensitive (XSS risk)

console.log("1 — Start");              // Call Stack (sync)

setTimeout(() => {
  console.log("2 — setTimeout");       // Macrotask Queue
}, 0);

Promise.resolve().then(() => {
  console.log("3 — Promise");          // Microtask Queue (higher priority!)
});

console.log("4 — End");               // Call Stack (sync)

// OUTPUT ORDER:
// 1 — Start
// 4 — End
// 3 — Promise    ← microtask runs BEFORE macrotask
// 2 — setTimeout ← macrotask runs last

// Why? Event Loop checks Microtask Queue first
// before moving to the next Macrotask!