6.5 Arrow Function

The predicate we passed to find in the previous lesson works, but the syntax is verbose. ES6 brings arrow functions, a shorter way to write callbacks. Any time you want to pass a function as an argument to another function or method, arrow functions are usually the cleanest choice. 

// Before (function expression)
courses.find(function (course) {
  return course.name === "a";
});

// Step 1: remove the keyword 'function' and add =>
courses.find((course) => {
  return course.name === "a";
});

// Step 2: a single parameter → drop the parentheses
courses.find(course => {
  return course.name === "a";
});

// Step 3: a single return statement → drop {} and return
courses.find(course => course.name === "a");

The shortening rules

  • Replace function (params) with (params) =>.
  • If the function takes exactly one parameter, the parentheses around it become optional.
  • If the body is a single expression that is returned, the curly braces and the return keyword can both be dropped.
  • With zero parameters, you must keep the parentheses: () => ....

Arrow functions are everywhere in modern JavaScript: array methods like find, map, filter and reduce, event handlers, promises, you name it. They also change how this behaves, but that is a topic for a later lesson. See you in the next video, where we look at deleting elements from an array.

Summary

Arrow functions provide a concise syntax for writing JavaScript functions, especially useful for callback functions and method arguments. This lesson covers removing parentheses for single parameters, handling zero-parameter cases with empty parentheses, and condensing single-line functions with implicit returns. The arrow function syntax simplifies code readability and is particularly powerful for functional programming patterns.

Key points

  • Arrow functions use the => syntax to separate parameters from the function body, offering a shorter alternative to traditional function declarations
  • Single parameters can omit parentheses for cleaner code, but zero-parameter functions require empty parentheses ()
  • One-line functions that return a value can drop the braces and return keyword, condensing the entire function to a single line
  • Arrow functions are ideal for use as callback functions and arguments passed to other methods
  • The final arrow function syntax transforms verbose code into compact, readable expressions

FAQ

When can you omit parentheses around parameters in arrow functions?

You can omit parentheses only when your arrow function has exactly one parameter. If there are zero parameters or multiple parameters, parentheses are required.

How do you write a single-line arrow function with an implicit return?

Remove the curly braces and the return keyword. Write the expression directly after the arrow (=>). For example, a single parameter function that doubles a value becomes: x => x * 2

What was the advantage mentioned for using arrow functions in the lesson?

Arrow functions provide a shorter and simpler syntax compared to traditional function declarations, making code cleaner and more readable, especially when passing functions as callbacks to methods.