Arrow Functions in JavaScript, explained simply

Arrow functions are a shorter way to write functions with =>. They suit small functions well, but they don't have their own this, so skip them for functions inside objects.

Explain like I'm five

A regular function is the main road. It gets you there, but it's long. An arrow function is a shortcut that reaches almost the same place in fewer steps, with one stop it skips that you'll see at the end. Short little functions are everywhere in JavaScript, and the shortcut makes them quicker to write and easier to read.

Regular function vs arrow function

A function is a little machine. Values go in, and return sends the answer back out. Here's one that adds two numbers, written both ways.

function add(a, b) {
  return a + b;
}
const addArrow = (a, b) => a + b;
console.log(add(2, 3)); // prints: 5
console.log(addArrow(2, 3)); // prints: 5

The arrow version drops the word function, puts => after the parameters and stores the function in a const. With no curly braces after the arrow, the answer comes back by itself. You don't write return at all. This is called an implicit return.

If you do add curly braces, the arrow function body works like a regular one, and you need return again.

Two small rules

With exactly one value going in, you can skip the parentheses around the parameter. With none, or with two or more, you need them.

const double = x => x * 2;
console.log(double(4)); // prints: 8
const make = () => ({ name: "Bitsy" });
console.log(make()); // prints: { name: 'Bitsy' }

The second rule is about objects, a bundle of labeled values in curly braces. To return one from a short arrow function, wrap it in parentheses. Without them, JavaScript reads the curly braces as the start of the function's code, and you get undefined back.

Curly braces after => always mean a block of code. Parentheses around them tell JavaScript you mean a value instead. It's a small detail, but it trips up almost everyone the first time, because the code looks right and gives no error.

Where arrows fit best

Arrows are at home in the small functions you hand to other functions, like the ones you pass to array methods.

const scores = [3, 1, 2];
console.log(scores.map(s => s * 10)); // prints: [ 30, 10, 20 ]

Writing that with the full function keyword would take three lines for the same idea.

The twist: arrows don't have their own this

this is a special word that usually points at the object a function was called on. It gets its own lesson later. Arrow functions don't have their own this. They borrow it from the code around them.

const bitsy = {
  name: "Bitsy",
  hiArrow: () => this.name,
  hiRegular() {
    return this.name;
  },
};
console.log(bitsy.hiArrow()); // prints: undefined
console.log(bitsy.hiRegular()); // prints: Bitsy

The arrow borrows this from outside the object, and out there this has no name, so you get undefined. The regular function gets this set to bitsy when you call bitsy.hiRegular(). So for functions that live inside an object, use a regular function or the short method form shown above.

Rule of thumb

Use arrow functions for short functions, and regular ones for functions that live inside objects.

Common mistake

Adding curly braces to an arrow function and forgetting return. (a, b) => { a + b } gives back undefined. Either drop the braces or write return a + b; inside them.

Check yourself

What does make() return if const make = () => { name: "Bitsy" };