JavaScript Arrow Functions

A shorter function

An arrow function is a compact way to write a function. You name it withconst (or pass it inline). There is no function keyword and noprototype for constructing objects.

The form (x) => x * 2 means: take x, return x * 2. The value after the arrow is the return value when you omit curly braces.

Parameters and return

Zero parameters need (). One parameter may drop the parentheses. Two or more need parentheses. A block with curly braces needs an explicitreturn if you want a value back.

const double = (x) => x * 2;
const greet = (name) => "Hello, " + name;
const sum = (a, b) => a + b;
const empty = () => 0;

console.log(double(5));
console.log(greet("Ada"));
console.log(sum(2, 3));
console.log(empty());

A block body

When the work is more than one expression, use braces. Then it behaves like a normal function body: you must return if the caller needs a result. Withoutreturn, the arrow returns undefined.

const grade = (score) => {
  if (score >= 10) {
    return "pass";
  }
  return "retry";
};

console.log(grade(12));
console.log(grade(7));

Returning an object from a short arrow needs extra parentheses:() => ({ ok: true }). Otherwise a brace starts a block, not an object.

Callbacks

Arrays and timers take a function. Arrows keep those calls short. map,filter, and forEach are the usual place you will see them first.

const nums = [1, 2, 3, 4, 5];
const doubled = nums.map((n) => n * 2);
const odds = nums.filter((n) => n % 2 === 1);

console.log(doubled);
console.log(odds);

No own this

A function method gets this from the call. An arrow does not bindthis at all. It uses the this of the surrounding scope — the function or script that created it.

That is why arrows are a poor choice for object methods that need the owner, and a good choice for inner helpers that should keep the outer this.

const timer = {
  ticks: 0,
  start() {
    const tick = () => {
      this.ticks += 1;
      console.log(this.ticks);
    };
    tick();
    tick();
  },
};

timer.start();

tick is an arrow, so this is still the timer object from start(). A nested function tick() would have lost that owner.

What arrows cannot do

Write function when you need a method or a constructor. Write an arrow when you need a small callback or a helper that should keep the outer this.

What to remember

• const fn = (x) => x * 2 is a function that returns x * 2.
• Braces mean a block: add return yourself.
• Arrows do not bind their own this.
• Do not use arrows as constructors or as methods that need the owner object.

Next: errors — throw, try, catch, and finally.