What is return and a return value — and why console.log returns nothing

You write a function that adds up a shopping cart. You run it — the console neatly prints 1500. You put the result into a variable — and it holds undefined.

But the function did the math! You saw the number yourself. Yes, you did. But the function showed it, it didn't hand it back. Those are two different things, and one word marks the difference — return.

What a return value is

A function is a little machine. You put something in (those are parameters), it works, and it produces a result. That result is the return value. And return is the command "here's the answer, take it."

function double(n) {
  return n * 2
}

const result = double(21)   // result holds 42

Picture pneumatic tube mail in an old bank. You put a note in a capsule and send it upstairs. A minute later the capsule flies back — with an answer. return is that return trip. No return — the capsule never comes back. Your palm stays empty.

Why console.log isn't return

Now the trap itself:

function total(prices) {
  let sum = 0
  for (const p of prices) sum += p
  console.log(sum)   // prints 1500
}

const t = total([500, 1000])   // t === undefined

console.log puts the value on the screen, for you. As if the answer were read out over a loudspeaker. You heard it — but the capsule never came back, and the code has nothing to put in the variable.

If a function ends without return, JavaScript fills in undefined by itself — "nothing was returned." The fix is one line:

  return sum

A check for the future: if the value shows up in the console but the variable is undefined, first look for a return in the function itself. A similar story happens with server requests — we covered it in why fetch returns undefined.

return also stops the function

The second superpower of return that people forget: after it, the function ends immediately. Nothing below it runs.

function checkAge(age) {
  if (age < 18) {
    return "Too early"
  }
  return "Welcome"
}

If the age is under 18, the function hands back "Too early" and exits. It never reaches the second return. That's handy: AI-written code often starts with these "early exits" — cut off the bad cases first, then calmly handle the good one.

The flip side: code accidentally left after a return will never run. If you added something to a function and it "doesn't execute," check for a return above it.

Three places return gets lost most often

1. An arrow function with curly braces.

const double = n => n * 2        // returns on its own
const double2 = n => { n * 2 }   // returns undefined!

Without braces, an arrow returns its result automatically. With braces — only if you write return explicitly.

2. return inside forEach. It returns from the small inner function, not from your big one. The loop won't stop, and nothing gets out. How forEach differs from map and a plain loop is covered in loop or map.

3. return inside a callback. If a function delivers its result through a callback or waits for a server, a plain return outside hands back emptiness — the answer hasn't arrived yet.

A trick: read someone else's function by its returns

Here's a skill you'll use every day. An AI handed you a forty-line function, and it's unclear what it does. Don't read top to bottom. Find every return — and you instantly see what the function can answer.

• One return at the end — the function computes and hands back one result.
• Several returns at the top — those are checks: "if something's wrong, bail out."
• No return at all — the function hands nothing back; it just does something: draws, saves, sends.

In five seconds you know the shape of the answer. Reading the middle gets easier: you know where it's heading.

Where you'll meet return

In every other file. Functions that calculate, format a date, validate a form — they all hand back their result with return. In React a component returns too — a piece of the interface:

function Hello() {
  return <h1>Hi!</h1>
}

Forget return in a component — the screen is blank, and there's no error.

Can a function return two values at once?

Not directly — return hands back one value. But that value can be an array or an object: return { sum, count }. That's how you pack as many answers as you want into one capsule.

Does every function need a return?

No. If a function just does something — opens a window, saves a file — it doesn't need to answer. You need return when the result goes further into the code.

What does an empty return give back?

A bare return line just stops the function and returns undefined. It's used for early exits when the answer doesn't matter.