Arrow functions

A shorter function shape

An arrow function is a short way to write a function. It looks like this: (input) => result. The => sign is the "arrow". An arrow function is still a function, so you can:

• store it in a variable,
• pass it to another function,
• call it with round brackets, like double(6).

Programs often pass small functions to other functions. A function you pass to another function, so that it can call it later, is called a callback. For example, an array has a map method. It calls your callback once for each item and collects the results in a new array. Small callbacks like these are where arrows are used most.

In the Declaring & calling functions lesson, you wrote functions the long way, with the word function. An arrow is the short way. It works best for small jobs.

In this lesson, a regular function means any function that is not an arrow. The lesson covers four things, in this order:

1. How to write an arrow.
2. How an arrow can give back a value without the word return.
3. What arrows don't have: their own this, their own arguments, and the power to be called with new.
4. When to use a regular function instead.

Later lessons go deeper into these ideas: The this keyword, Methods & this, Arrow functions & lexical this, and Constructors & new. This lesson gives you only the basics.

Start with a function expression: it makes a function and stores it in a variable. An arrow does the same job with fewer words. The code below writes the same helper four ways. Each one doubles a number.

1const doubleA = function (number) {2  return number * 2;3};4 5const doubleB = (number) => {6  return number * 2;7};8 9const doubleC = (number) => number * 2;10const doubleD = number => number * 2;11 12console.log(doubleA(6), doubleB(6), doubleC(6), doubleD(6));

In plain words, line by line:

1. Lines 1 to 3 are the long way: the word function, the parameter number in round brackets, and a body in curly braces with return.
2. Lines 5 to 7 are an arrow with a body. The word function is gone. The => sits between the parameter and the body.
3. Line 9 is an arrow with no curly braces and no return. It gives back number * 2 by itself.
4. Line 10 is the same, without the round brackets around number.
5. Line 12 calls all four with 6. Each one gives back 12, so it prints 12 12 12 12.

The parameters go on the left of =>. The work goes on the right. The round brackets around the parameters follow one rule:

• No parameters: write empty brackets, ().
• Exactly one simple parameter: the brackets are optional.
• Two or more parameters: you need the brackets.

1const double = function (number) {Run2  return number * 2;3};4 5console.log(double(6));

Pick a version above, then press Step. The code changes, but the result is always 12.

Shorter code is not always clearer. The Code style lesson said this too. Pick the shape that is easiest to read out loud.

Parameters: zero, one, or many

You need round brackets around the parameters unless there is exactly one simple parameter. A simple parameter is just a name, like name.

1const ready = () => "tea";2const greet = name => "Hello, " + name;3const pair = (first, second) => first + " & " + second;4 5console.log(ready());6console.log(greet("Asha"));7console.log(pair("Asha", "Lin"));

In plain words, line by line:

1. Line 1 has no parameters, so it uses empty brackets, (). Line 5 calls it and prints tea.
2. Line 2 has one simple parameter, name, so it can skip the brackets. Line 6 prints Hello, Asha.
3. Line 3 has two parameters, first and second, so they must be inside brackets. Line 7 prints Asha & Lin.

You may keep the brackets around one parameter if that is easier to read. Leaving them out is only a style choice. It does not make a different kind of function. You also need the brackets in three more cases:

• A default value, like (name = "friend"). It is used when the call passes nothing.
• A rest parameter, like (...items). It collects all the values passed in into one array.
• Destructuring, like ({ name, score }). It takes properties out of an object straight into parameters.

1const welcome = (name = "friend") => "Hello, " + name;2const scoreLine = ({ name, score }) => name + " has " + score + " points";3 4console.log(welcome());5console.log(scoreLine({ name: "Asha", score: 3 }));

Line 1 gives name a default value, "friend", so name = "friend" must be inside brackets. Line 4 calls it with nothing, so it prints Hello, friend.

Line 2 takes the name and score properties out of one object. Those curly braces must be inside round brackets too. Line 5 passes in the object and prints Asha has 3 points.

When there are no curly braces after =>, the arrow's body is one expression. An expression is a piece of code that makes a value, like price * 0.2. The arrow gives back that value by itself, so you don't write return. This is called an implicit return. "Implicit" means it happens without being written.

The most common beginner mistake is giving back an object. After =>, a curly brace { starts a function body, as in the Statements lesson. It does not start an object. To give back an object without return, put round brackets around it: () => ({ a: 1 }).

1const makeLabel = name => ({ name, active: true });Run2const brokenLabel = name => { name: name };3 4console.log(makeLabel("Ada").name);5console.log(brokenLabel("Ada"));

Press Step to watch both calls. makeLabel gives back an object, so line 4 reads .name and prints Ada. brokenLabel has a body with no return, so line 5 prints undefined.

1const salePrice = price => price - 2;2const priceWithTax = price => {3  const tax = 1;4  return price + tax;5};6 7console.log(salePrice(10));8console.log(priceWithTax(10));

Line 1 has one calculation, so it needs no braces. Line 7 prints salePrice(10), which is 8. The second arrow, on lines 2 to 5, first makes a variable called tax. That is an extra step, so it needs curly braces, and line 4 must say return. Line 8 prints priceWithTax(10), which is 11.

Leave out the braces when the arrow has one clear expression. Don't leave them out just to make the code shorter.

A method is a function stored in an object. Inside a method, the word this usually means "the object the method was called on". A regular function gets its this from the call. In user.regular(), this is user, the object before the dot.

An arrow does not get a this from the call. It uses the this from the place where it was written.

1"use strict";2function makeUser() {3  return {4    name: "Ada",5    regular() { return this.name; },6    arrow: () => this.name,7  };8}9 10const user = makeUser();11console.log(user.regular());12console.log(user.arrow());

The code above is in strict mode: line 1 says "use strict". The arrow is written inside the function makeUser, and there this is undefined. So the arrow's this is undefined too, and reading this.name throws an error.

An arrow written at the top of a file has the same problem:

• In a module, a file that uses import or export, the top-level this is undefined.
• In an old-style browser script, the top-level this can be the global object, window.

Either way, this is not the object you wanted.

But arrows are very useful inside regular methods. A callback written as an arrow keeps the method's this. Step through the example below to see it.

1const team = {Run2  name: "Debuggers",3  members: ["Ada", "Lin"],4  labels() {5    return this.members.map(member => this.name + ": " + member);6  },7};8 9console.log(team.labels().join(" | "));

Line 4 is a regular method. Line 9 calls it as team.labels(), so inside it this is team. On line 5, the arrow passed to map uses that same this. So this.name is Debuggers for both members, and line 9 prints Debuggers: Ada | Debuggers: Lin.

1const displayName = user => user.name;2 3console.log(displayName({ name: "Asha" }));

Line 1 makes an arrow with one parameter, user. It gives back user.name. Line 3 passes in an object, so it prints Asha. No this is used. So the rule is not "arrows can't use objects". The rule is: "an arrow does not get a this from the call."

Arrows are smaller than regular functions on purpose. Inside a regular function, the word arguments holds a list of all the values the call passed in. An arrow does not get its own arguments. If an arrow uses the word arguments, JavaScript looks for it outside the arrow.

At the top level of a module there is no outer arguments. So you would get a ReferenceError, an error that means "this name doesn't exist".

1function outer(first, second) {2  const arrow = () => arguments[0] + " / " + arguments.length;3  return arrow("inner");4}5 6console.log(outer("outer", "second"));

In plain words, line by line:

1. Line 1 makes a regular function, outer, with two parameters.
2. Line 2 makes an arrow inside it. The arrow reads arguments[0], the first value, and arguments.length, how many values there are.
3. Line 3 calls the arrow with "inner". The arrow has no arguments of its own, so it reads the ones from outer.
4. Line 6 calls outer with "outer" and "second", so it prints outer / 2.

When you want all the values in a list, use a rest parameter instead: const collect = (...items) => items.length;. The three dots collect every value into a real array. Rest parameters work in both regular functions and arrows.

1const countItems = (...items) => items.length;2 3console.log(countItems("tea", "book", "pen"));

Line 1 collects every value passed in into an array called items. Line 3 calls the arrow with three items, so it prints 3. Unlike arguments, the rest parameter has a name you chose, and it belongs to this arrow.

1const User = name => ({ name });2console.log(User("Ada").name);3console.log(new User("Ada"));

A constructor is a function you call with new to build a new object. Line 2 calls User the normal way, so it prints Ada. Line 3 calls it with new, and that throws an error, because an arrow can't be a constructor.

An arrow also has no prototype property. That is the property a constructor uses to share methods with the objects it builds. In Chrome and Node, the error reads TypeError: User is not a constructor. Other browsers may word it differently, so remember the rule, not the exact message.

1function outer(first, second) {2  const arrow = () => arguments[0] + " / " + arguments.length;3  return arrow("inner");4}5 6console.log(outer("outer", "second"));

Use the three buttons to switch between the examples. Each one shows the output the code really gives.

When to use a regular function instead

Arrows are a tool. You don't have to use them everywhere. Use a regular function or method when the function needs any of these:

• its own this, from the call,
• a clear name that explains a long job,
• to be called with new.

The table below compares the two kinds. Read each row as: "for this question, here is the regular function, and here is the arrow."

Where you'll use arrow functions

In everyday code, you'll see arrows most in two places: callbacks for array methods, and tiny helpers. The arrow keeps the small job right next to the data it works on. These array methods take a callback:

• map calls it once for each item and collects what it gives back into a new array.
• filter keeps only the items for which it gives back true.
• find gives back the first item for which it gives back true.

You'll also see join. It glues the items of an array into one string, with the text you give between them.

1const prices = [5, 12, 20];2const withTax = prices.map(price => price * 1.1);3const affordable = withTax.filter(price => price < 15);4 5const cart = {6  label: "Cart",7  items: ["book", "pen"],8  lines() {9    return this.items.map(item => this.label + ": " + item);10  },11};12 13console.log(affordable.join(", "));14console.log(cart.lines().join(" | "));

In plain words, line by line:

1. Line 2: map runs the arrow on each price and adds 10% tax.
2. Line 3: filter keeps only the prices under 15.
3. Lines 8 and 9: lines() is a regular method, because it needs this to be cart. The arrow inside it uses that same this.
4. Line 13 prints the prices that are left. Line 14 prints Cart: book | Cart: pen.

1const cart = [2  { name: "tea", price: 3 },3  { name: "book", price: 8 },4];5 6const labels = cart.map(item => item.name + ": $" + item.price);7 8console.log(labels.join(" | "));

Lines 1 to 4 make an array of two item objects. On line 6, map passes one item at a time to the arrow. The arrow gives back a label for each item, like tea: $3. Line 8 joins the labels and prints tea: $3 | book: $8.

This callback is a good fit for an arrow. It doesn't use this, it doesn't change the cart, and it has only one step. If the label rules grew long, you would give the function a clear name, like formatCartItem, instead of squeezing it into one line.

1const todos = [2  { name: "tea", done: false },3  { name: "book", done: true },4];5 6const openTodos = todos.filter(todo => !todo.done);7const finishedTodo = todos.find(todo => todo.done);8 9console.log(openTodos[0].name);10console.log(finishedTodo.name);

Both arrows answer a yes-or-no question about one todo. On line 6, filter keeps every todo that is not done (! means "not"). So line 9 prints the first open todo's name, tea. On line 7, find stops at the first todo that is done, so line 10 prints book. Neither method changes the original todos array.

1const formatItem = item => item.name + ": $" + item.price;2const cart = [{ name: "tea", price: 3 }, { name: "book", price: 8 }];3 4console.log(cart.map(formatItem).join(" | "));

Line 1 stores the arrow in a variable called formatItem. Line 4 passes it to map by name, without round brackets, so map can call it for each item. It prints tea: $3 | book: $8.

The name tells the reader what map is doing. A named helper is also easier to test, use again, and grow than a long callback.

Common mix-ups

The code below shows the second mix-up. Line 1 has round brackets around the object, so line 4 prints Ada. Line 2 has curly braces and no return, so line 5 prints undefined.

1const makeLabel = name => ({ name, active: true });2const brokenLabel = name => { name: name };3 4console.log(makeLabel("Ada").name);5console.log(brokenLabel("Ada"));

The exercises start easy and get harder. Make a guess first. Use the hints if you get stuck.

const add = function (a, b) {
  return a + b;
};
console.log(add(2, 3));

const add = (a, b) => a + b;
console.log(add(2, 3));

const makePoint = (x, y) => { x, y };
console.log(makePoint(2, 4).y);

const makePoint = (x, y) => ({ x, y });
console.log(makePoint(2, 4).y);

"use strict";
function makeUser() {
  return {
    name: "Ada",
    regular() { return this.name; },
    arrow: () => this.name,
  };
}

const user = makeUser();
console.log(user.regular());
console.log(user.arrow());

const team = {
  name: "Debuggers",
  members: ["Ada", "Lin"],
  labels() {
    return this.members.map(member => this.name + ": " + member);
  },
};

console.log(team.labels().join(" | "));

const team = {
  name: "Debuggers",
  members: ["Ada", "Lin"],
  labels() {
    return this.members.map(member => this.name + ": " + member);
  },
};

console.log(team.labels().join(" | "));

const cart = [{ name: "tea" }, { name: "book" }];
const names = cart.map(item => item.name);
console.log(names.join(", "));

const cart = [{ name: "tea" }, { name: "book" }];
const names = cart.map(item => item.name);
console.log(names.join(", "));

For each question, first look at what comes after =>: curly braces, or an expression. For questions about this, ask whether the function is an arrow or a regular function. Each answer explains why it is right or wrong.

Key takeaways

• An arrow function is a short way to write a function expression: (value) => result.
• Without curly braces, an arrow gives back its expression by itself. With curly braces, you must write return.
• To give back an object, put round brackets around it: () => ({ a: 1 }).
• Arrows have no this, arguments, or prototype of their own, and you can't call them with new.
• Use arrows for short callbacks. Use regular functions for methods that need this, for constructors, and for code that needs arguments.

Up next: Recursion, where a function calls itself.