JavaScript Arrow Functions Cheat Sheet

A beginner-friendly guide to JavaScript arrow functions. Learn syntax, implicit returns, lexical this, and best practices with clear examples.

💡 Key Takeaways:

⚡ Concise Syntax: Arrow functions are shorter and great for inline logic.

🧠 Lexical this: They automatically inherit this from their surrounding scope.

🚫 Not Constructors: Arrow functions can’t be used with new.

🎯 Best For: Callbacks, array methods, and small, reusable expressions.

✏️ Basic Syntax

Single parameter

No parentheses needed for one argument
Use for: simple transforms
Returns: result automatically

const double = n => n * 2;
double(4); // 8

Multiple parameters

Parentheses required
Use for: operations needing 2+ inputs
Returns: the expression result

const multiply = (a, b) => a * b;
multiply(2, 5); // 10

No parameters

Empty parentheses required
Use for: static or fixed return values
Returns: the defined value

const greet = () => 'Hello!';
greet(); // "Hello!"

🧠 Implicit vs Explicit Return

Implicit Return

No return keyword
Use for: short one-liners
Returns: value of the expression

const sum = (a, b) => a + b;

Explicit Return

Use {} with return for multi-line logic
Use for: conditionals, side effects
Returns: value you specify

const check = num => {
  if (num > 10) return 'big';
  return 'small';
};

🔁 Common Use Cases

Array methods

Inline callbacks with map/filter/reduce
Use for: transforming or filtering data
Returns: new array or value

const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2); // [2, 4, 6]

Event listeners

Keeps code concise
Use for: lightweight handlers
Returns: nothing (undefined)

button.addEventListener('click', () => console.log('Clicked!'));

Timers

Clean one-liners for async behavior
Use for: quick setTimeout or setInterval
Returns: timer ID

setTimeout(() => console.log('Done!'), 1000);

🧩 Arrow Functions & `this`

Lexical `this`

this is inherited from parent scope
Use for: callbacks in methods
Returns: outer context this

function Timer() {
  this.count = 0;
  setInterval(() => this.count++, 1000); // Works
}

Regular function comparison

Regular functions have their own this
Use for: when dynamic context is needed
Returns: undefined if not bound

function Timer() {
  this.count = 0;
  setInterval(function() { this.count++; }, 1000); // 'this' undefined
}

⚠️ Things to Remember

No arguments object
Can’t be used as constructors (new)
Use regular function for methods needing dynamic this