JavaScript

// var - old way (function scoped, avoid using)
var oldWay = "Don't use var";

// let - for values that change (block scoped)
let age = 25;
age = 26;  // ✅ Can be reassigned

// const - for values that don't change (block scoped)
const name = "Om Pandey";
// name = "John";  // ❌ Error: Cannot reassign const

// const with objects/arrays - contents CAN change
const person = { name: "Om" };
person.name = "John";  // ✅ This works!
person.age = 25;       // ✅ Can add properties

// Naming conventions
let camelCase = "variables use camelCase";
const SCREAMING_SNAKE = "constants sometimes use this";
let _privateVar = "underscore for private";
let $specialVar = "dollar sign allowed";

// ============ PRIMITIVE TYPES ============

// String - text
let firstName = "Om";
let lastName = 'Pandey';
let greeting = `Hello, ${firstName}!`;  // Template literal

// Number - integers and decimals
let integer = 42;
let decimal = 3.14;
let negative = -10;
let infinity = Infinity;
let notANumber = NaN;  // Not a Number

// BigInt - for very large numbers
let bigNumber = 9007199254740991n;

// Boolean - true or false
let isActive = true;
let isLoggedIn = false;

// Undefined - declared but not assigned
let notDefined;
console.log(notDefined);  // undefined

// Null - intentionally empty
let emptyValue = null;

// Symbol - unique identifier
let id = Symbol("id");


// ============ REFERENCE TYPES ============

// Object
let person = {
    name: "Om Pandey",
    age: 25,
    isStudent: true
};

// Array
let fruits = ["apple", "banana", "orange"];

// Function
function sayHello() {
    return "Hello!";
}


// ============ TYPEOF OPERATOR ============
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" (JS bug!)
console.log(typeof {});          // "object"
console.log(typeof []);          // "object"
console.log(typeof function(){}); // "function"

const text = "Hello, JavaScript World!";

// Length
console.log(text.length);  // 24

// Access characters
console.log(text[0]);       // "H"
console.log(text.charAt(0)); // "H"

// Case conversion
console.log(text.toUpperCase());  // "HELLO, JAVASCRIPT WORLD!"
console.log(text.toLowerCase());  // "hello, javascript world!"

// Search
console.log(text.indexOf("JavaScript"));    // 7
console.log(text.includes("World"));        // true
console.log(text.startsWith("Hello"));      // true
console.log(text.endsWith("!"));            // true

// Extract
console.log(text.slice(7, 17));      // "JavaScript"
console.log(text.substring(7, 17));  // "JavaScript"

// Replace
console.log(text.replace("World", "Universe"));
// "Hello, JavaScript Universe!"

// Split into array
console.log(text.split(" "));  // ["Hello,", "JavaScript", "World!"]

// Trim whitespace
const messy = "  Hello World  ";
console.log(messy.trim());  // "Hello World"

// Template Literals (backticks)
const name = "Om";
const age = 25;
console.log(`My name is ${name} and I'm ${age} years old.`);
// "My name is Om and I'm 25 years old."

// Multi-line strings
const multiLine = `
    This is line 1
    This is line 2
    This is line 3
`;

// ============ ARITHMETIC OPERATORS ============
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.333... (division)
console.log(a % b);   // 1  (modulus - remainder)
console.log(a ** b);  // 1000 (exponentiation)

// Increment/Decrement
let x = 5;
console.log(x++);  // 5 (returns, then increments)
console.log(x);    // 6
console.log(++x);  // 7 (increments, then returns)


// ============ COMPARISON OPERATORS ============
console.log(5 == "5");    // true  (loose equality - type coercion)
console.log(5 === "5");   // false (strict equality - no coercion)
console.log(5 != "5");    // false
console.log(5 !== "5");   // true
console.log(5 > 3);       // true
console.log(5 < 3);       // false
console.log(5 >= 5);      // true
console.log(5 <= 4);      // false


// ============ LOGICAL OPERATORS ============
console.log(true && true);   // true (AND)
console.log(true && false);  // false
console.log(true || false);  // true (OR)
console.log(false || false); // false
console.log(!true);          // false (NOT)
console.log(!false);         // true


// ============ ASSIGNMENT OPERATORS ============
let num = 10;
num += 5;   // num = num + 5  → 15
num -= 3;   // num = num - 3  → 12
num *= 2;   // num = num * 2  → 24
num /= 4;   // num = num / 4  → 6
num %= 4;   // num = num % 4  → 2


// ============ TERNARY OPERATOR ============
const age = 20;
const status = age >= 18 ? "Adult" : "Minor";
console.log(status);  // "Adult"


// ============ NULLISH COALESCING (??) ============
const username = null;
const displayName = username ?? "Guest";
console.log(displayName);  // "Guest"


// ============ OPTIONAL CHAINING (?.) ============
const user = { profile: { name: "Om" } };
console.log(user?.profile?.name);     // "Om"
console.log(user?.settings?.theme);  // undefined (no error!)

// ============ IF / ELSE IF / ELSE ============
const score = 85;

if (score >= 90) {
    console.log("Grade: A");
} else if (score >= 80) {
    console.log("Grade: B");
} else if (score >= 70) {
    console.log("Grade: C");
} else {
    console.log("Grade: F");
}
// Output: "Grade: B"


// ============ SWITCH STATEMENT ============
const day = "Monday";

switch (day) {
    case "Monday":
        console.log("Start of the week!");
        break;
    case "Friday":
        console.log("TGIF!");
        break;
    case "Saturday":
    case "Sunday":
        console.log("Weekend!");
        break;
    default:
        console.log("Regular day");
}


// ============ TRUTHY & FALSY VALUES ============
// Falsy: false, 0, "", null, undefined, NaN
// Everything else is truthy

if ("Hello") console.log("Truthy!");  // Runs
if (0) console.log("Falsy!");          // Doesn't run
if ([]) console.log("Empty array is truthy!");  // Runs!
if ({}) console.log("Empty object is truthy!"); // Runs!

// ============ FOR LOOP ============
for (let i = 0; i < 5; i++) {
    console.log(`Iteration: ${i}`);
}
// 0, 1, 2, 3, 4


// ============ WHILE LOOP ============
let count = 0;
while (count < 3) {
    console.log(`Count: ${count}`);
    count++;
}


// ============ DO-WHILE LOOP ============
let num = 0;
do {
    console.log(`Number: ${num}`);
    num++;
} while (num < 3);


// ============ FOR...OF (Arrays, Strings) ============
const fruits = ["apple", "banana", "orange"];
for (const fruit of fruits) {
    console.log(fruit);
}
// apple, banana, orange


// ============ FOR...IN (Objects) ============
const person = { name: "Om", age: 25, city: "Kathmandu" };
for (const key in person) {
    console.log(`${key}: ${person[key]}`);
}
// name: Om, age: 25, city: Kathmandu


// ============ BREAK & CONTINUE ============
for (let i = 0; i < 10; i++) {
    if (i === 3) continue;  // Skip 3
    if (i === 7) break;     // Stop at 7
    console.log(i);
}
// 0, 1, 2, 4, 5, 6

// ============ CREATING ARRAYS ============
const fruits = ["apple", "banana", "orange"];
const numbers = new Array(1, 2, 3, 4, 5);
const mixed = [1, "two", true, { name: "Om" }];


// ============ ACCESSING ELEMENTS ============
console.log(fruits[0]);         // "apple"
console.log(fruits[fruits.length - 1]);  // "orange" (last)
console.log(fruits.at(-1));      // "orange" (ES2022)


// ============ MODIFYING ARRAYS ============
fruits.push("mango");       // Add to end
fruits.pop();               // Remove from end
fruits.unshift("grape");    // Add to beginning
fruits.shift();             // Remove from beginning
fruits.splice(1, 1, "kiwi"); // Remove 1 at index 1, add "kiwi"


// ============ ARRAY METHODS ============
const nums = [1, 2, 3, 4, 5];

// map - transform each element
const doubled = nums.map(n => n * 2);
console.log(doubled);  // [2, 4, 6, 8, 10]

// filter - keep elements that pass test
const evens = nums.filter(n => n % 2 === 0);
console.log(evens);  // [2, 4]

// reduce - reduce to single value
const sum = nums.reduce((acc, n) => acc + n, 0);
console.log(sum);  // 15

// find - find first matching element
const found = nums.find(n => n > 3);
console.log(found);  // 4

// findIndex - find index of first match
const index = nums.findIndex(n => n > 3);
console.log(index);  // 3

// some - check if any element passes
console.log(nums.some(n => n > 4));  // true

// every - check if all elements pass
console.log(nums.every(n => n > 0)); // true

// includes - check if element exists
console.log(nums.includes(3));  // true

// sort - sort array (mutates!)
const unsorted = [3, 1, 4, 1, 5];
unsorted.sort((a, b) => a - b);  // [1, 1, 3, 4, 5]

// reverse - reverse array (mutates!)
nums.reverse();  // [5, 4, 3, 2, 1]

// join - convert to string
console.log(["a", "b", "c"].join("-"));  // "a-b-c"

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


// ============ SPREAD OPERATOR ============
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];  // [1, 2, 3, 4, 5, 6]
const copy = [...arr1];              // Clone array


// ============ DESTRUCTURING ============
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first);  // 1
console.log(second); // 2
console.log(rest);   // [3, 4, 5]

// ============ CREATING OBJECTS ============
const person = {
    firstName: "Om",
    lastName: "Pandey",
    age: 25,
    isStudent: true,
    skills: ["JavaScript", "Python", "React"],
    address: {
        city: "Kathmandu",
        country: "Nepal"
    },
    // Method
    getFullName() {
        return `${this.firstName} ${this.lastName}`;
    }
};


// ============ ACCESSING PROPERTIES ============
console.log(person.firstName);       // "Om" (dot notation)
console.log(person["lastName"]);     // "Pandey" (bracket notation)
console.log(person.address.city);    // "Kathmandu"
console.log(person.getFullName());   // "Om Pandey"


// ============ MODIFYING OBJECTS ============
person.email = "[email protected]";  // Add property
person.age = 26;                  // Update property
delete person.isStudent;          // Delete property


// ============ OBJECT METHODS ============
console.log(Object.keys(person));    // ["firstName", "lastName", ...]
console.log(Object.values(person));  // ["Om", "Pandey", ...]
console.log(Object.entries(person)); // [["firstName", "Om"], ...]

// Check if property exists
console.log("firstName" in person);           // true
console.log(person.hasOwnProperty("age"));  // true


// ============ SPREAD OPERATOR ============
const personCopy = { ...person };                   // Clone object
const updated = { ...person, age: 30 };              // Clone and update
const merged = { ...person, ...{ job: "Developer" }}; // Merge objects


// ============ DESTRUCTURING ============
const { firstName, lastName, age } = person;
console.log(firstName);  // "Om"

// With renaming
const { firstName: fName, lastName: lName } = person;

// With default values
const { job = "Unknown" } = person;

// Nested destructuring
const { address: { city } } = person;
console.log(city);  // "Kathmandu"


// ============ SHORTHAND PROPERTIES ============
const name = "Om";
const city = "Kathmandu";
const user = { name, city };  // Same as { name: name, city: city }


// ============ COMPUTED PROPERTY NAMES ============
const key = "dynamicKey";
const obj = {
    [key]: "Dynamic Value",
    ["key" + 1]: "Key 1"
};
console.log(obj.dynamicKey);  // "Dynamic Value"

// ============ LOCAL STORAGE ============
// Persists even after browser closes
// Store data
localStorage.setItem("username", "Om");
localStorage.setItem("theme", "dark");

// Store objects (must stringify)
const user = { name: "Om", age: 25 };
localStorage.setItem("user", JSON.stringify(user));

// Retrieve data
const username = localStorage.getItem("username");
const savedUser = JSON.parse(localStorage.getItem("user"));

// Remove item
localStorage.removeItem("username");

// Clear all
localStorage.clear();

// Check length
console.log(localStorage.length);


// ============ SESSION STORAGE ============
// Same API, but clears when tab closes

sessionStorage.setItem("tempData", "value");
sessionStorage.getItem("tempData");
sessionStorage.removeItem("tempData");
sessionStorage.clear();

// ============ TRY / CATCH / FINALLY ============
try {
    // Code that might throw an error
    const data = JSON.parse("invalid json");
} catch (error) {
    // Handle the error
    console.error("Error:", error.message);
} finally {
    // Always runs
    console.log("Cleanup complete");
}


// ============ THROW CUSTOM ERRORS ============
function divide(a, b) {
    if (b === 0) {
        throw new Error("Cannot divide by zero!");
    }
    return a / b;
}

try {
    divide(10, 0);
} catch (error) {
    console.error(error.message);  // "Cannot divide by zero!"
}


// ============ ERROR TYPES ============
new Error("Generic error");
new TypeError("Type error");
new ReferenceError("Reference error");
new SyntaxError("Syntax error");
new RangeError("Range error");


// ============ CUSTOM ERROR CLASS ============
class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

throw new ValidationError("Invalid email format");

// ============ CREATING REGEX ============
const regex1 = /hello/i;              // Literal (i = case insensitive)
const regex2 = new RegExp("hello", "i"); // Constructor


// ============ REGEX METHODS ============
const text = "Hello World, hello there!";

// test() - returns true/false
console.log(/hello/i.test(text));  // true

// match() - returns matches array
console.log(text.match(/hello/gi));  // ["Hello", "hello"]

// replace() - replace matches
console.log(text.replace(/hello/gi, "Hi"));  // "Hi World, Hi there!"

// split() - split by pattern
console.log("a,b;c|d".split(/[,;|]/));  // ["a", "b", "c", "d"]

// search() - returns index of first match
console.log(text.search(/world/i));  // 6


// ============ COMMON PATTERNS ============
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const phoneRegex = /^\d{10}$/;
const urlRegex = /^(https?:\/\/)?([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/;
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/;

// Validation examples
console.log(emailRegex.test("[email protected]"));  // true
console.log(phoneRegex.test("1234567890"));     // true


// ============ REGEX CHEATSHEET ============
// .     Any character except newline
// \d    Digit (0-9)
// \D    Not a digit
// \w    Word character (a-z, A-Z, 0-9, _)
// \W    Not a word character
// \s    Whitespace
// \S    Not whitespace
// ^     Start of string
// $     End of string
// *     0 or more
// +     1 or more
// ?     0 or 1
// {n}   Exactly n times
// {n,m} Between n and m times
// [abc] Character set
// [^abc] Negated set
// (abc) Capture group
// a|b   a or b

// ============ CREATING DATES ============
const now = new Date();
const specific = new Date("2025-01-25");
const withTime = new Date("2025-01-25T10:30:00");
const fromParts = new Date(2025, 0, 25);  // Month is 0-indexed!
const timestamp = new Date(1706140800000);  // From milliseconds


// ============ GETTING DATE PARTS ============
const date = new Date();

console.log(date.getFullYear());   // 2025
console.log(date.getMonth());      // 0-11 (January = 0)
console.log(date.getDate());       // 1-31 (day of month)
console.log(date.getDay());        // 0-6 (Sunday = 0)
console.log(date.getHours());      // 0-23
console.log(date.getMinutes());    // 0-59
console.log(date.getSeconds());    // 0-59
console.log(date.getTime());       // Milliseconds since Jan 1, 1970


// ============ SETTING DATE PARTS ============
date.setFullYear(2026);
date.setMonth(6);        // July
date.setDate(15);
date.setHours(10);
date.setMinutes(30);


// ============ FORMATTING DATES ============
const d = new Date();

console.log(d.toString());       // Full string
console.log(d.toDateString());   // "Sat Jan 25 2025"
console.log(d.toTimeString());   // "10:30:00 GMT+0545"
console.log(d.toISOString());    // "2025-01-25T04:45:00.000Z"
console.log(d.toLocaleDateString());  // "1/25/2025"
console.log(d.toLocaleTimeString());  // "10:30:00 AM"

// Custom formatting with Intl
const options = { 
    weekday: 'long', 
    year: 'numeric', 
    month: 'long', 
    day: 'numeric' 
};
console.log(d.toLocaleDateString('en-US', options));
// "Saturday, January 25, 2025"


// ============ DATE CALCULATIONS ============
const today = new Date();
const tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 1);

// Difference between dates
const date1 = new Date("2025-01-01");
const date2 = new Date("2025-12-31");
const diffMs = date2 - date1;
const diffDays = diffMs / (1000 * 60 * 60 * 24);
console.log(diffDays);  // 364

// ============ PARSE JSON (String → Object) ============
const jsonString = '{"name": "Om", "age": 25, "skills": ["JS", "Python"]}';
const obj = JSON.parse(jsonString);

console.log(obj.name);    // "Om"
console.log(obj.skills);  // ["JS", "Python"]


// ============ STRINGIFY (Object → String) ============
const user = {
    name: "Om Pandey",
    age: 25,
    isActive: true,
    skills: ["JavaScript", "React"]
};

const json = JSON.stringify(user);
console.log(json);
// '{"name":"Om Pandey","age":25,"isActive":true,"skills":["JavaScript","React"]}'

// Pretty print with indentation
const prettyJson = JSON.stringify(user, null, 2);
console.log(prettyJson);

// Selective stringify with replacer
const filtered = JSON.stringify(user, ["name", "age"]);
console.log(filtered);  // '{"name":"Om Pandey","age":25}'


// ============ DEEP CLONE WITH JSON ============
const original = { a: 1, b: { c: 2 } };
const clone = JSON.parse(JSON.stringify(original));
clone.b.c = 999;
console.log(original.b.c);  // 2 (unchanged!)

// ============ setTimeout ============
// Execute once after delay

const timeoutId = setTimeout(() => {
    console.log("This runs after 2 seconds");
}, 2000);

// Cancel timeout
clearTimeout(timeoutId);


// ============ setInterval ============
// Execute repeatedly at interval

let count = 0;
const intervalId = setInterval(() => {
    count++;
    console.log(`Count: ${count}`);
    
    if (count >= 5) {
        clearInterval(intervalId);  // Stop after 5
    }
}, 1000);


// ============ requestAnimationFrame ============
// For smooth animations (60fps)

function animate() {
    // Update animation
    element.style.left = `${position}px`;
    position++;
    
    if (position < 500) {
        requestAnimationFrame(animate);
    }
}

requestAnimationFrame(animate);


// ============ DEBOUNCE FUNCTION ============
function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}

// Usage: Only fires after user stops typing for 300ms
const handleSearch = debounce((query) => {
    console.log("Searching for:", query);
}, 300);

input.addEventListener("input", (e) => handleSearch(e.target.value));


// ============ THROTTLE FUNCTION ============
function throttle(func, limit) {
    let inThrottle;
    return function(...args) {
        if (!inThrottle) {
            func.apply(this, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

// Usage: Only fires once every 100ms
window.addEventListener("scroll", throttle(() => {
    console.log("Scrolling...");
}, 100));

// ============ SCOPE ============

// Global scope
var globalVar = "I'm global";

function outer() {
    // Function scope
    let outerVar = "I'm in outer";
    
    if (true) {
        // Block scope
        let blockVar = "I'm in block";
        const constVar = "Also block scoped";
        var varVar = "I'm function scoped!";  // var ignores block!
    }
    
    console.log(varVar);  // ✅ Works
    // console.log(blockVar);  // ❌ Error: not defined
}


// ============ CLOSURES ============
// A function that remembers its outer scope

function createCounter() {
    let count = 0;  // Private variable
    
    return {
        increment() {
            count++;
            return count;
        },
        decrement() {
            count--;
            return count;
        },
        getCount() {
            return count;
        }
    };
}

const counter = createCounter();
console.log(counter.increment());  // 1
console.log(counter.increment());  // 2
console.log(counter.decrement());  // 1
// console.log(count);  // ❌ Error: count is private!


// ============ PRACTICAL CLOSURE EXAMPLES ============

// Private data
function createBankAccount(initialBalance) {
    let balance = initialBalance;
    
    return {
        deposit(amount) {
            balance += amount;
            return balance;
        },
        withdraw(amount) {
            if (amount <= balance) {
                balance -= amount;
                return balance;
            }
            return "Insufficient funds";
        },
        getBalance() {
            return balance;
        }
    };
}

const account = createBankAccount(100);
account.deposit(50);   // 150
account.withdraw(30);  // 120


// Function factories
function createGreeter(greeting) {
    return function(name) {
        return `${greeting}, ${name}!`;
    };
}

const sayHello = createGreeter("Hello");
const sayHi = createGreeter("Hi");

console.log(sayHello("Om"));  // "Hello, Om!"
console.log(sayHi("Om"));     // "Hi, Om!"

// ============ 'this' IN DIFFERENT CONTEXTS ============

// 1. Global context
console.log(this);  // window (browser) or global (Node)

// 2. Object method
const user = {
    name: "Om",
    greet() {
        console.log(`Hello, I'm ${this.name}`);
    }
};
user.greet();  // "Hello, I'm Om" - this = user

// 3. Arrow function (inherits from parent)
const person = {
    name: "Om",
    greet: () => {
        console.log(this.name);  // undefined - this = window!
    },
    greetCorrect() {
        const inner = () => {
            console.log(this.name);  // "Om" - inherits from greetCorrect
        };
        inner();
    }
};

// 4. Constructor function
function Person(name) {
    this.name = name;  // this = new instance
}


// ============ EXPLICIT BINDING ============

function introduce(greeting) {
    console.log(`${greeting}, I'm ${this.name}`);
}

const om = { name: "Om" };
const john = { name: "John" };

// call - invoke immediately with arguments
introduce.call(om, "Hello");    // "Hello, I'm Om"
introduce.call(john, "Hi");     // "Hi, I'm John"

// apply - same as call but with array of arguments
introduce.apply(om, ["Hey"]);   // "Hey, I'm Om"

// bind - returns new function with bound 'this'
const omIntro = introduce.bind(om);
omIntro("Howdy");              // "Howdy, I'm Om"


// ============ COMMON PITFALL & FIX ============

const obj = {
    name: "Om",
    handleClick() {
        console.log(this.name);
    }
};

// Problem: 'this' is lost when passing method as callback
// button.addEventListener("click", obj.handleClick); // this = button!

// Solutions:
// 1. Arrow function wrapper
button.addEventListener("click", () => obj.handleClick());

// 2. Bind
button.addEventListener("click", obj.handleClick.bind(obj));