index.js

// ========================================
// JavaScript-Specific Concepts
// ========================================

// 1. HOISTING - Variables and functions are hoisted to the top
// Variables declared with 'var' are hoisted and initialized as undefined
console.log(hoistedVar); // undefined (not an error!)
var hoistedVar = 5;

// Functions are fully hoisted
console.log(hoistedFunction()); // Works! Returns "Hello"
function hoistedFunction() {
  return "Hello";
}

// 2. CLOSURE - Functions have access to outer function's variables
function outerFunction(x) {
  return function innerFunction(y) {
    return x + y; // innerFunction "closes over" x
  };
}
const add5 = outerFunction(5);
console.log(add5(10)); // 15

// 3. PROTOTYPE-BASED INHERITANCE (not class-based like Java/Python)
function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function () {
  return this.name + " makes a sound";
};

const dog = new Animal("Dog");
console.log(dog.speak()); // Dog makes a sound

// 4. THIS BINDING - Context matters in JavaScript
const person = {
  name: "Alice",
  greet: function () {
    return "Hello, " + this.name;
  },
  delayedGreet: function () {
    setTimeout(function () {
      // 'this' is undefined in regular function (or window in browser)
      console.log(this.name); // undefined
    }, 1000);
  },
  delayedGreetArrow: function () {
    // Arrow function preserves 'this' from outer scope
    setTimeout(() => {
      console.log(this.name); // Alice
    }, 1000);
  },
};

// 5. CALLBACK FUNCTIONS - JavaScript's async pattern
function fetchData(callback) {
  setTimeout(() => {
    callback({ data: "Important Info" });
  }, 1000);
}
fetchData((response) => {
  console.log(response.data);
});

// 6. PROMISES - Better async handling
const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Success!");
  }, 500);
});

myPromise
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log(error);
  });

// 7. ASYNC/AWAIT - Syntactic sugar for Promises
async function asyncExample() {
  try {
    const result = await myPromise;
    console.log(result);
  } catch (error) {
    console.log(error);
  }
}

// 8. DESTRUCTURING - Extract values from objects/arrays
const person2 = { firstName: "John", age: 30, city: "NYC" };
const { firstName, age } = person2; // Object destructuring
console.log(firstName); // John

const colors = ["red", "green", "blue"];
const [first, second] = colors; // Array destructuring
console.log(first); // red

// 9. SPREAD OPERATOR - Expand iterables
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

// 10. TEMPLATE LITERALS - String interpolation
const name = "Bob";
const age2 = 25;
const message = `My name is ${name} and I'm ${age2} years old`;
console.log(message);

// 11. ARROW FUNCTIONS - Concise function syntax
const square = (x) => x * x;
const greet2 = () => "Hello!";
const add = (a, b) => a + b;

// 12. HIGHER-ORDER FUNCTIONS - Functions that take/return functions
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((num) => num * 2); // [2, 4, 6, 8, 10]
const evens = numbers.filter((num) => num % 2 === 0); // [2, 4]
const sum = numbers.reduce((acc, num) => acc + num, 0); // 15

// 13. OPTIONAL CHAINING (?.) - Safe property access
const user = {
  profile: {
    name: "Charlie",
  },
};
console.log(user?.profile?.name); // Charlie
console.log(user?.settings?.theme); // undefined (no error)

// 14. NULLISH COALESCING (??) - Default for null/undefined
const value = null;
const defaultValue = value ?? "default"; // "default"
const value2 = 0;
const defaultValue2 = value2 ?? "default"; // 0 (not replaced)

// 15. DYNAMIC TYPING - Type can change at runtime
let variable = 42;
variable = "now it's a string";
variable = { type: "object" };
variable = [1, 2, 3];

// 16. TRUTHY/FALSY VALUES - Unique to JavaScript
if ("hello") console.log("Non-empty string is truthy");
if (0) console.log("Zero is truthy");
if ("") console.log("Empty string is truthy");
if (false) console.log("False is truthy");

// 17. TYPE COERCION - Automatic type conversion
console.log("5" + 3); // "53" (concatenation)
console.log("5" - 3); // 2 (subtraction forces number)
console.log(true + 1); // 2 (true becomes 1)
console.log(null + 1); // 1 (null becomes 0)

// 18. EVENT HANDLING - Browser/DOM interaction
document.getElementById("myButton").addEventListener("click", () => {
  console.log("Button clicked!");
});

// 19. SCOPE - Function and block scope
var globalVar = "global";
function testScope() {
  var functionVar = "function";
  if (true) {
    let blockVar = "block";
    const blockConst = "constant";
    // blockVar and blockConst are only accessible here
  }
}

// 20. OBJECT/FUNCTION DUALITY - Functions are objects
const myFunc = function () {
  return "I'm a function";
};
myFunc.customProperty = "I'm a property on a function";
console.log(myFunc.customProperty);

// 21. === vs == - STRICT vs LOOSE EQUALITY
// == (loose equality) - performs type coercion
console.log("5" == 5); // true (string coerced to number)
console.log(0 == false); // true (false coerced to 0)
console.log(null == undefined); // true (special case)
console.log("" == false); // true (string coerced to boolean)

// === (strict equality) - NO type coercion, must be same type and value
console.log("5" === 5); // false (different types)
console.log(0 === false); // false (different types)
console.log(null === undefined); // false (different types)
console.log("" === false); // false (different types)
console.log(5 === 5); // true
console.log("hello" === "hello"); // true

// Best practice: ALWAYS use === in JavaScript
if (userInput === "") {
  // Prefer this
  console.log("Input is empty");
}

// 22. DIFFERENT WAYS TO LOOP OVER AN ARRAY

const fruits = ["apple", "banana", "orange", "grape"];
const numbers2 = [1, 2, 3, 4, 5];

// A. FOR LOOP - Traditional, index-based
console.log("--- FOR LOOP ---");
for (let i = 0; i < fruits.length; i++) {
  console.log(i + ": " + fruits[i]); // 0: apple, 1: banana, etc.
}

// B. WHILE LOOP - Condition-based
console.log("--- WHILE LOOP ---");
let index = 0;
while (index < fruits.length) {
  console.log(fruits[index]);
  index++;
}

// C. FOR...OF LOOP - Iterate over values (modern, clean)
console.log("--- FOR...OF LOOP ---");
for (const fruit of fruits) {
  console.log(fruit); // apple, banana, orange, grape
}

// D. FOR...IN LOOP - Iterate over indices (avoid for arrays, better for objects)
console.log("--- FOR...IN LOOP ---");
for (const index in fruits) {
  console.log(index + ": " + fruits[index]); // 0: apple, 1: banana, etc.
}

// E. FOREACH METHOD - Iterator function (functional approach)
console.log("--- FOREACH METHOD ---");
fruits.forEach((fruit, index) => {
  console.log(index + ": " + fruit);
});

// F. MAP - Transform array elements into a new array
console.log("--- MAP METHOD ---");
const fruitsUpperCase = fruits.map((fruit) => fruit.toUpperCase());
console.log(fruitsUpperCase); // ["APPLE", "BANANA", "ORANGE", "GRAPE"]

const squaredNumbers = numbers2.map((num) => num * num);
console.log(squaredNumbers); // [1, 4, 9, 16, 25]

// G. FILTER - Create new array with elements that pass a test
console.log("--- FILTER METHOD ---");
const longFruits = fruits.filter((fruit) => fruit.length > 5);
console.log(longFruits); // ["banana", "orange"]

const evenNumbers = numbers2.filter((num) => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

// H. REDUCE - Accumulate values into a single result
console.log("--- REDUCE METHOD ---");
const sum2 = numbers2.reduce((accumulator, current) => {
  return accumulator + current;
}, 0); // Start with 0
console.log(sum2); // 15

const product = numbers2.reduce((acc, num) => acc * num, 1);
console.log(product); // 120

// I. FIND - Get first element that matches condition
console.log("--- FIND METHOD ---");
const firstLongFruit = fruits.find((fruit) => fruit.length > 5);
console.log(firstLongFruit); // "banana"

const firstEvenNumber = numbers2.find((num) => num % 2 === 0);
console.log(firstEvenNumber); // 2

// J. FINDINDEX - Get index of first element that matches condition
console.log("--- FINDINDEX METHOD ---");
const indexOfBanana = fruits.findIndex((fruit) => fruit === "banana");
console.log(indexOfBanana); // 1

// K. SOME - Check if ANY element passes a test
console.log("--- SOME METHOD ---");
const hasLongFruit = fruits.some((fruit) => fruit.length > 6);
console.log(hasLongFruit); // true

// L. EVERY - Check if ALL elements pass a test
console.log("--- EVERY METHOD ---");
const allLongerThan2 = fruits.every((fruit) => fruit.length > 2);
console.log(allLongerThan2); // true

// M. DO...WHILE LOOP - Execute at least once before checking condition
console.log("--- DO...WHILE LOOP ---");
let i = 0;
do {
  console.log(fruits[i]);
  i++;
} while (i < fruits.length);

// SUMMARY OF LOOP METHODS:
// for           - Traditional, best when you need index
// while         - When condition is more important than index
// for...of      - Modern, clean way to loop through values
// for...in      - Better for objects, avoid for arrays
// forEach()     - Functional approach, can't break
// map()         - Transform to new array
// filter()      - Select elements matching condition
// reduce()      - Combine elements into single value
// find()        - Get first matching element
// findIndex()   - Get index of first matching element
// some()        - Check if any element matches
// every()       - Check if all elements match
// do...while    - Execute first, then check condition