Arrow functions

A shorter function shape

An arrow function is a compact way to write a function value: (input) => result. It is still a function. You can store it in a variable, pass it to another function, and call it with parentheses.

Arrows are popular because JavaScript programs often pass small functions as callbacks. In the Declaring & calling functions lesson, you learned the full recipe-card version. Arrows are the sticky-note version: short, quick, and best for small jobs.

This lesson covers four things in order: arrow syntax, implicit returns, what arrows do not have, and when not to use them. We will mention The this keyword, Methods & this, Arrow functions & lexical this, and Constructors & new by title only because those deeper lessons come later.

Start with a function expression. It creates a function value and stores it in a variable. An arrow does the same job with fewer words:

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));

The parameter list goes on the left of =>. The work goes on the right. If there are zero parameters, use (). If there are two or more parameters, use parentheses. If there is exactly one simple parameter, the parentheses are optional.

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

Keep the Code style lesson’s advice in mind: shorter is not automatically clearer. Use the shape that lets a beginner read the code aloud.

A concise arrow can return one expression without writing return. Think of it like a vending machine: you press the button, and the result comes straight out.

The biggest beginner trap is returning an object. In JavaScript, a bare { after => starts a block, just like you learned in Statements. To return an object literal implicitly, wrap the object in parentheses.

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

A regular function gets its this from how it is called. An arrow does not. It borrows 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 arrow method above is deliberately written inside a strict factory so the outer this is undefined. ES module top-level code also has undefined as top-level this. In classic browser scripts, top-level this may be the global object instead. Either way, it is not the object you wanted.

But arrows are excellent inside regular methods when a callback should keep the method’s this.

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(" | "));

Arrows are intentionally smaller than regular functions. They do not create their own arguments object. If you mention arguments inside an arrow, JavaScript looks outside the arrow. At the top level of a module, there is no outer arguments, so that would be a ReferenceError.

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

Prefer rest parameters when you want a list of arguments: const collect = (...items) => items.length;. Rest parameters are explicit and work in both regular and arrow functions.

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

An arrow has no prototype property for instances and cannot be called with new. In V8 environments such as Chrome and Node, new User("Ada") throws a TypeError: User is not a constructor. The exact wording can vary by engine, so learn the rule, not the message.

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

When not to use arrows

Arrow functions are a tool, not a style requirement. Prefer a regular function or method when the function needs its own calling context, a useful name, or constructor behavior.

Where you'll use arrow functions

Most beginner code uses arrows in array callbacks and tiny helpers. They keep the important operation close to the data.

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(" | "));

Notice the pattern: arrows are callbacks passed to map and filter. The object still uses a regular method for lines(), because that method needs this to be cart.

Common misconceptions

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

Key takeaways

• Arrow functions are compact function expressions: (value) => result.
• A concise arrow returns its expression automatically; braces require return.
• Wrap object literals in parentheses: () => ({ a: 1 }).
• Arrows have no own this, arguments, prototype, or constructor behavior.
• Use arrows for short callbacks; avoid them for methods that need this, constructors, and code that needs arguments.

Up next: Recursion.