JavaScriptFunctionsBeginner

Arrow functions (() => {})

Creates concise functions with lexical 'this' binding.

Review the syntaxStudy the examplesOpen the coding app
const fn = (param1, param2) => expressionOrBlock;
Open Coding Reference

This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.

What it does

Overview

Creates concise functions with lexical 'this' binding.

Arrow functions, introduced in ES6, provide a compact alternative to traditional function expressions while behaviorally differing in key areas. Crucially, they lack their own bindings for 'this', 'arguments', 'super', and 'new.target'. Instead, 'this' is lexically resolved from the enclosing execution context, which eliminates the need for .bind() or 'that = this' patterns in asynchronous callbacks or event listeners. They cannot be used as constructors; calling them with the 'new' keyword throws a TypeError. Additionally, they do not have a 'prototype' property and cannot be used as generator functions. From a performance perspective, while they are lightweight, creating new arrow functions inside frequently executed loops or React render methods can lead to memory pressure due to repeated function allocation. IE is not supported.

Quick reference

Syntax

const fn = (param1, param2) => expressionOrBlock;

See it in practice

Examples

1

Implicit Return in Callbacks

const prices = [10, 20, 30];
const taxRate = 1.1;
const totalPrices = prices.map(price => price * taxRate);
console.log(totalPrices);
Output:
[11, 22, 33]

When the function body contains only a single expression, the braces and 'return' keyword can be omitted for brevity.

2

Lexical this in Objects

const counter = {
  count: 0,
  start: function() {
    setInterval(() => {
      this.count++;
      console.log(this.count);
    }, 1000);
  }
};
// If this were a standard function, this.count would be undefined
Output:
1 2 3

Arrow functions do not create their own 'this' context; they inherit 'this' from the start() method's scope.

3

Returning Object Literals

const createCoords = (x, y) => ({ x: x, y: y });
const point = createCoords(10, 25);
console.log(point);
Output:
{"x": 10, "y": 25}

To return an object literal implicitly, wrap the object in parentheses to distinguish the braces from a function block.

Debug faster

Common Errors

1

TypeError

Cause: Attempting to use an arrow function as a constructor with the 'new' keyword.

Fix: Use a standard function expression or a class definition if you need a constructible object.

const Person = (name) => { this.name = name; };
const user = new Person('Alex'); // Throws TypeError
2

LogicError

Cause: Using an arrow function as an object method when you need to access the object's own properties via 'this'.

Fix: Use the ES6 shorthand method syntax or a traditional function expression.

const user = {
  name: 'John',
  greet: () => console.log('Hi ' + this.name)
};
user.greet(); // 'Hi undefined' because 'this' refers to global scope
3

ReferenceError

Cause: Attempting to access the 'arguments' object which is not defined in arrow functions.

Fix: Use rest parameters (...args) to capture all arguments passed to the function.

const sum = () => {
  return arguments[0] + arguments[1];
};
sum(1, 2); // Throws ReferenceError: arguments is not defined

Runtime support

Compatibility

Node.js, BrowserAll modern browsers, IE not supportedES6 (2015)

Source: MDN Web Docs

Common questions

Frequently Asked Questions

Creates concise functions with lexical 'this' binding.

TypeError: Use a standard function expression or a class definition if you need a constructible object. LogicError: Use the ES6 shorthand method syntax or a traditional function expression. ReferenceError: Use rest parameters (...args) to capture all arguments passed to the function.