Arrow Functions

Arrow functions are a concise syntax for writing function expressions. They are not just shorthand — they also behave slightly differently in a few important ways. Most JavaScript code you encounter in the wild uses arrow functions for callbacks and short utilities.

Arrow function syntax

The => (fat arrow) replaces the function keyword:

const formatPrice = (price) => {
  return '$' + price.toFixed(2);
};

Call it identically to any other function:

console.log(formatPrice(149));  // '$149.00'

Parameter variations

No parameters — use empty parentheses:

const greet = () => {
  console.log('Welcome to Summit Trail Outfitters!');
};

Single parameter — parentheses are optional (commonly omitted):

const formatPrice = price => {
  return '$' + price.toFixed(2);
};

Multiple parameters — parentheses required:

const formatSummary = (name, price) => {
  return `${name} | $${price.toFixed(2)}`;
};

Implicit return

When the function body is a single expression, you can omit the curly braces and return keyword. The expression value is returned automatically:

const formatPrice = price => '$' + price.toFixed(2);
const isAvailable = available => available === true;

This is the implicit return — the most concise form, widely used for short utility functions and callbacks. The expression must be a single statement; anything requiring multiple lines needs the explicit form.

Explicit return

Multi-line arrow functions require curly braces and an explicit return:

const formatTourSummary = (name, price, available) => {
  const status = available ? 'Available' : 'Sold Out';
  return `${name} | $${price.toFixed(2)} | ${status}`;
};

The three forms side by side

The same function written three ways:

// Function declaration
function formatPrice(price) {
  return '$' + price.toFixed(2);
}

// Function expression
const formatPrice = function(price) {
  return '$' + price.toFixed(2);
};

// Arrow function (explicit)
const formatPrice = (price) => {
  return '$' + price.toFixed(2);
};

// Arrow function (implicit return)
const formatPrice = price => '$' + price.toFixed(2);

All four produce identical output for identical input.

The this difference

Arrow functions do not have their own this. They inherit this from the surrounding context.

This distinction becomes relevant in Module 05 when working with DOM event callbacks. For now, the practical rule: use arrow functions for utility functions and callbacks; if you need this to refer to the object calling the method, use a regular function expression or declaration.

When to use which

Use arrow functions for	Use declarations/expressions for
Short utility functions	Top-level named functions
Callbacks (event listeners, array methods)	Functions that need hoisting
Inline logic (one-liners)	Methods that use this

Exercise

Rewrite isAvailable and formatPrice from Lesson 02 as arrow functions with implicit return:

const isAvailable = available => available === true;
const formatPrice = price => '$' + price.toFixed(2);

// Verify same output
console.log(isAvailable(true));    // true
console.log(isAvailable(false));   // false
console.log(formatPrice(149));     // '$149.00'
console.log(formatPrice(199));     // '$199.00'

Then write a multi-line arrow function formatTourSummary(name, price, available) that returns a full summary string using both helpers.

Recap

• Arrow functions use => instead of the function keyword: const fn = (params) => body.
• Implicit return: single-expression body with no curly braces — the expression value is returned automatically.
• Explicit return: multi-line body requires curly braces and return.
• Single-parameter arrows can omit parentheses. No-parameter arrows require ().
• Arrow functions do not have their own this — relevant in DOM and object contexts.
• Use arrows for utility functions, callbacks, and one-liners; use declarations for top-level named functions that need hoisting.