Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 3 · 1 / 7Arrow functions
Phase 3JavaScript for real apps
7 topics · 3–4 wks
  1. 1Arrow functions
  2. 2Destructuring and spread
  3. 3Modules and npm
  4. 4Events and handlers
  5. 5Promises and await
  6. 6Fetching real data
  7. 7Loading and error states
JourneyPhase 3Arrow functions
01 / 09Overview

Arrow functions

You'll learn to read and write arrow functions, and to know when they return a value for you.

Why it mattersReact code is full of arrows. Every map, every click handler and many components are written this way.
about 60 min·needs: Functions in, values out, Arrays and map
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Article
Arrow functions, the basicsjavascript.info · 10 min · English
MMamun's noteA short page. Read all of it, including "Multiline arrow functions", then try the task at the end.
Video
JavaScript ES6 arrow functions tutorialYouTube · Web Dev Simplified · 6 min · English
MMamun's noteWatch 0:22–5:50, where he turns normal functions into arrows step by step. The example after 5:50 is extra; watch it only if you have time.
VideoOptional
JavaScript Bangla tutorial #52: arrow functionsYouTube · Learn with Sumit · 12 min · Bangla
MMamun's noteIn Bangla, about 12 minutes. Sumit rewrites normal functions as arrows slowly. Watch it if the short forms still look strange.
DocsOptional
Arrow function expressionsMDN Web Docs · reference · English
MMamun's noteKeep it as a reference. The first examples are enough; the rest is about details you won't need yet.
03 / 09

Explanation

You already know functions. Now you want a shorter way to write the small ones, especially the ones you pass to map or to a button. That shorter way is called an arrow function.

Think of a shop price label. The long version says "Take the price. Add 60 taka delivery. Give back the total." The short version just says "price → price + 60". Same meaning, fewer words.

function withDelivery(price) {
  return price + 60;
}
const withDeliveryArrow = (price) => price + 60;

Both do the same job. Read the arrow one from left to right: the parameters in brackets, then =>, then the value to give back. With one parameter you may drop the brackets: price => price + 60. With no parameters you write empty brackets: () => "Hello".

Without { }, the value after => is returned for you. This is called an implicit return. Once you add { }, the arrow works like a normal function body, and you must write return yourself:

const withVat = (price) => {
  const vat = price * 0.15;
  return price + vat;
};

People often add { } to an arrow and forget return. Nothing crashes. The function just gives back undefined, and a map gives a list full of undefined. A second trap: to return an object without { } braces for the body, wrap it in brackets: (name) => ({ name: name }).

Arrows shine as callbacks, functions you hand to someone else to call later:

const marks = [45, 72, 88];
const withBonus = marks.map((mark) => mark + 5); // [50, 77, 93]

When you read an arrow, ask two things: what goes in (before =>), and is there a { }? If there is, look for the return.

Words to recognise
arrow function=>implicit returncallbackparameterreturn
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

script.js5 notes
function withDelivery(price) {
Mentor note · line 1
A normal function, as you already know it. It takes a price and returns the price plus delivery.
2 return price + 60;
3}
4
const withDeliveryArrow = (price) => price + 60;
const greet = () => "Welcome to the shop";
const withVat = (price) => {
8 const vat = price * 0.15;
9 return price + vat;
10};
11
12const prices = [100, 250, 400];
const totals = prices.map((price) => price + 60);
14// [160, 310, 460]
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1const addDelivery = (price) => { price + 60; };
2console.log(addDelivery(100));
What does this print?
DrillFind the bug2 / 2
withBonus should hold every mark plus 5, and half(10) should give 5. Both arrows forget something. Fix them so all checks pass.
1
2
3
4
5
Try 1 of 3 · solution unlocks after 3
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3What does const half = n => n / 2; give for half(8)?
  2. 2 / 3What does const total = (a, b) => { a + b; }; give for total(2, 3)?
  3. 3 / 3Which arrow takes no parameters and gives back "Hello"?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with Arrow functions?

09 / 09

Done

You can now
Read any arrow function and say what goes in and what comes back, with or without { }.
Next: Destructuring and spread Back to Phase 3
On this page
  1. 01Arrow functions
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 3JavaScript for real apps
7 topics · 3–4 wks
  1. 1Arrow functions
  2. 2Destructuring and spread
  3. 3Modules and npm
  4. 4Events and handlers
  5. 5Promises and await
  6. 6Fetching real data
  7. 7Loading and error states
JourneyPhase 3Arrow functions
01 / 09Overview

Arrow functions

You'll learn to read and write arrow functions, and to know when they return a value for you.

Why it mattersReact code is full of arrows. Every map, every click handler and many components are written this way.
about 60 min·needs: Functions in, values out, Arrays and map
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Article
Arrow functions, the basicsjavascript.info · 10 min · English
MMamun's noteA short page. Read all of it, including "Multiline arrow functions", then try the task at the end.
Video
JavaScript ES6 arrow functions tutorialYouTube · Web Dev Simplified · 6 min · English
MMamun's noteWatch 0:22–5:50, where he turns normal functions into arrows step by step. The example after 5:50 is extra; watch it only if you have time.
VideoOptional
JavaScript Bangla tutorial #52: arrow functionsYouTube · Learn with Sumit · 12 min · Bangla
MMamun's noteIn Bangla, about 12 minutes. Sumit rewrites normal functions as arrows slowly. Watch it if the short forms still look strange.
DocsOptional
Arrow function expressionsMDN Web Docs · reference · English
MMamun's noteKeep it as a reference. The first examples are enough; the rest is about details you won't need yet.
03 / 09

Explanation

You already know functions. Now you want a shorter way to write the small ones, especially the ones you pass to map or to a button. That shorter way is called an arrow function.

Think of a shop price label. The long version says "Take the price. Add 60 taka delivery. Give back the total." The short version just says "price → price + 60". Same meaning, fewer words.

function withDelivery(price) {
  return price + 60;
}
const withDeliveryArrow = (price) => price + 60;

Both do the same job. Read the arrow one from left to right: the parameters in brackets, then =>, then the value to give back. With one parameter you may drop the brackets: price => price + 60. With no parameters you write empty brackets: () => "Hello".

Without { }, the value after => is returned for you. This is called an implicit return. Once you add { }, the arrow works like a normal function body, and you must write return yourself:

const withVat = (price) => {
  const vat = price * 0.15;
  return price + vat;
};

People often add { } to an arrow and forget return. Nothing crashes. The function just gives back undefined, and a map gives a list full of undefined. A second trap: to return an object without { } braces for the body, wrap it in brackets: (name) => ({ name: name }).

Arrows shine as callbacks, functions you hand to someone else to call later:

const marks = [45, 72, 88];
const withBonus = marks.map((mark) => mark + 5); // [50, 77, 93]

When you read an arrow, ask two things: what goes in (before =>), and is there a { }? If there is, look for the return.

Words to recognise
arrow function=>implicit returncallbackparameterreturn
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

script.js5 notes
function withDelivery(price) {
Mentor note · line 1
A normal function, as you already know it. It takes a price and returns the price plus delivery.
2 return price + 60;
3}
4
const withDeliveryArrow = (price) => price + 60;
const greet = () => "Welcome to the shop";
const withVat = (price) => {
8 const vat = price * 0.15;
9 return price + vat;
10};
11
12const prices = [100, 250, 400];
const totals = prices.map((price) => price + 60);
14// [160, 310, 460]
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1const addDelivery = (price) => { price + 60; };
2console.log(addDelivery(100));
What does this print?
DrillFind the bug2 / 2
withBonus should hold every mark plus 5, and half(10) should give 5. Both arrows forget something. Fix them so all checks pass.
1
2
3
4
5
Try 1 of 3 · solution unlocks after 3
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3What does const half = n => n / 2; give for half(8)?
  2. 2 / 3What does const total = (a, b) => { a + b; }; give for total(2, 3)?
  3. 3 / 3Which arrow takes no parameters and gives back "Hello"?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with Arrow functions?

09 / 09

Done

You can now
Read any arrow function and say what goes in and what comes back, with or without { }.
Next: Destructuring and spread Back to Phase 3
On this page
  1. 01Arrow functions
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read

You already know functions. Now you want a shorter way to write the small ones, especially the ones you pass to map or to a button. That shorter way is called an arrow function.

Think of a shop price label. The long version says "Take the price. Add 60 taka delivery. Give back the total." The short version just says "price → price + 60". Same meaning, fewer words.

function withDelivery(price) {
  return price + 60;
}
const withDeliveryArrow = (price) => price + 60;

Both do the same job. Read the arrow one from left to right: the parameters in brackets, then =>, then the value to give back. With one parameter you may drop the brackets: price => price + 60. With no parameters you write empty brackets: () => "Hello".

Without { }, the value after => is returned for you. This is called an implicit return. Once you add { }, the arrow works like a normal function body, and you must write return yourself:

const withVat = (price) => {
  const vat = price * 0.15;
  return price + vat;
};

People often add { } to an arrow and forget return. Nothing crashes. The function just gives back undefined, and a map gives a list full of undefined. A second trap: to return an object without { } braces for the body, wrap it in brackets: (name) => ({ name: name }).

Arrows shine as callbacks, functions you hand to someone else to call later:

const marks = [45, 72, 88];
const withBonus = marks.map((mark) => mark + 5); // [50, 77, 93]

When you read an arrow, ask two things: what goes in (before =>), and is there a { }? If there is, look for the return.

Words to recognise
arrow function=>implicit returncallbackparameterreturn

You already know functions. Now you want a shorter way to write the small ones, especially the ones you pass to map or to a button. That shorter way is called an arrow function.

Think of a shop price label. The long version says "Take the price. Add 60 taka delivery. Give back the total." The short version just says "price → price + 60". Same meaning, fewer words.

function withDelivery(price) {
  return price + 60;
}
const withDeliveryArrow = (price) => price + 60;

Both do the same job. Read the arrow one from left to right: the parameters in brackets, then =>, then the value to give back. With one parameter you may drop the brackets: price => price + 60. With no parameters you write empty brackets: () => "Hello".

Without { }, the value after => is returned for you. This is called an implicit return. Once you add { }, the arrow works like a normal function body, and you must write return yourself:

const withVat = (price) => {
  const vat = price * 0.15;
  return price + vat;
};

People often add { } to an arrow and forget return. Nothing crashes. The function just gives back undefined, and a map gives a list full of undefined. A second trap: to return an object without { } braces for the body, wrap it in brackets: (name) => ({ name: name }).

Arrows shine as callbacks, functions you hand to someone else to call later:

const marks = [45, 72, 88];
const withBonus = marks.map((mark) => mark + 5); // [50, 77, 93]

When you read an arrow, ask two things: what goes in (before =>), and is there a { }? If there is, look for the return.

Words to recognise
arrow function=>implicit returncallbackparameterreturn