JS Arrow Functions

Think of the difference between a formal letter and a quick text message, both deliver the same message, but the text message uses a shorter, more casual format that gets straight to the point. Arrow functions are that shorter format for JavaScript functions, introduced in ES6, using => instead of the function keyword, and often letting you skip curly braces and the return keyword entirely for simple one-line functions. You'll see arrow functions everywhere in modern JavaScript, especially inside array methods and event handlers across real projects, including the scripts running on cookiescursor.com.

In this page:

Arrow Function Syntax
Implicit Return
Arrow Functions in Array Methods
this in Arrow Functions
When NOT to Use Arrow Functions

Arrow Function Syntax

An arrow function replaces the function keyword with =>, placed after the parameter list, and for a single expression, the curly braces and return keyword can both be omitted entirely.

Note: For a single parameter, the surrounding parentheses are optional, name => ... is valid, though many style guides still recommend keeping them for consistency.

Warning: Multiple parameters always require parentheses around them, (a, b) => ..., omitting them there causes a syntax error.

Example: Arrow Function Syntax

javascript

const add = (a, b) => a + b;
console.log(add(2, 3));

Implicit Return

When an arrow function's body is a single expression, you can omit both the curly braces and the return keyword, JavaScript automatically returns the expression's result.

Note: Implicit return is ideal for short, one-line transformations, especially inside array methods like map and filter.

Warning: Returning an object literal implicitly requires wrapping it in parentheses, like () => ({ key: value }), otherwise the braces are read as a function body.

Example: Implicit Return

javascript

const square = n => n * n; // implicit return, no braces needed
console.log(square(5));

Arrow Functions in Array Methods

Arrow functions are extremely common as short, inline callbacks passed to array methods like map, filter, and forEach, keeping the code compact and readable.

Note: When a callback is short enough to fit on one line, an arrow function with implicit return usually reads more cleanly than a full function expression.

Warning: For more complex callback logic spanning several lines, full curly-brace syntax with an explicit return is often clearer than forcing a one-liner.

Example: Arrow Functions in Array Methods

javascript

const nums = [1, 2, 3];
console.log(nums.map(n => n * 2));

this in Arrow Functions

Unlike regular functions, arrow functions do not have their own this, they inherit this from the enclosing scope where the arrow function was defined, which can be either helpful or surprising depending on context.

Note: This inherited-this behavior makes arrow functions great inside callbacks within a method, where you want this to still refer to the outer object.

Warning: Using an arrow function directly as an object's method usually breaks this, since it inherits from the surrounding scope, not the object calling the method.

Example: this in Arrow Functions

javascript

const obj = {
  value: 42,
  regular: function () {
    const arrow = () => console.log(this.value); // inherits this from regular()
    arrow();
  },
};
obj.regular();

When NOT to Use Arrow Functions

Arrow functions are best avoided as object methods that need this, and cannot be used as constructor functions with new, regular function declarations remain the right choice in these specific cases.

Note: As a simple rule, use regular functions for object methods and constructors, and arrow functions for short callbacks and standalone utility functions.

Warning: Attempting to use an arrow function with the new keyword throws a TypeError immediately, arrow functions can never be constructors.

Example: When NOT to Use Arrow Functions

javascript

const obj = {
  value: 42,
  // Avoid: arrow function as a method, 'this' won't refer to obj
  broken: () => console.log(this),
};
obj.broken(); // this is NOT obj

Common Mistakes

Using an arrow function as an object method that relies on this, arrow functions don't have their own this, leading to unexpected behavior.
Forgetting parentheses are required around multiple parameters, but optional for a single parameter, in arrow function syntax.
Wrapping an object literal being implicitly returned without parentheses, which JavaScript misinterprets as a function body block instead.

Chapter Summary

Arrow functions use => syntax and can omit curly braces and return for a single expression, called implicit return.
Arrow functions do not have their own this, they inherit this from the surrounding scope where they were defined.
Arrow functions are ideal for short callbacks, like inside map or filter, but not well suited as object methods.

Browser Support

Arrow functions have been supported in all major browsers since 2015 and are a fully standard part of modern JavaScript.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS Destructuring Next Lesson → JS Classes

JS Arrow Functions

Arrow Function Syntax

Implicit Return

Arrow Functions in Array Methods

this in Arrow Functions

When NOT to Use Arrow Functions

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code