Arrow functions

A big coffee machine has a dozen buttons and a settings menu. A capsule machine has one button, and the coffee is the same. For a plain espresso the capsule machine is handier: fewer moves.

Functions are like that too. A function expression that only adds two numbers takes three lines. The same function can be written in one line, without the word function, the braces and return:

const add = function (a, b) {
    return a + b;
};

const addArrow = (a, b) => a + b;

console.log(add(2, 3)); // 5
console.log(addArrow(2, 3)); // 5

Let's compare the two forms:

1. add is a function expression from the earlier lessons: function, the parameters, a body in braces and return.
2. addArrow is the same function in one line: the parameters, the arrow => and the sum.
3. Both calls print 5: the functions do the same thing.

Writing with an arrow

An arrow function is a function expression written with =>. An expression is code that has a value, as in theme 3: a + b, 42, the call square(5).

Let's take (a, b) => a + b apart:

• to the left of => stand the parameters in parentheses;
• to the right of => stands the function body;
• if the body is one expression without braces, its value becomes the result, and no return is written.

The expression can also be a condition with ? :: const sign = (n) => n < 0 ? -1 : 1;. This function returns -1 for a negative number and 1 for the rest.

Parentheses around parameters

The parentheses around the parameters are not always needed. Let's look at two cases.

One parameter

The parentheses around a single parameter can be left out: x => x * x and (x) => x * x are the same function. A parameter with a default value always needs them: (x = 1) => x * 2.

No parameters or several

If there are no parameters or several, the parentheses are required; a function without parameters has empty ones: ().

const square = x => x * x;
const answer = () => 42;

console.log(square(5), answer()); // 25 42

Here square(5) returns 25, and answer() with no arguments returns 42.

Where an arrow function is handy

An arrow function, like a function expression, is stored in a constant and called by its name. It cannot be called above the line with const either: only function declarations are hoisted whole.

The arrow form suits short functions of one expression. A long function with several statements is more often written as a declaration. Here the capsule-machine picture stops working: the short form does not limit an arrow function to one expression. A body in braces holds several statements.

In the course exercises, a function may be written in any form: a declaration, an expression or an arrow function. Keep the name from the starter code: the checks call the function by that name.

A body in braces

The statements if, for and variable declarations are not expressions. When the body needs them, it is put in braces. Then an arrow function works like an ordinary one: only return gives back a result.

const clamp = (n, max) => {
    if (n > max) {
        return max;
    }
    return n;
};

console.log(clamp(15, 10), clamp(3, 10)); // 10 3

Let's walk through both calls:

1. clamp(15, 10): 15 is greater than 10, so return max runs and the function returns 10.
2. clamp(3, 10): the condition is false, and the function reaches return n, so it returns 3.

The body of clamp contains if, so it cannot be written without braces and return.

Common mistake

The body is put in braces, but return is not written:

const half = (x) => {
    x / 2; // ✗
};

console.log(half(10));

The program prints undefined, and there is no error: JavaScript reads the braces after => as the function body. The expression x / 2 is computed, but its value goes nowhere, and a call without return returns undefined. Add return x / 2; or remove the braces: const half = (x) => x / 2;.

An ordinary function without return behaves the same. With an arrow function the mistake is harder to spot: the one-expression form gets you used to writing no return. That is why interviewers like to ask what such a function prints.

Key points

• An arrow function is a function expression with =>: (a, b) => a + b.
• A body of one expression without braces returns its value without return.
• The parentheses can be left out only around a single parameter without a default value.
• A body in braces returns a value only through return; otherwise the call gives undefined.