JavaScript Arrow Functions – Concise Syntax and Lexical this

// Full syntax (equivalent to a function expression)
const add = (a, b) => {
  const result = a + b;
  return result;
};
console.log(add(3, 4)); // 7

// Concise body (implicit return) — single expression, no braces
const multiply = (a, b) => a * b;
console.log(multiply(3, 4)); // 12

// Single parameter — parentheses optional
const square = n => n * n;
console.log(square(5)); // 25

// No parameters — empty parens required
const getRandomInt = () => Math.floor(Math.random() * 100);
console.log(typeof getRandomInt()); // number

// Returning an object literal — must wrap in ()
const makeUser = (name, role) => ({ name, role, createdAt: new Date().toISOString() });

console.log(makeUser("Alice", "admin"));

// Problem with regular function inside a method
const timer = {
  seconds: 0,
  startRegular: function() {
    // 'this' inside regular callback is NOT the timer object
    setInterval(function() {
      this.seconds++; // 'this' is undefined (strict) or window (non-strict)
      console.log("Regular this.seconds:", this.seconds);
    }, 1000);
  },
  startArrow: function() {
    // Arrow function inherits 'this' from startArrow's scope (timer)
    setInterval(() => {
      this.seconds++;
      console.log("Arrow this.seconds:", this.seconds); // Works!
    }, 1000);
  }
};

// Demonstrate lexical this with synchronous code
const counter = {
  count: 0,
  increment: function() {
    const add = () => {
      this.count++; // Arrow: 'this' is counter
    };
    add();
  },
  incrementBroken: function() {
    const add = function() {
      this.count++; // Regular: 'this' is undefined in strict mode
    };
    try { add(); } catch(e) { console.log("Error: " + e.message); }
  }
};

counter.increment();
console.log(counter.count); // 1

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// map — transform
const squares = numbers.map(n => n ** 2);
console.log(squares); // [1, 4, 9, 16, 25, 36, 49, 64, 81, 100]

// filter — keep matching
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4, 6, 8, 10]

// reduce — accumulate
const sum = numbers.reduce((acc, n) => acc + n, 0);
console.log(sum); // 55

// Chained
const result = numbers
  .filter(n => n % 2 === 0)
  .map(n => n * 10)
  .reduce((acc, n) => acc + n, 0);
console.log(result); // 300

const user = {
  name: "Alice",
  // Arrow function — 'this' is NOT the user object
  greetArrow: () => {
    console.log("Hello, " + this?.name); // undefined or error
  },
  // Regular function — 'this' IS the user object
  greetRegular: function() {
    console.log("Hello, " + this.name); // Alice
  },
  // ES6 shorthand method (same as regular function)
  greetShorthand() {
    console.log("Hello, " + this.name); // Alice
  }
};

user.greetRegular();   // Hello, Alice
user.greetShorthand(); // Hello, Alice

// Regular function — has arguments
function regularSum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) total += arguments[i];
  return total;
}
console.log(regularSum(1, 2, 3)); // 6

// Arrow function — no arguments, use rest params instead
const arrowSum = (...nums) => nums.reduce((a, b) => a + b, 0);
console.log(arrowSum(1, 2, 3)); // 6

// Arrow inside regular — inherits outer arguments
function outer() {
  const inner = () => {
    console.log(arguments[0]); // Accesses outer's arguments
  };
  inner();
}
outer("hello"); // hello