JavaScript Return Values

In the previous lesson, we learned how to pass values into a function with parameters. Now let’s learn how a function sends a value back out using return values.

📦 What is a Return Value?

A return value is the result a function hands back to the code that called it. We use the return keyword to send that value out, and then we can store it, print it, or use it in more math.

function add(a, b) {
  return a + b;
}

const sum = add(5, 2);
console.log(sum); // 7

Let’s walk through what each line does:

• function add(a, b) defines a function that takes two values, a and b.
• return a + b; calculates the sum and sends that result back to the caller.
• const sum = add(5, 2); calls add with 5 and 2 and catches the returned 7 in sum.
• console.log(sum); prints the stored value, 7.

🖨️ Returning vs Printing

A function that returns a value gives you something you can keep and reuse. A function that only prints with console.log shows text on the screen but hands nothing back, so there is nothing to store.

// ✅ Returns a value we can use later
function double(n) {
  return n * 2;
}

const result = double(4);
console.log(result + 1); // 9

// ❌ Only prints, returns nothing
function doublePrint(n) {
  console.log(n * 2);
}

const nothing = doublePrint(4); // prints 8
console.log(nothing); // undefined

Let’s compare the two functions line by line:

• return n * 2; in double hands back the doubled value, so result holds 8.
• console.log(result + 1); uses that stored 8 to print 9.
• console.log(n * 2); in doublePrint only prints; the function never returns a value.
• const nothing = doublePrint(4); prints 8, but nothing ends up holding undefined because nothing was returned.

💾 Storing a Returned Value

When a function returns a value, we usually store it in a variable so we can use it more than once.

function getPrice() {
  return 100;
}

const price = getPrice();
console.log(price); // 100
console.log(price * 2); // 200

Let’s see how storing the result lets us reuse it:

• return 100; sends back the number 100 whenever getPrice is called.
• const price = getPrice(); calls the function once and saves the result in price.
• console.log(price); and console.log(price * 2); both read price without calling the function again, printing 100 and 200.

🛑 Return Ends the Function

As soon as JavaScript reaches a return, the function stops. Any code written after the return never runs.

function greet(name) {
  return "Hello, " + name;
  console.log("This line never runs"); // ❌ unreachable
}

console.log(greet("Alex")); // Hello, Alex

Let’s trace how return cuts the function short:

• return "Hello, " + name; builds the greeting and exits the function right away.
• console.log("This line never runs"); sits after the return, so it is unreachable and never executes.
• console.log(greet("Alex")); prints the returned greeting, Hello, Alex.

❓ No Return Means undefined

If a function does not have a return statement, it still gives back a value: undefined. This is JavaScript’s way of saying “nothing useful came back.”

function sayHi() {
  console.log("Hi!");
}

const value = sayHi(); // prints "Hi!"
console.log(value); // undefined

Let’s look at what happens when there is no return:

• console.log("Hi!"); is the only thing sayHi does, so the function prints but returns nothing.
• const value = sayHi(); runs the print and stores the missing return value, which is undefined.
• console.log(value); confirms that value holds undefined.

🧾 A Practical Example

Let’s calculate the total cost of an order and then use that result to apply a discount.

function calculateTotal(price, quantity) {
  return price * quantity;
}

const total = calculateTotal(20, 3);
console.log(total); // 60

const discounted = total - 10;
console.log(discounted); // 50

Let’s follow the order from total to discount:

• return price * quantity; multiplies the two arguments and hands back the result.
• const total = calculateTotal(20, 3); stores the returned 60 in total.
• const discounted = total - 10; builds on that stored value to subtract the discount, giving 50.
• The two console.log lines print 60 and 50.

⚠️ Common Mistakes to Avoid

🔧 Try It Yourself!

🧩 What You’ve Learned

• ✅ The return keyword sends a value back so the rest of your code can use it
• ✅ Returning gives you a value to store; printing with console.log only shows text
• ✅ We store a returned value in a variable to reuse it
• ✅ return ends the function immediately, so code after it never runs
• ✅ A function with no return gives back undefined

🚀 What’s Next?

Now that we can send values back from functions, let’s learn another way to create them. Let’s continue to Function Expressions.