Arrow Functions & this Binding

// Traditional function
function add(a, b) {
    return a + b;
}

// Arrow function equivalents
const add = (a, b) => a + b;          // implicit return
const add = (a, b) => { return a + b; }; // explicit return with braces

// Single parameter — parentheses optional
const double = n => n * 2;
const double = (n) => n * 2;  // same thing

// No parameters — empty parentheses required
const sayHi = () => "Hello!";

// Returning an object — wrap in parentheses
const makeUser = (name, age) => ({ name, age });
// Without parens, the {} looks like a function body

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

// Map
const doubled = numbers.map(n => n * 2);

// Filter + chain
const result = numbers
    .filter(n => n > 2)
    .map(n => n * n);

// Sort
const sorted = ["banana", "apple", "cherry"].sort((a, b) => a.localeCompare(b));

// Event handlers (in browser)
button.addEventListener("click", () => {
    console.log("Clicked!");
});

// Promise chains
fetch("/api/user")
    .then(res => res.json())
    .then(data => console.log(data))
    .catch(err => console.error(err));

const timer = {
    seconds: 0,
    
    start() {
        // setInterval calls this callback — but 'this' inside the callback
        // refers to the global object (or undefined in strict mode), NOT timer
        setInterval(function() {
            this.seconds++;  // BUG: this is wrong!
            console.log(this.seconds);
        }, 1000);
    }
};

start() {
    const self = this;  // capture 'this' before it changes
    setInterval(function() {
        self.seconds++;  // now it works
    }, 1000);
    
    // Or with .bind():
    setInterval(function() {
        this.seconds++;
    }.bind(this), 1000);
}

const timer = {
    seconds: 0,
    
    start() {
        // Arrow function uses the 'this' of start() — which is the timer object
        setInterval(() => {
            this.seconds++;  // works correctly!
            console.log(this.seconds);
        }, 1000);
    }
};

timer.start();  // logs 1, 2, 3...

const user = {
    name: "Alice",
    
    // Arrow function as method — WRONG
    greet: () => {
        return `Hello, I'm ${this.name}`;  // 'this' is NOT user here!
        // In a browser: this is window (and window.name is "")
        // In Node.js strict mode: this is undefined
    },
    
    // Regular function as method — CORRECT
    greet() {
        return `Hello, I'm ${this.name}`;  // 'this' is user
    }
};

// Arrow functions can't be constructors
const Person = (name) => { this.name = name; };
new Person("Alice");  // TypeError: Person is not a constructor

// Don't use arrow for prototype methods
MyClass.prototype.method = () => {
    this.value;  // 'this' is wrong
};

class EventEmitter {
    constructor() {
        this.listeners = [];
        this.data = "some data";
    }
    
    // Regular function for the method itself
    on(callback) {
        this.listeners.push(callback);
    }
    
    // Regular function method that calls arrow function callbacks
    emit() {
        this.listeners.forEach(callback => {
            // Arrow function preserves 'this' from emit()
            callback(this.data);
        });
    }
}

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

const alice = { name: "Alice" };
const bob = { name: "Bob" };

// call — pass arguments individually
introduce.call(alice, "Hello", "!");   // "Hello, I'm Alice!"
introduce.call(bob, "Hi", ".");        // "Hi, I'm Bob."

// apply — pass arguments as array
introduce.apply(alice, ["Hey", "~"]);  // "Hey, I'm Alice~"

// bind — returns a NEW function with this permanently set
const aliceIntro = introduce.bind(alice);
aliceIntro("Hello", "!");  // "Hello, I'm Alice!"

// bind with pre-filled arguments (partial application)
const formalAlice = introduce.bind(alice, "Good day", ".");
formalAlice();  // "Good day, I'm Alice."