// Can be called before it's defined -- this is "hoisting" in action.
// JavaScript reads all function declarations during the compilation phase,
// BEFORE it runs any code. So the function exists from the very first line.
greet('Alice'); // Works!

function greet(name) {
    return `Hello, ${name}!`;
}

// Cannot be called before assignment.
// The variable 'greet' is hoisted, but its VALUE (the function) is not assigned
// until this line executes. Before that, greet is undefined (let/const) or
// would throw a ReferenceError.
greet('Alice'); // ReferenceError: Cannot access 'greet' before initialization

const greet = function(name) {
    return `Hello, ${name}!`;
};

// Basic syntax -- implicit return for single expressions
const add = (a, b) => a + b;

// With body block -- explicit return required when using curly braces
const greet = (name) => {
    const message = `Hello, ${name}!`;
    return message; // Without this return, the function returns undefined!
};

// Single parameter -- parentheses optional (but many style guides require them)
const double = x => x * 2;

// No parameters -- parentheses required
const sayHi = () => 'Hi!';

// GOTCHA: Returning an object literal requires wrapping in parentheses
const makeUser = (name) => ({ name, role: 'user' });
// Without parens: const makeUser = (name) => { name, role: 'user' };
// JavaScript thinks the curly braces are a function body, not an object!

function greet(name = 'Guest') {
    return `Hello, ${name}!`;
}

greet();        // 'Hello, Guest!'
greet('Alice'); // 'Hello, Alice!'

function sum(...numbers) {
    return numbers.reduce((total, n) => total + n, 0);
}

sum(1, 2, 3, 4); // 10

const nums = [1, 2, 3];
console.log(Math.max(...nums)); // 3

// Edge case: default parameters are evaluated left-to-right
// Earlier parameters can be used as defaults for later ones
function createRange(start, end = start + 10) {
    return { start, end };
}
createRange(5);    // { start: 5, end: 15 }

// Edge case: passing undefined triggers the default, but null does NOT
function greet(name = 'Guest') {
    return `Hello, ${name}`;
}
greet(undefined);  // 'Hello, Guest' -- undefined triggers default
greet(null);       // 'Hello, null' -- null is a value, not "missing"

// Edge case: arguments object vs rest parameters
function oldStyle() {
    console.log(arguments);        // { '0': 1, '1': 2, '2': 3 } -- array-LIKE, not an array
    console.log(arguments.map);    // undefined -- no array methods!
    console.log([...arguments]);   // [1, 2, 3] -- convert to real array
}
function newStyle(...args) {
    console.log(args);             // [1, 2, 3] -- a real array with all methods
}

const globalVar = 'I am global';

function test() {
    console.log(globalVar); // Accessible
}

function test() {
    var functionScoped = 'Only here';
}
console.log(functionScoped); // ❌ ReferenceError

if (true) {
    let blockScoped = 'Only in this block';
    const alsoBlockScoped = 'Same here';
}
console.log(blockScoped); // ❌ ReferenceError

const name = 'Alice';

function outer() {
    const name = 'Bob';
    
    function inner() {
        // inner() was DEFINED inside outer(), so it looks up 'name'
        // in outer()'s scope first -- not wherever inner() gets called from
        console.log(name); // 'Bob' -- looks up the scope chain
    }
    
    return inner;
}

const fn = outer();
fn(); // 'Bob' -- even though we call fn() in the global scope,
      // it remembers the scope where it was born (lexical environment)

function createCounter() {
    let count = 0; // This variable goes into the closure's "backpack"
    
    return {
        increment: () => ++count,  // These functions carry 'count' with them
        decrement: () => --count,
        getCount: () => count
    };
}

const counter = createCounter();
// createCounter() has finished executing, but 'count' lives on
// inside the backpack of the returned functions
counter.increment(); // 1
counter.increment(); // 2
counter.getCount();  // 2

// count is not accessible directly -- it is truly private
console.log(counter.count); // undefined

const bankAccount = (function() {
    let balance = 0; // Private
    
    return {
        deposit: (amount) => balance += amount,
        withdraw: (amount) => balance -= amount,
        getBalance: () => balance
    };
})();

bankAccount.deposit(100);
bankAccount.getBalance(); // 100

function multiply(factor) {
    return (number) => number * factor;
}

const double = multiply(2);
const triple = multiply(3);

double(5); // 10
triple(5); // 15

function createClickHandler(buttonId) {
    let clickCount = 0; // Each handler gets its own private count
    
    return function() {
        clickCount++;
        console.log(`Button ${buttonId} clicked ${clickCount} times`);
    };
}

const handler = createClickHandler('submit');
// Each click remembers the count -- the closure persists clickCount
// between invocations. This is how you maintain state without globals.

// BUG: All timeouts print 3, because var i is shared across iterations
for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100); // 3, 3, 3
}

// FIX: let creates a new 'i' for each loop iteration
for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100); // 0, 1, 2
}

function first() {
    console.log('First');
    second();              // Pauses first(), pushes second() onto the stack
    console.log('First again'); // Resumes after second() returns
}

function second() {
    console.log('Second');
    third();               // Pauses second(), pushes third() onto the stack
}

function third() {
    console.log('Third');  // Returns, popped off the stack
}

first();
// Output: First, Second, Third, First again

1. [Global]
2. [Global] -> [first()]
3. [Global] -> [first()] -> [second()]
4. [Global] -> [first()] -> [second()] -> [third()]
5. [Global] -> [first()] -> [second()] <-- third() returns
6. [Global] -> [first()] <-- second() returns
7. [Global] <-- first() returns

const numbers = [1, 2, 3, 4, 5];

// map: Transform each element (returns new array, does NOT mutate original)
const doubled = numbers.map(n => n * 2); // [2, 4, 6, 8, 10]

// filter: Keep elements that pass a test (returns new array)
const evens = numbers.filter(n => n % 2 === 0); // [2, 4]

// reduce: Accumulate to a single value
// The second argument (0) is the initial value for acc. ALWAYS provide it --
// omitting it uses the first array element, which causes bugs on empty arrays.
const sum = numbers.reduce((acc, n) => acc + n, 0); // 15

// find: Get first matching element (returns undefined if not found, not null)
const found = numbers.find(n => n > 3); // 4

// some/every: Boolean tests (short-circuit like && and ||)
numbers.some(n => n > 4);  // true (at least one matches)
numbers.every(n => n > 0); // true (all match)

const result = [1, 2, 3, 4, 5]
    .filter(n => n % 2 === 0)  // [2, 4]
    .map(n => n ** 2)          // [4, 16]
    .reduce((a, b) => a + b);  // 20

// Classic IIFE -- the outer parentheses tell JavaScript this is an expression,
// not a declaration. The trailing () immediately invokes it.
(function() {
    const secret = 'hidden'; // Not accessible outside this function
    console.log('IIFE executed');
})();

// Arrow function version
(() => {
    console.log('Arrow IIFE');
})();