JavaScript - 13

JavaScript - 13: Functions with Return Values

Functions can do more than print information. They can also calculate a value and send that value back to the part of your program that called them.

JavaScript does this with the return keyword.

Your challenge: Create one function that adds two numbers and another that multiplies two numbers. Each function should return its result so you can use that result elsewhere.

What does return do?

In an earlier lesson, you created functions that used console.log() inside the function.

That displays information, but it does not give a value back to the rest of your program.

The return keyword sends a value back from a function.

For example: return a + b;

This tells JavaScript to calculate a + b and make that result the value produced by the function.

A function can produce a value

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

If you call: add(5, 7)

JavaScript substitutes the arguments into the parameters:

a becomes 5
b becomes 7

Then the function calculates: 5 + 7

and returns: 12

Print a returned value

Because the function produces a value, you can pass the function call directly to console.log().

For example: console.log(add(5, 7));

The function runs first, returns 12, and then console.log() prints that result.

Returning is different from logging

These two functions do different things:

function showSum(a, b) { console.log(a + b); }

and:

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

The first function displays the answer immediately.

The second function gives the answer back so your program can decide what to do with it.

That makes returned values much more reusable.

Store a returned value in a variable

You can save the result of a function:

let total = add(10, 4);

The function returns 14, so total now contains 14.

You can then use it later: console.log("Total:", total);

Create a multiplication function

The second function follows the same pattern:

function multiply(a, b) { return a * b; }

Calling: multiply(6, 8)

returns: 48

Use returned values in calculations

Returned values can participate in other expressions.

For example: let result = add(4, 6) * 2;

First, add(4, 6) returns 10. Then JavaScript calculates: 10 * 2

So result becomes 20.

You can even combine function calls

Try: let answer = multiply(add(2, 3), 4);

JavaScript first evaluates: add(2, 3)

That returns 5. Then JavaScript effectively runs: multiply(5, 4)

The final result is 20.

What happens after return?

When JavaScript reaches a return statement, that function stops running.

For example:

function test() { return 10; console.log("Hello"); }

The console.log() after return will not run because the function has already finished.

Experiment:

Create: let sum = add(12, 8);

Then print: console.log("The sum is:", sum);

Next create: let product = multiply(7, 3);

and print that result too.

Extra challenge: Create a third function called subtract that accepts two parameters and returns the result of subtracting the second number from the first.

Good JavaScript habit: If a function calculates something that might be useful elsewhere, return the value instead of only printing it. This makes the function easier to reuse in other parts of your program.

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

function multiply(a, b) {
  return a * b;
}

console.log("5 + 7 =", add(5, 7));
console.log("6 * 8 =", multiply(6, 8));