Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 2 · 5 / 12Functions in, values out
Phase 2JavaScript core
12 topics · 4–6 wks
  1. 1Values and variables
  2. 2Strings and numbers
  3. 3Making decisions with if
  4. 4Loops
  5. 5Functions in, values out
  6. 6Arrays
  7. 7Objects
  8. 8Arrays and map
  9. 9filter and find
  10. 10reduceoptional
  11. 11Scope
  12. 12Reading error messages
JourneyPhase 2Functions in, values out
01 / 09Overview

Functions in, values out

You'll learn to write functions that take values in and give a value back with return.

Why it mattersEvery React component is a function, and almost every line of an app runs inside one.
about 90 min·needs: Values and variables, Making decisions with if, Loops
02 / 09

Watch & read

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

Article
Functionsjavascript.info · 20 min · English
MMamun's noteRead up to and including "Returning a value", and go slowly there. "Outer variables" also comes back in the scope topic.
Video
Modern JavaScript Tutorial #4: FunctionsYouTube · Net Ninja · 14 min · English
MMamun's noteWatch 8:55–22:14, on parameters, returning values and arrow functions. You can skip the rest.
ArticleOptional
Arrow functions, the basicsjavascript.info · 8 min · English
MMamun's noteA short page on the => way of writing functions. Read it once; you'll see this style all the time in React.
VideoOptional
JavaScript Bangla tutorial #12: functionYouTube · Learn with Sumit · 29 min · Bangla
MMamun's noteIn Bangla. Sumit explains what a function is and why it exists, step by step. Good if return still feels unclear.
03 / 09

Explanation

You want to work out the same thing many times: a price plus delivery, for each order. Instead of writing the sum again and again, you give the steps a name once, and use that name whenever you need it. A named set of steps is called a function.

Think of a tea stall. You hand over money and a cup size, and you get tea back. What you hand over goes in; one thing comes out.

function withDelivery(price) {
  return price + 60;
}
const total = withDelivery(200); // 260

price is a parameter: the name the function uses for the value it receives. 200 is the argument: the real value you pass when you call the function. return sends a value back to the caller, and the function stops right there.

return and console.log are not the same. console.log only prints for you to see. return gives the value back so the rest of your code can use it. People often write console.log inside a function and then wonder why const total = ... is undefined. A function with no return gives back undefined.

You'll also see a shorter way to write a function, called an arrow function:

const withDelivery = (price) => price + 60;

It does the same job. With no { }, the value after => is returned for you. With { }, you must write return yourself.

When you read a function, find three things: what goes in (the parameters), what it does, and what it returns.

Words to recognise
functionparameterargumentreturncallundefined=>arrow function
04 / 09

Code tour

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

script.js6 notes
function withDelivery(price) {
Mentor note · line 1
function, then a name, then the parameters in brackets. price is a label for whatever value is passed in.
return price + 60;
3}
4
const total = withDelivery(200);
6console.log(total); // 260
7
8function showDelivery(price) {
console.log(price + 60);
10}
11const shown = showDelivery(200); // prints 260
console.log(shown); // undefined
13
const withDeliveryArrow = (price) => price + 60;
05 / 09

Practice

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

DrillPredict1 / 2
1function double(n) {
2  console.log(n * 2);
3}
4const result = double(5);
5console.log(result);
What does this print?
DrillFind the bug2 / 2
withDelivery should give back the price plus 60 taka delivery, so other code can use the result. Fix it so all three checks pass.
1
2
3
Try 1 of 3 · solution unlocks after 3
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3In function greet(name) { ... } and greet("Nusrat"), which is the argument?
  2. 2 / 3What is result after function add(a, b) { console.log(a + b); } and const result = add(2, 3);?
  3. 3 / 3What does const half = (n) => n / 2; give for half(10)?
07 / 09

Explain it back

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

How confident are you with Functions in, values out?

09 / 09

Done

You can now
Read a function call and say what value comes back, and tell return apart from console.log.
Next: Arrays Back to Phase 2
On this page
  1. 01Functions in, values out
  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 2JavaScript core
12 topics · 4–6 wks
  1. 1Values and variables
  2. 2Strings and numbers
  3. 3Making decisions with if
  4. 4Loops
  5. 5Functions in, values out
  6. 6Arrays
  7. 7Objects
  8. 8Arrays and map
  9. 9filter and find
  10. 10reduceoptional
  11. 11Scope
  12. 12Reading error messages
JourneyPhase 2Functions in, values out
01 / 09Overview

Functions in, values out

You'll learn to write functions that take values in and give a value back with return.

Why it mattersEvery React component is a function, and almost every line of an app runs inside one.
about 90 min·needs: Values and variables, Making decisions with if, Loops
02 / 09

Watch & read

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

Article
Functionsjavascript.info · 20 min · English
MMamun's noteRead up to and including "Returning a value", and go slowly there. "Outer variables" also comes back in the scope topic.
Video
Modern JavaScript Tutorial #4: FunctionsYouTube · Net Ninja · 14 min · English
MMamun's noteWatch 8:55–22:14, on parameters, returning values and arrow functions. You can skip the rest.
ArticleOptional
Arrow functions, the basicsjavascript.info · 8 min · English
MMamun's noteA short page on the => way of writing functions. Read it once; you'll see this style all the time in React.
VideoOptional
JavaScript Bangla tutorial #12: functionYouTube · Learn with Sumit · 29 min · Bangla
MMamun's noteIn Bangla. Sumit explains what a function is and why it exists, step by step. Good if return still feels unclear.
03 / 09

Explanation

You want to work out the same thing many times: a price plus delivery, for each order. Instead of writing the sum again and again, you give the steps a name once, and use that name whenever you need it. A named set of steps is called a function.

Think of a tea stall. You hand over money and a cup size, and you get tea back. What you hand over goes in; one thing comes out.

function withDelivery(price) {
  return price + 60;
}
const total = withDelivery(200); // 260

price is a parameter: the name the function uses for the value it receives. 200 is the argument: the real value you pass when you call the function. return sends a value back to the caller, and the function stops right there.

return and console.log are not the same. console.log only prints for you to see. return gives the value back so the rest of your code can use it. People often write console.log inside a function and then wonder why const total = ... is undefined. A function with no return gives back undefined.

You'll also see a shorter way to write a function, called an arrow function:

const withDelivery = (price) => price + 60;

It does the same job. With no { }, the value after => is returned for you. With { }, you must write return yourself.

When you read a function, find three things: what goes in (the parameters), what it does, and what it returns.

Words to recognise
functionparameterargumentreturncallundefined=>arrow function
04 / 09

Code tour

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

script.js6 notes
function withDelivery(price) {
Mentor note · line 1
function, then a name, then the parameters in brackets. price is a label for whatever value is passed in.
return price + 60;
3}
4
const total = withDelivery(200);
6console.log(total); // 260
7
8function showDelivery(price) {
console.log(price + 60);
10}
11const shown = showDelivery(200); // prints 260
console.log(shown); // undefined
13
const withDeliveryArrow = (price) => price + 60;
05 / 09

Practice

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

DrillPredict1 / 2
1function double(n) {
2  console.log(n * 2);
3}
4const result = double(5);
5console.log(result);
What does this print?
DrillFind the bug2 / 2
withDelivery should give back the price plus 60 taka delivery, so other code can use the result. Fix it so all three checks pass.
1
2
3
Try 1 of 3 · solution unlocks after 3
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3In function greet(name) { ... } and greet("Nusrat"), which is the argument?
  2. 2 / 3What is result after function add(a, b) { console.log(a + b); } and const result = add(2, 3);?
  3. 3 / 3What does const half = (n) => n / 2; give for half(10)?
07 / 09

Explain it back

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

How confident are you with Functions in, values out?

09 / 09

Done

You can now
Read a function call and say what value comes back, and tell return apart from console.log.
Next: Arrays Back to Phase 2
On this page
  1. 01Functions in, values out
  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 want to work out the same thing many times: a price plus delivery, for each order. Instead of writing the sum again and again, you give the steps a name once, and use that name whenever you need it. A named set of steps is called a function.

Think of a tea stall. You hand over money and a cup size, and you get tea back. What you hand over goes in; one thing comes out.

function withDelivery(price) {
  return price + 60;
}
const total = withDelivery(200); // 260

price is a parameter: the name the function uses for the value it receives. 200 is the argument: the real value you pass when you call the function. return sends a value back to the caller, and the function stops right there.

return and console.log are not the same. console.log only prints for you to see. return gives the value back so the rest of your code can use it. People often write console.log inside a function and then wonder why const total = ... is undefined. A function with no return gives back undefined.

You'll also see a shorter way to write a function, called an arrow function:

const withDelivery = (price) => price + 60;

It does the same job. With no { }, the value after => is returned for you. With { }, you must write return yourself.

When you read a function, find three things: what goes in (the parameters), what it does, and what it returns.

Words to recognise
functionparameterargumentreturncallundefined=>arrow function

You want to work out the same thing many times: a price plus delivery, for each order. Instead of writing the sum again and again, you give the steps a name once, and use that name whenever you need it. A named set of steps is called a function.

Think of a tea stall. You hand over money and a cup size, and you get tea back. What you hand over goes in; one thing comes out.

function withDelivery(price) {
  return price + 60;
}
const total = withDelivery(200); // 260

price is a parameter: the name the function uses for the value it receives. 200 is the argument: the real value you pass when you call the function. return sends a value back to the caller, and the function stops right there.

return and console.log are not the same. console.log only prints for you to see. return gives the value back so the rest of your code can use it. People often write console.log inside a function and then wonder why const total = ... is undefined. A function with no return gives back undefined.

You'll also see a shorter way to write a function, called an arrow function:

const withDelivery = (price) => price + 60;

It does the same job. With no { }, the value after => is returned for you. With { }, you must write return yourself.

When you read a function, find three things: what goes in (the parameters), what it does, and what it returns.

Words to recognise
functionparameterargumentreturncallundefined=>arrow function