JavaScript Arrow Functions

// Arrow Functions in JavaScript

// 1. Basic syntax comparison
const regularFunction = function(x) {
  return x * 2;
};

const arrowFunction = (x) => {
  return x * 2;
};

const conciseArrow = x => x * 2;

console.log("Regular:", regularFunction(5));
console.log("Arrow:", arrowFunction(5));
console.log("Concise:", conciseArrow(5));

// 2. With array methods
const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(n => n * 2);
console.log("\nDoubled:", doubled);

const evens = numbers.filter(n => n % 2 === 0);
console.log("Evens:", evens);

const sum = numbers.reduce((acc, n) => acc + n, 0);
console.log("Sum:", sum);

// 3. Lexical this
const counter = {
  count: 0,
  start() {
    // Arrow function inherits 'this' from start()
    setInterval(() => {
      this.count++;
      console.log("Count:", this.count);
    }, 1000);
  }
};

// counter.start(); // Uncomment to see it count

// Arrow function syntax variations

// 1. Full syntax with block body
const add = (a, b) => {
  const sum = a + b;
  return sum;
};

// 2. Single parameter - parentheses optional
const double = x => {
  return x * 2;
};

// 3. No parameters - parentheses required
const greet = () => {
  return "Hello!";
};

// 4. Multiple parameters - parentheses required
const multiply = (a, b) => {
  return a * b;
};

console.log(add(2, 3));      // 5
console.log(double(4));      // 8
console.log(greet());        // "Hello!"
console.log(multiply(3, 4)); // 12

// Implicit return - no curly braces, no return keyword

// Single expression - automatically returned
const square = x => x * x;
const sum = (a, b) => a + b;
const isEven = n => n % 2 === 0;

console.log(square(4));     // 16
console.log(sum(2, 3));     // 5
console.log(isEven(4));     // true

// Returning an object - wrap in parentheses!
const createUser = (name, age) => ({ name, age });
console.log(createUser("Alice", 25)); // { name: "Alice", age: 25 }

// Without parentheses, curly braces are treated as block body
// const wrong = (name) => { name }; // Returns undefined!

// Chained expressions
const processValue = x => x > 0 ? x * 2 : 0;
console.log(processValue(5));  // 10
console.log(processValue(-3)); // 0

// Lexical this - arrow functions inherit this from parent scope

// Problem with regular functions
const timer1 = {
  seconds: 0,
  start: function() {
    setInterval(function() {
      this.seconds++; // 'this' is undefined or window, NOT timer1!
      console.log(this.seconds); // NaN
    }, 1000);
  }
};

// Old workaround with 'that' or 'self'
const timer2 = {
  seconds: 0,
  start: function() {
    const that = this; // Save reference
    setInterval(function() {
      that.seconds++;
      console.log(that.seconds);
    }, 1000);
  }
};

// Arrow function solution - clean and simple
const timer3 = {
  seconds: 0,
  start: function() {
    setInterval(() => {
      this.seconds++; // 'this' is timer3!
      console.log(this.seconds);
    }, 1000);
  }
};

// Works because arrow function inherits 'this' from start()

// Arrow functions shine with array methods

const users = [
  { name: "Alice", age: 25, active: true },
  { name: "Bob", age: 30, active: false },
  { name: "Carol", age: 22, active: true }
];

// map - transform each element
const names = users.map(user => user.name);
console.log(names); // ["Alice", "Bob", "Carol"]

// filter - select elements
const activeUsers = users.filter(user => user.active);
console.log(activeUsers.length); // 2

// find - get first match
const bob = users.find(user => user.name === "Bob");
console.log(bob); // { name: "Bob", age: 30, active: false }

// reduce - accumulate values
const totalAge = users.reduce((sum, user) => sum + user.age, 0);
console.log(totalAge); // 77

// every / some - test conditions
const allActive = users.every(user => user.active);
const someActive = users.some(user => user.active);
console.log(allActive, someActive); // false, true

// sort - compare elements
const byAge = [...users].sort((a, b) => a.age - b.age);
console.log(byAge.map(u => u.name)); // ["Carol", "Alice", "Bob"]

// Chaining
const result = users
  .filter(u => u.active)
  .map(u => u.name.toUpperCase())
  .sort();
console.log(result); // ["ALICE", "CAROL"]

// Arrow functions do NOT have their own 'arguments' object

// Regular function has arguments
function regularSum() {
  console.log(arguments); // [1, 2, 3, 4, 5]
  return Array.from(arguments).reduce((a, b) => a + b, 0);
}
console.log(regularSum(1, 2, 3, 4, 5)); // 15

// Arrow function - arguments is from enclosing scope (or error)
const arrowSum = () => {
  // console.log(arguments); // ReferenceError or outer scope's arguments
};

// Solution: Use rest parameters with arrow functions
const arrowSumFixed = (...nums) => {
  console.log(nums); // [1, 2, 3, 4, 5]
  return nums.reduce((a, b) => a + b, 0);
};
console.log(arrowSumFixed(1, 2, 3, 4, 5)); // 15

// Arrow functions cannot be used as constructors

// Regular function as constructor
function Person(name) {
  this.name = name;
}
const alice = new Person("Alice");
console.log(alice.name); // "Alice"

// Arrow function as constructor - FAILS
const PersonArrow = (name) => {
  this.name = name;
};

try {
  const bob = new PersonArrow("Bob");
} catch (error) {
  console.log(error.message);
  // "PersonArrow is not a constructor"
}

// Arrow functions don't have prototype property
console.log(Person.prototype);      // { constructor: f }
console.log(PersonArrow.prototype); // undefined

// Careful with arrow functions as object methods!

// BAD - arrow function as method
const person1 = {
  name: "Alice",
  greet: () => {
    console.log("Hello, I'm " + this.name); // 'this' is NOT person1!
  }
};
person1.greet(); // "Hello, I'm undefined"

// GOOD - regular function or shorthand method
const person2 = {
  name: "Bob",
  greet() {
    console.log("Hello, I'm " + this.name);
  }
};
person2.greet(); // "Hello, I'm Bob"

// Arrow functions work for methods that need parent 'this'
const person3 = {
  name: "Carol",
  hobbies: ["reading", "coding"],
  showHobbies() {
    // Arrow function here is correct - uses person3's this
    this.hobbies.forEach(hobby => {
      console.log(this.name + " likes " + hobby);
    });
  }
};
person3.showHobbies();
// "Carol likes reading"
// "Carol likes coding"

// Arrow functions as IIFE (Immediately Invoked Function Expression)

// Traditional IIFE
(function() {
  const secret = "traditional";
  console.log("Traditional IIFE:", secret);
})();

// Arrow function IIFE
(() => {
  const secret = "arrow";
  console.log("Arrow IIFE:", secret);
})();

// With parameters
((name) => {
  console.log("Hello,", name);
})("World");

// Returning a value
const result = ((x, y) => x + y)(5, 3);
console.log("Result:", result); // 8