Lesson guide

Learning objectives

  • Explain the main purpose of Arrow functions, the basics in JavaScript.
  • Identify the syntax, APIs, or concepts introduced in this lesson.
  • Use the examples to predict how JavaScript will behave before you run similar code.
  • Connect this topic to nearby lessons in JavaScript Fundamentals.

Real-world context

This lesson matters when you need to recognize where Arrow functions, the basics fits into real JavaScript programs. There’s another very simple and concise syntax for creating functions, that’s often better than Function Expressions.

Key ideas

  • Arrow functions, the basics is part of the JavaScript Fundamentals chapter, so it builds on the surrounding concepts rather than standing alone.
  • Read each code example in two passes: first for the result, then for the rule that explains the result.
  • When a section compares similar features, focus on the condition that makes you choose one feature over another.

Key terms

  • Arrow functions, the basics
  • Arrow
  • functions
  • basics
  • JavaScript Fundamentals

There’s another very simple and concise syntax for creating functions, that’s often better than Function Expressions.

It’s called “arrow functions”, because it looks like this:

javascript
let func = (arg1, arg2, ..., argN) => expression;

This creates a function func that accepts arguments arg1..argN, then evaluates the expression on the right side with their use and returns its result.

In other words, it’s the shorter version of:

javascript
let func = function(arg1, arg2, ..., argN) {
  return expression;
};

Let’s see a concrete example:

javascript
let sum = (a, b) => a + b;

/* This arrow function is a shorter form of:

let sum = function(a, b) {
  return a + b;
};
*/

alert( sum(1, 2) );

As you can see, (a, b) => a + b means a function that accepts two arguments named a and b. Upon the execution, it evaluates the expression a + b and returns the result.

  • If we have only one argument, then parentheses around parameters can be omitted, making that even shorter.

For example:

javascript
let double = n => n * 2;
// roughly the same as: let double = function(n) { return n * 2 }

alert( double(3) ); // 6
  • If there are no arguments, parentheses are empty, but they must be present:
javascript
let sayHi = () => alert("Hello!");

sayHi();

Arrow functions can be used in the same way as Function Expressions.

For instance, to dynamically create a function:

javascript
let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?
  () => alert('Hello!') :
  () => alert("Greetings!");

welcome();

Arrow functions may appear unfamiliar and not very readable at first, but that quickly changes as the eyes get used to the structure.

They are very convenient for simple one-line actions, when we’re just too lazy to write many words.

Multiline arrow functions

The arrow functions that we’ve seen so far were very simple. They took arguments from the left of =>, evaluated and returned the right-side expression with them.

Sometimes we need a more complex function, with multiple expressions and statements. In that case, we can enclose them in curly braces. The major difference is that curly braces require a return within them to return a value (just like a regular function does).

Like this:

javascript
let sum = (a, b) => {  // the curly brace opens a multiline function
  let result = a + b;
  return result; // if we use curly braces, then we need an explicit "return"
};

alert( sum(1, 2) ); // 3

More to come

Here we praised arrow functions for brevity. But that’s not all!

Arrow functions have other interesting features.

To study them in-depth, we first need to get to know some other aspects of JavaScript, so we’ll return to arrow functions later in the chapter Arrow functions revisited.

For now, we can already use arrow functions for one-line actions and callbacks.

Common mistakes

  • Skipping the small examples and then missing the exact rule that Arrow functions, the basics depends on.
  • Copying code without changing one value at a time to see which part controls the result.
  • Treating similar-looking syntax or APIs as interchangeable before checking their edge cases.

Summary

Arrow functions are handy for simple actions, especially for one-liners. They come in two flavors:

  1. Without curly braces: (...args) => expression – the right side is an expression: the function evaluates it and returns the result. Parentheses can be omitted, if there’s only a single argument, e.g. n => n*2.
  2. With curly braces: (...args) => { body } – brackets allow us to write multiple statements inside the function, but we need an explicit return to return something.

Predict

Before running this check, predict the three lines. One arrow returns an expression automatically, one multiline arrow uses return, and one multiline arrow forgets it.

javascript
Reveal explanation

The output is 8, then 5, then undefined. The one-line arrow n => n * 2 returns the expression automatically. The multiline sum arrow uses braces, so it needs the explicit return result. missingReturn also uses braces but has no return, so the expression a + b is evaluated and discarded, and the function result is undefined.

Try it

Rewrite missingReturn as const missingReturn = (a, b) => a + b; and predict the third line. Then change double to accept two parameters, which forces you to add parentheses around them.

Practice

  • Rewrite one example from this lesson without looking at the original, then run it and compare the result.
  • Change one input, operator, method call, or option in a code sample and predict what will happen before running it.
  • Explain Arrow functions, the basics in your own words as if you were reviewing it with another learner.

Keep learning

Continue with JavaScript specials when you are ready for the next lesson.