Arrow Functions

The ES6 concise function syntax and why arrow functions handle this differently.

Overview

Arrow functions, introduced in ES6 (2015), provide a shorter syntax for writing function expressions. Instead of function(x) { return x * 2; } you write (x) => x * 2. When the body is a single expression, the braces and return keyword are implicit the expression's value is returned automatically. Arrow functions are not just a stylistic shortcut. They differ from regular functions in one critical way: they do not have their own this binding. Instead, they capture the this from the surrounding lexical scope at the time they are defined. This makes them ideal for callbacks inside class methods and event handlers where you want to preserve the outer context's this. Arrow functions also cannot be used as constructors, do not have an arguments object, and cannot be generators. For most everyday use array callbacks, inline transformations, event handlers they are the preferred choice.

Key Points

•Syntax: (params) => expression (implicit return) or (params) => { statements; return value; }
•Single parameter needs no parens: x => x * 2. No parameters needs empty parens: () => 42
•Arrow functions do not have their own this they inherit it from the enclosing scope
•Implicit return: (x) => x * 2 returns x * 2 without needing the return keyword
•For returning an object literal implicitly, wrap it in parens: (x) => ({ id: x })
•Cannot be used as constructors (no new), have no arguments object, cannot be generators

Examples

Converting regular functions to arrow functions

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

// Arrow full body
const double2 = (n) => { return n * 2; };

// Arrow implicit return (single expression)
const double3 = (n) => n * 2;

// Arrow no parens for single param
const double4 = n => n * 2;

console.log(double4(5)); // 10

Arrow functions as array callbacks

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]

Returning an object literal wrap in parens

const users = ["Alice", "Bob"];
const userObjects = users.map(name => ({ name, active: true }));
console.log(userObjects);
// [{ name: "Alice", active: true }, { name: "Bob", active: true }]

Without parens, { } is treated as a function body, not an object literal. (name) => { name } returns undefined.

Common Mistakes

Forgetting to wrap returned object literals in parentheses: n => { key: n } is a block, not an object
Using arrow functions as object methods when you need this to refer to the object
Thinking arrow function syntax is always shorter with complex bodies, a regular function is clearer

Note

A practical rule: use arrow functions for callbacks and short transformations. Use regular function declarations for named, reusable functions especially when you need this to refer to the function's own context.

Arrow Functions

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What is implicit return in arrow functions?