Arrow Function

ELI5 — The Vibe Check

Arrow functions are a shorter way to write functions in JavaScript. Instead of writing 'function(x) { return x * 2 }' you write '(x) => x * 2'. But there's a twist: arrow functions don't have their own 'this', which is actually super useful inside class methods and React components where 'this' confusion was a constant headache.

Real Talk

Arrow functions are an ES6 syntax for defining functions with a shorter notation. Unlike regular functions, they do not have their own this, arguments, super, or new.target bindings — they inherit these from the enclosing lexical scope. They cannot be used as constructors and have no prototype property.

Show Me The Code

// Regular function
const double = function(n) { return n * 2 }

// Arrow function (equivalent)
const double = (n) => n * 2

// Multi-line arrow function
const processUser = (user) => {
  const name = user.name.trim()
  return { ...user, name }
}

// 'this' in arrow vs regular
class Timer {
  start() {
    setInterval(() => {
      this.tick() // 'this' is the Timer instance
    }, 1000)
  }
}

When You'll Hear This

Arrow functions are perfect for array callbacks: arr.map(x => x * 2).,Don't use arrow functions as object methods — 'this' won't be what you expect.,Arrow functions are ideal inside class methods to avoid 'this' binding issues.