Arrow Functions in 10 Minutes

Arrow functions are a shorter way to write a function. You'll see them everywhere in modern JavaScript, specially as small functions passed to other functions, so you need to read them even if you prefer the long form. This takes about ten minutes, and it ends with the one place you shouldn't use them.

From function to arrow, step by step

Here's a normal function:

function addVat(amount) {
  return amount * 1.12;
}
console.log(addVat(100));

112.00000000000001

(That ugly decimal is a floating point thing, not an arrow function thing. Round with toFixed(2) when you show money.)

Step 1: drop function, add => after the parameters, store it in a const:

const addVat = (amount) => {
  return amount * 1.12;
};

Step 2: if the body is just one return, drop the braces and the return:

const addVat = (amount) => amount * 1.12;

Step 3: with exactly one parameter, the parentheses are optional:

const addVat = amount => amount * 1.12;

All four versions do the same thing. Whether you keep the parentheses around one parameter is style. Many code formatters, like Prettier, add them by default. Pick one and be consistent.

Parameters: zero, one, many

const greet = () => "Hello!";
const double = n => n * 2;
const total = (price, qty) => price * qty;

console.log(greet(), double(21), total(95, 2));

Hello! 42 190

Zero or two or more parameters need the parentheses. Only exactly one can go without.

Where arrows shine: passing functions

Arrow functions are most useful when you pass a small function to another one. Array methods are the everyday example:

const cart = [
  { name: "Coffee", price: 95, qty: 2 },
  { name: "Ensaymada", price: 35, qty: 6 },
  { name: "Water", price: 20, qty: 0 },
];

const names = cart.map(item => item.name);
const inCart = cart.filter(item => item.qty > 0);
const total = cart.reduce((sum, item) => sum + item.price * item.qty, 0);

console.log(names);
console.log(inCart.length, total);

[ 'Coffee', 'Ensaymada', 'Water' ]
2 400

Compare that with writing function (item) { return item.name; } three times. The arrow version is not just shorter. You can see what each line does without reading the boilerplate.

Event listeners are the other common place:

button.addEventListener("click", () => {
  status.textContent = "Paid";
});

Returning an object: the trap

This one catches everyone once:

const makeItem = name => { name: name, qty: 1 };

That's a SyntaxError: Unexpected token ':'. The braces are read as the function body, not as an object, so this doesn't even parse. In a slightly different shape, name => { name: name }, it parses and silently returns undefined. Wrap the object in parentheses:

const makeItem = name => ({ name, qty: 1 });
console.log(makeItem("Coffee"));

{ name: 'Coffee', qty: 1 }

When not to use an arrow function

Arrow functions don't have their own this. They use the this of the code around them. For most beginner code, that never matters. It matters in one common case: a method on an object that uses this.

const counter = {
  count: 0,
  addArrow: () => {
    return typeof this?.count;
  },
  add() {
    this.count++;
    return this.count;
  },
};
console.log(counter.addArrow());
console.log(counter.add());

undefined
1

addArrow doesn't see the object's count, because its this is not the object. The normal method add() works. So: for methods that use this, use the normal method syntax. For everything else, arrows are fine. JavaScript Advanced goes deeper into this.

Common mistakes

• Braces with no return: returns undefined.
• Returning an object without ().
• Using an arrow as an object method that needs this.
• Forgetting parentheses with two parameters: a, b => a + b isn't what you think.

Take one function you wrote last week that just returns a value. Write it as an arrow function. Is it easier or harder to read?