Loading...

JavaScript Return

Last lesson pushed values into a function. Real programs also need a value out — a total, a label, a yes/no answer — so the caller can keep working with the result. The keyword that sends that result back is return.

What return does

Inside the function body you write return expression;. JavaScript evaluates the expression, hands that value to the caller, and ends that call. The caller can store it: let total = add(3, 4); — here total becomes 7.

Return is not the same as logging

📊 return vs console.log

Idea What it does Who sees it
return value sends value to the caller your next line of code
console.log(value) prints value in the console a human watching the console
both you can log and also return log is for eyes; return is for the program
no return the call finishes with undefined storing the call gives undefined
after return later lines in that call are skipped early exit is intentional

Logging helps you peek. Returning lets the rest of the program use the answer. Beginners often log inside the function and wonder why let x = f() is undefined — because nothing was returned.

Return a number

javascript 
function add(a, b) {
return a + b;
}
let total = add(3, 4);
console.log(total);

Capture the result

add does not print by itself. It returns 7. The caller stores that in total, then logs. Change the arguments, keep the body — the returned sum follows the inputs.

Return a string

javascript 
function greet(name) {
return "Hello, " + name;
}
let line = greet("Sara");
console.log(line);

Build a value for later

greet builds a string and hands it back. line holds Hello, Sara. You could pass line into the page, into another function, or into a test — the return unlocked reuse outside the body.

Return stops the function

javascript 
function demo() {
console.log("first");
return 1;
console.log("second");
}
demo();

Nothing after return runs

This call prints first, then returns 1. The line that would print second never runs. That is not a bug — return ends the call immediately.

Early return

javascript 
function label(score) {
if (score < 0) {
return "invalid";
}
return "ok";
}
console.log(label(-1));
console.log(label(10));

Leave early when the answer is ready

If score is negative, the function returns "invalid" and skips the rest. Otherwise it returns "ok". This early return keeps the happy path short and readable.

No return means undefined

javascript 
function shout(msg) {
console.log(msg);
}
let result = shout("hi");
console.log(result);

Forgot to return?

shout only logs. The call still finishes, but with undefined. Storing that call puts undefined in result. If you need a value outside, write an explicit return.

Put a returned value on the page

Build the message with return, then write that string into a paragraph. The function stays focused on producing text; the page code decides where it appears.

Show return on the page

Declare a function that returns a welcome string, call it, and put the result into a paragraph.

Page call with a return value

html 
<!DOCTYPE html>
<html>
<head>
<title>return — page</title>
</head>
<body>
<p id="msg">…</p>
<script>
function welcome(guest) {
return "Hello, " + guest;
}
let box = document.getElementById("msg");
box.textContent = welcome("Omar");
</script>
</body>
</html>

The page shows Hello, Omar. welcome returned the string; the next line wrote it into the paragraph. Change only the argument, refresh, and read the new line. Next lesson covers arrow functions — a shorter way to write some of these functions.

Try it yourself

  1. Write function sum(x, y) that returns x + y, store the call in a variable, and log that variable.
  2. Write function hi(name) that returns "hi " plus name, then log the returned string.
  3. Put a console.log after a return inside a function; confirm that line never prints.
  4. Write a guard: if n === 0 return "zero", else return "nonzero".
  5. Call a function that only console.logs and store the call; confirm you get undefined.
  6. In the HTML demo, change only the argument string, refresh, and read the paragraph.

Common mistakes

  • Using only console.log inside the function and expecting let x = f() to hold a useful value
  • Forgetting to store or use the returned value at the call site
  • Writing code after return and wondering why it never runs
  • Writing bare return; when you meant return value;
  • Looking for parameter tricks here — this page is about outputs; inputs were the previous lesson

Summary

  • return sends a value out to the caller
  • Store or use that value outside the function
  • After return, the rest of that call is skipped
  • Early return is a clean way to exit on special cases
  • No return (or bare return) → the call yields undefined
  • Page updates can use a returned string
  • Next: arrow functions — a compact function syntax

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 29 of 31
Javascript Tutorial