JavaScript Simplified · One concept, one day, one project · Day 22 of 32

Arrow Functions

The modern, shorter way to write a function. You rewrite familiar functions as arrows and build a price calculator.

By the end of today you can

Write a function as an arrow function
Read the short forms and know when each is used
Convert a normal function to an arrow and back
Build a price calculator

You know functions well. Modern JavaScript has a shorter way to write them, called the arrow function. It does the same job with less typing, and you will see it everywhere from tomorrow, when array methods take a function as input.

1. The Arrow Function

Definition

An arrow function is a shorter way to write a function, using => (an equals and a greater-than, called an arrow). You store it in a variable with const.

What this code doesThe two functions do exactly the same thing. () => { ... } is the arrow form. You call it the same way, with greet().

app.js

// the normal way
function greetOld() {
  console.log("Hello");
}

// the arrow way: same job
const greet = () => {
  console.log("Hello");
};

greetOld();
greet();

OUTPUT   TERMINAL

➜ webbo3 node app.js
Hello
Hello

2. Parameters and Short Returns

Arrow functions take parameters in the brackets, just like normal ones. And when the whole function just returns one value, there is an even shorter form: no braces, no return.

What this code doestriple has no braces and no return: when the body is a single expression, its value is returned automatically. You will see this short form constantly with array methods.

app.js

// with a parameter and a normal body
const double = (n) => {
  return n * 2;
};

// short form: one expression, returned automatically
const triple = (n) => n * 3;

console.log(double(5));
console.log(triple(5));

OUTPUT   TERMINAL

➜ webbo3 node app.js
10
15

Form	Looks like	When
Full	`(n) => { return n * 2; }`	several lines of work
Short return	`(n) => n * 2`	one expression to return
No parameter	`() => "Hi"`	no input needed

Today’s Mini Project

💰 Price Calculator

Build small pricing helpers as arrow functions: add tax, apply a discount, and work out a final price. Short, reusable, modern.

What this code doesThree arrow functions, each one line. Notice finalPrice reuses the other two. Small functions that call each other is clean, modern JavaScript.

app.js

const addTax = (price) => price * 1.075;         // 7.5% tax
const applyDiscount = (price, percent) => price - (price * percent / 100);
const finalPrice = (price, percent) => addTax(applyDiscount(price, percent));

console.log("With tax: " + addTax(1000));
console.log("With 10% off: " + applyDiscount(1000, 10));
console.log("Final (10% off, then tax): " + finalPrice(1000, 10));

OUTPUT   TERMINAL

➜ webbo3 node app.js
With tax: 1075
With 10% off: 900
Final (10% off, then tax): 967.5

Challenge (15 minutes)

Add an arrow function roundTo2(n) that returns Math.round(n * 100) / 100, and use it to round the final price. Expected: a tidy price with two decimals.

Try This

Rewrite your Day 9 add and multiply functions as short arrow functions.

Expected: const add = (a, b) => a + b; and the same for multiply, both working as before.

Picture This

The same functions you have written for weeks, now in a shorter, modern shape. This is not a new idea, just a cleaner way to write an old one, and it is the form the rest of the JavaScript world uses.

Checkpoint

What symbol makes an arrow function?

The arrow =>, an equals sign and a greater-than. You store the function in a variable, like const greet = () => { ... }.

When can you drop the braces and the return?

When the function body is a single expression. Then (n) => n * 2 returns n * 2 automatically, no braces or return needed.

Do arrow functions do anything a normal function cannot, for these cases?

For everyday use, no: they are a shorter way to write the same thing. They become especially handy with array methods, which you meet next.

Tick Before You Move On

☐ I can write a function as an arrow function
☐ I can use the short return form for a single expression
☐ I can convert a normal function to an arrow
☐ I built the Price Calculator

Quick Recap

An arrow function is a shorter way to write a function, using =>. Parameters go in the brackets, just like normal functions. A single-expression body returns automatically, with no braces or return. Arrow functions shine with the array methods you learn next.

Next: Day 23. Arrow functions really pay off now. You learn map, which transforms a whole array in one line.

Arrow Functions

1. The Arrow Function

Definition

2. Parameters and Short Returns

Today’s Mini Project

Checkpoint

Learn this with a real instructor