Start learning
Part 1/First Steps

Arrow functions, the basics

JavaScript gives you more than one way to make a function. You already know Function Declarations and Function Expressions. There’s a third form that’s shorter and, for small functions, usually the one you’ll reach for: the arrow function.

The name comes from the shape of the syntax, the => sitting between the parameters and the body:

let func = (arg1, arg2, ..., argN) => expression;

That line builds a function func taking the arguments arg1 through argN. When you call it, it evaluates the expression on the right using those arguments and hands back the result. No return keyword, no braces, no function word.

Read next to a Function Expression, you can see exactly what got trimmed away:

let func = function(arg1, arg2, ..., argN) {
  return expression;
};
// the long way
let func = function(a, b) { return a + b; };
// the short way — same result
let func = (a, b) => a + b;
dropped: function·dropped: { }·dropped: return
An arrow function is a Function Expression with the boilerplate stripped out.

Here’s a working example you can hold onto:

let sum = (a, b) => a + b;

/* This arrow function is a shorter form of:

let sum = function(a, b) {
  return a + b;
};
*/

alert( sum(1, 2) ); // 3

The part (a, b) => a + b describes a function that takes two arguments, a and b. Call it, and it computes a + b and returns that value. The return is automatic because there are no braces — this is called an implicit return, and it only happens in this brace-free form.

Try it live. The whole function is one line — edit the body and re-run to watch the output change.

interactiveA one-line arrow function

Trimming the parentheses

The syntax has two small shortcuts depending on how many parameters you have.

  • One parameter? You can drop the parentheses around it.

    let double = n => n * 2;
// roughly the same as: let double = function(n) { return n * 2 };

alert( double(3) ); // 6

  • No parameters? The parentheses stay, but they’re empty. You can’t leave them out.

    let sayHi = () => alert("Hello!");

sayHi();

So the parentheses are optional in exactly one case: a single argument. Zero arguments or two-plus arguments both require them.

0 args
() => …
parens required
1 arg
n => …
parens optional
2+ args
(a, b) => …
parens required
When you can and can't skip the parentheses.

Where you’d actually use them

Anywhere a Function Expression fits, an arrow function fits too. They shine when a function is small and you’re passing it around as a value.

A common case is choosing a function on the fly:

let temp = prompt("Current temperature in °C?", 20);

let describe = (temp < 15) ?
  () => alert('Chilly out!') :
  () => alert("Nice and warm!");

describe();

The ternary picks one of two arrow functions and stores it in describe. Neither runs yet — they’re just values. The call describe() runs whichever one got selected. Writing this with the full function keyword twice would be noticeably clunkier.

Here that idea is wired to a real input. Type a temperature, and the ternary stores one of the two arrow functions in weather before you ever call it:

interactiveStoring a function, then calling it

The other big use is callbacks: the tiny functions you hand to array methods, timers, and event handlers. Something like arr.map(x => x * 2) reads cleanly precisely because the arrow syntax gets out of the way.

Arrow functions can look cramped or strange the first few times you meet them. That wears off fast. Once your eyes learn the => shape, the brevity becomes a feature — less to type for the simple, one-line jobs.

Multiline arrow functions

Every example so far took its arguments, evaluated a single expression, and returned it. Real functions sometimes need more: a few statements, a temporary variable, some branching.

For that, wrap the body in curly braces. This flips one important rule: with braces, the implicit return is gone. You have to write return yourself, exactly like a regular function, or the function returns undefined.

let sum = (a, b) => {  // the brace opens a full function body
  let result = a + b;
  return result;       // with braces, you must return explicitly
};

alert( sum(1, 2) ); // 3
no braces → implicit return
(a, b) => a + b
returns a + b automatically
braces → explicit return
(a, b) => {
  return a + b;
}
forget return → undefined
Two bodies, two rules. The braces are the switch.

Run the three forms below back to back. Only the middle one — braces without return — quietly gives you undefined. Edit any of them and re-run to see the rule for yourself:

interactiveBraces switch off the implicit return

Summary

Arrow functions are a compact way to write functions, and they’re at their best for short actions and one-liners. There are two forms:

  1. Without braces: (...args) => expression. The right side is a single expression; the function evaluates it and returns the result automatically. If there’s exactly one argument, the parentheses are optional, as in n => n*2.
  2. With braces: (...args) => { body }. The braces let you write multiple statements, but now you must use an explicit return to send a value back.

Keep the two rules straight — braces turn off the implicit return — and arrow functions will save you a lot of typing.