Arrow Functions

Arrow functions look like JavaScript got impatient: fewer words, same job. An arrow function is a function expression written with =>, usually stored in a const, and it becomes the shape you'll see everywhere once functions start getting passed around.

The syntax ladder

Start with the function expression shape from the last lesson:

const addBonus = function (score, bonus) {
  return score + bonus;
};
 
console.log(addBonus(18, 4));

→ 22

Now remove the word function and put => between the parameter list and the body:

const addBonusArrow = (score, bonus) => {
  return score + bonus;
};
 
console.log(addBonusArrow(18, 4));

→ 22 — same parameters, same return value, shorter recipe card.

That => is often read as "goes to." The parameters go in; the body runs; a value may come back. An arrow function is still a function value, so the usual rule from 5.1 still applies: addBonusArrow refers to the function, and addBonusArrow(18, 4) calls it.

Also notice the const. Arrow functions are expressions, not declarations, so you usually give them a name with const before calling them.

Expression bodies return automatically

An expression body is a no-braces arrow body that contains one expression, and it returns that expression automatically:

const addBonus = (score, bonus) => score + bonus;
const formatScore = (playerName, score) => `${playerName}: ${score} points`;
 
console.log(addBonus(18, 4));
console.log(formatScore("Mina", 22));

→ 22, then Mina: 22 points.

That automatic hand-back is an implicit return, a return you get without writing the return keyword. Read the arrow as pointing straight at the value that comes back.

A block body is a braces body with statements inside it. The moment you add {} braces, you are back to steps, so return is required:

const missingReturn = (score, bonus) => {
  score + bonus;
};
 
console.log(missingReturn(18, 4));

→ undefined — the expression ran, but the function did not hand its value back.

So the rule is small and sharp:

• No braces: one expression comes back automatically.
• Braces: write return yourself.

Try it — shorten the helpers

Run this, then change one helper from block body to expression body. Keep the results the same.

At the › prompt, try addTip(900, 150) and makeMoodLine("ready"). The helper names refer to function values; the parentheses call them.

Single-parameter sugar

With exactly one parameter name, arrow functions let you drop the parentheses:

const shoutMood = mood => mood.toUpperCase();
const startRound = () => "Round starts now.";
const addScores = (baseScore, bonus) => baseScore + bonus;
 
console.log(shoutMood("ready"));
console.log(startRound());
console.log(addScores(20, 5));

→ READY, then Round starts now., then 25.

Syntactic sugar is shorter syntax that changes no behavior. The single-parameter version is just sugar:

• One parameter name: mood => mood.toUpperCase()
• Zero parameters: () => "Round starts now."
• Two or more parameters: (baseScore, bonus) => baseScore + bonus

When you are new, parentheses are always allowed around one parameter: (mood) => mood.toUpperCase(). Use the shorter version when it reads clearly.

When not to use an arrow

An object is a value that groups named pieces, and a method is a function stored on an object and called through that object. Full objects come in Section 7, but you need one preview now because arrows behave differently with this, a special name whose value depends on how a function is called.

Arrow functions are excellent for small function values. They are not the right default for object methods:

const lockerRoom = {
  playerName: "Coach",
  makeCard: function () {
    return {
      playerName: "Mina",
      regularLabel: function () {
        return `${this.playerName} is ready.`;
      },
      arrowLabel: () => `${this.playerName} is ready.`,
    };
  },
};
 
const playerCard = lockerRoom.makeCard();
 
console.log(playerCard.regularLabel());
console.log(playerCard.arrowLabel());

→ Mina is ready., then Coach is ready.

That second line is the warning. Arrows do not create their own this; they reuse this from the place where they were created. Here, the arrow was created inside lockerRoom.makeCard(), so it does not get playerCard as this when you call playerCard.arrowLabel().

You do not need the full this story yet. The practical rule is enough: use arrows for small function values and short transformations; avoid arrows for object methods until lesson 7.3 explains method calls properly. Lesson 10.3 comes back for the deeper this rules.

Arrows changed the spelling, not the core idea: parameters go in, a function body runs, and a value may come back. Next, you'll make parameters more flexible with fallback values, extra arguments, spread-out calls, and option objects.