References

Beginner-friendly references for web development, with live, editable examples.

The JavaScript Arrow Functions => operator

Operator JavaScript All modern browsers Updated
Quick answer

An arrow function => is a compact way to write a function: const add = (a, b) => a + b. A single expression is returned automatically, with no return or braces needed. Arrow functions also inherit this from where they're defined, which makes them ideal for callbacks.

Overview

Arrow functions are a shorter syntax for functions, introduced in ES2015 and now everywhere. (a, b) => a + b is the whole function. Drop the parentheses for a single parameter (x => x * 2), and if the body is one expression, its value is returned automatically — no return, no braces. That conciseness is why callbacks to map(), filter() and friends almost always use arrows.

Their other defining trait is how they handle this. A regular function gets its own this depending on how it's called, which historically caused endless bugs in callbacks and event handlers. An arrow function has no this of its own — it inherits this from the surrounding scope where it was written. Inside a class method or a closure, that's usually exactly what you want, and it removes the need for old const self = this or .bind(this) tricks.

That same behavior is also why arrows are the wrong choice in a few places. Don't use one as an object method that needs this to refer to the object, as a constructor (they can't be called with new), or where you need the arguments object. One gotcha to remember: to implicitly return an object literal, wrap it in parentheses — () => ({ a: 1 }) — or the braces are read as a function body.

Syntax

const add = (a, b) => a + b;     // implicit return
const square = x => x * x;       // one param, no parens
const greet = () => "hi";        // no params
const make = () => ({ ok: true }); // return an object literal

// multi-line needs braces and return
const f = (x) => {
  const y = x * 2;
  return y;
};

Example

Live example 
<pre id="out" style="font:15px ui-monospace,monospace"></pre>
<script>
  const nums = [1, 2, 3, 4];

  const doubled = nums.map(n => n * 2);
  const evens   = nums.filter(n => n % 2 === 0);

  document.getElementById('out').textContent =
    'doubled: ' + doubled.join(', ') + '\n' +
    'evens:   ' + evens.join(', ');
</script>

Best practices

  • Use arrow functions for callbacks — they're concise and inherit this correctly.
  • Lean on the implicit return for one-expression functions: x => x * 2.
  • Wrap a returned object literal in parentheses: () => ({ key: value }).
  • Don't use arrows as object methods, constructors, or where you need this/arguments — use a regular function there.

Frequently asked questions

What is the difference between an arrow function and a regular function?
Arrow functions are shorter, have an implicit return for single expressions, and inherit this from their surrounding scope instead of getting their own. Regular functions have their own this and can be constructors.
When should I not use an arrow function?
As object methods that rely on this, as constructors (they can't be used with new), or where you need the arguments object.
How do I return an object from an arrow function?
Wrap it in parentheses: () => ({ a: 1 }). Without them, the braces are treated as the function body.
Do arrow functions have their own this?
No. They inherit this from the scope where they're defined, which is why they work so well as callbacks.
+ =