JavaScript Arrow Functions

The short => function syntax, implicit returns and callbacks.

Lesson 18 of 56Intermediate13 min read

Arrow functions are a shorter way to write functions, using =>. You'll see them throughout modern JavaScript, especially as small "callback" functions passed to other functions, as in numbers.map(n => n * 2).

Arrow functions don't add any new abilities for most everyday tasks. Their value is brevity: a one-line arrow can replace three or four lines of a regular function, which keeps short helper code easy to read. This lesson shows how to shorten a function step by step, and where the two styles behave differently.

From a regular function to an arrow function

JavaScript
// regular function expression
const double = function (n) {
  return n * 2;
};

// arrow function
const double = (n) => {
  return n * 2;
};

// arrow with implicit return
const double = (n) => n * 2;

// one parameter: brackets optional
const double = n => n * 2;

All four versions do exactly the same thing. Each step removes something that the shorter syntax makes unnecessary.

Arrow function shortcut rules

  • Implicit return: if the body is a single expression with no { }, its value is returned automatically, without the return keyword.
  • With { }, you need return, just as in a normal function.
  • No parameters: use empty brackets, as in () => console.log("hi").
  • One parameter: the brackets are optional, as in x => x + 1. Many style guides keep them anyway for consistency.
  • Returning an object: wrap it in brackets so the braces aren't mistaken for a function body: () => ({ ok: true }).

The most common arrow bug is adding curly braces and forgetting return. The function then returns undefined.

Arrow functions as callbacks

A callback is a function you pass to another function so it can be called later. Arrows make callbacks tidy:

JavaScript
setTimeout(() => console.log("1 second later"), 1000);
button.addEventListener("click", () => count++);
const evens = nums.filter(n => n % 2 === 0);

Notice that you pass the function itself. Writing setTimeout(sayHi(), 1000) would call sayHi immediately and pass its result instead.

How arrow functions differ from regular functions

Arrow functions don't have their own this. They use the this of the code around them. That's usually helpful inside callbacks, but it means you shouldn't use arrows as object methods that rely on this (see Classes). Arrow functions also can't be used with new to create objects.

When not to use an arrow function

Arrow functions are short, but they aren't always the right choice:

  • Object methods that use this should be normal methods, because arrow functions don't get their own this. You'll see why in this and bind.
  • Constructors can't be arrow functions; new doesn't work with them.
  • Event handlers that rely on this being the element need a normal function, although event.currentTarget works in either.
  • Long, named helpers used in many places often read better as function declarations, which are also hoisted.

For short callbacks passed to map, filter, setTimeout and promise methods, arrow functions are the modern default.

JavaScript Arrow Functions Syntax

Arrow function forms

const f1 = () => "no params";
const f2 = x => x * 2;
const f3 = (a, b) => a + b;
const f4 = (a, b) => {
  const sum = a + b;
  return sum;
};
const f5 = () => ({ name: "object" });

JavaScript Arrow Functions Summary

  • Arrow functions are a shorter syntax for functions, written with =>.
  • Without curly braces, an arrow function returns its expression automatically.
  • With curly braces, you must write return.
  • Wrap returned objects in brackets: () => ({ ... }).
  • Arrows suit callbacks but don't have their own this.

JavaScript Arrow Functions Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

Same function, three ways

function areaClassic(w, h) {
  return w * h;
}

const areaArrow = (w, h) => {
  return w * h;
};

const areaShort = (w, h) => w * h;

console.log(areaClassic(3, 4), areaArrow(3, 4), areaShort(3, 4));
ConsoleEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 1 to 3A classic function declaration.
  2. Lines 5 to 7An arrow with a body still needs return.
  3. Line 9An arrow with an implicit return. Same result, one line.
Example 2

Arrows as callbacks

const prices = [4, 18, 7, 25];

const withTax = prices.map(p => p * 1.2);
const cheap = prices.filter(p => p < 10);
const sorted = [...prices].sort((a, b) => b - a);

console.log(withTax);
console.log(cheap);
console.log(sorted);

setTimeout(() => console.log("⏰ This ran after 500ms"), 500);
ConsoleEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 3map calls the arrow for every price and builds a new array.
  2. Line 4filter keeps prices where the arrow returns true.
  3. Line 5sort uses an arrow to compare two items (highest first).
  4. Line 11setTimeout calls the arrow later.
Example 3

Returning objects

const makeUser = (name, age) => ({ name, age, isAdult: age >= 18 });

const broken = (name) => { name: name };

console.log(makeUser("Kai", 19));
console.log(broken("Kai"));
ConsoleEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 1Brackets around { } mean "return this object". { name, age } is shorthand for { name: name, age: age }.
  2. Line 3Without the brackets, { } is treated as a function body, so it returns undefined.

Common JavaScript Arrow Functions Mistakes

Braces without return

Don't
const add = (a, b) => { a + b };
console.log(add(2, 3)); // undefined
Do
const add = (a, b) => a + b;
// or: const add = (a, b) => { return a + b; };

Calling instead of passing

Don't
button.addEventListener("click", sayHi()); // runs immediately!
Do
button.addEventListener("click", sayHi);
button.addEventListener("click", () => sayHi("Sam"));

Pass the function itself, or wrap the call in an arrow. Don't call it directly.

JavaScript Arrow Functions in Real Projects

Arrow functions in modern code

Open any modern codebase, whether React components, Node.js servers or browser extensions, and you'll see arrows everywhere: event handlers, array transformations, promise chains and small utility functions.

JavaScript Arrow Functions Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Turn this into a one-line arrow function with an implicit return.

const triple =   n * 3;
console.log(triple(4)); // 12
Predict the outputmedium

What does this print?

const greet = name => `Hi ${name}`;
const nothing = () => {};
console.log(greet("Lu"), nothing());
Multiple choicemedium

How do you return an object from an arrow function in one line?

Fix the bugmedium

isEven should return true/false and squareAll should return the squared array. Fix both arrows.

const isEven = (n) => { n % 2 === 0 };
const squareAll = (arr) => arr.map((x) => { x * x });

console.log(isEven(4), squareAll([1, 2, 3]));
ConsoleEdit the code, then press Run or Ctrl+Enter
Checks
  • isEven(4) is true
  • isEven(7) is false
  • squareAll([1, 2, 3]) is [1, 4, 9]

JavaScript Arrow Functions Quiz

3 questions to check what you learned.

  1. Which is a valid arrow function?

    • const f = => 1;
    • const f = () -> 1;
    • const f = () => 1;
    • const f = function => 1;

  2. When does an arrow function return a value automatically?

    • When the body is a single expression without curly braces
    • Always
    • When it has one parameter
    • Never

  3. Why shouldn't you use an arrow function as an object method that uses this?

    • Arrows don't have their own this; they use the surrounding one
    • Arrows are slower
    • Arrows can't be stored in objects
    • It's a syntax error

JavaScript Arrow Functions Challenge

Arrow utilities

Write these as arrow functions with implicit returns:

  1. const toCelsius = f => … that converts Fahrenheit: (f - 32) * 5 / 9
  2. const fullName = (first, last) => … returning "First Last"
  3. const makePoint = (x, y) => … returning the object { x, y }
ConsoleEdit the code, then press Run or Ctrl+Enter
Checks
  • toCelsius(212) is 100
  • fullName("Ada", "Lovelace")
  • makePoint(2, 5) returns { x: 2, y: 5 }
  • Uses arrow functions

Related JavaScript topics

17FunctionsPackage code into reusable, named blocks with inputs and outputs.24Array Methods (map, filter…)Transform, filter, search, sort and total arrays in one readable line.36EventsReact to clicks, typing, form submits and key presses.
Esc
↑↓ to navigateEnter to open