JavaScript Arrow Function Typing Drills

Arrow functions put several easy-to-miss characters close together: parentheses, commas, =, >, and sometimes braces. The examples below are typing drills, so the goal is to copy the complete expression accurately and then understand what each symbol does. For the language rules, see MDN's arrow function reference.

Drill 1: Parameters and the arrow

const add = (a, b) => a + b;
const double = value => value * 2;
const ready = () => true;

Type the first line slowly, pausing at , and =>. Then compare it with the next two lines. A single simple parameter may omit parentheses; an empty or multi-parameter list needs them. Keep the spaces around the arrow consistent while you practice.

Drill 2: A block body

const formatName = (first, last) => {
    const fullName = `${first} ${last}`;
    return fullName.trim();
};

Here the braces mark a block body. Unlike the expression in the first drill, this version uses an explicit return. Copy the braces, backticks, dollar signs, and semicolons as a group; then check that the closing }; is present. Your editor may insert the closing brace for you, so watch for duplicates.

Drill 3: Return an object literal

const summarize = (name, score) => ({
    name,
    score,
});

The parentheses around the object matter. Without them, JavaScript treats the opening { after => as a block body rather than the start of an object expression, as MDN explains. Type this once from the example, then try it again without looking and compare every bracket and comma.

Move from drills to code samples

Choose JavaScript in the TypeNCode code typing test to practice with longer snippets. Its samples are separate from these exact drills. You can also browse typing lessons for guided exercises; the keyboard track includes an arrow-function exercise. If brackets or quotes are your main source of errors, use the code symbol typing guide before increasing speed.