JS Return

JavaScript return Statement: Returning Function Values

We have learned how to create functions and pass data into them using arguments. However, we are still missing a very important piece to make functions as useful as they truly are: the return value.

Functions can give back a result to the rest of your program when we specify a return value.

Storing Function Results

When a function returns a value, that value can be stored in a variable to be used later in your code. We have actually done this already! Remember the built-in prompt() function?

let favoriteSubject = prompt("What is your favorite subject?");

Here, we are storing the result of our prompt() function in the variable favoriteSubject. In this case, the returned value would be whatever text the user types into the prompt box.

What Happens Without a Return Statement?

Let's see what happens if we write our own function without a return statement, and try to store its result in a variable:

function addTwoNumbers(x, y) {
    console.log(x + y); // Just logging, not returning
}

let result = addTwoNumbers(4, 5);
console.log("The result is: " + result);

If you run the code above, the first line outputs 9 (because the function contains a console.log() statement).

However, the stored result variable is undefined. Why? Because nothing is explicitly sent back from the function to be stored. Since JavaScript does not like to crash when this happens, it simply assigns undefined as a default fallback.

Using the return Keyword

To fix this, we rewrite our addTwoNumbers() function to actually return the value instead of just logging it.

This is a much more powerful approach because we can store the calculated result and continue working with it elsewhere in our code.

function addTwoNumbers(x, y) {
    return x + y;
}

let result = addTwoNumbers(4, 5);
console.log(result); // Outputs: 9

Crucial Rule: The return keyword ends the function immediately and sends back whatever value comes after it. If it is an expression (like x + y), JavaScript evaluates the expression into a single result first, and then returns that result.

Practical Example: Using Returns in a Loop

Because our function now safely returns data, we can use it in complex logic, such as a loop. What do you think the following code does?

let resultsArr = [];

for(let i = 0; i < 10; i++) {
    let result = addTwoNumbers(i, 2 * i);
    resultsArr.push(result);
}
console.log(resultsArr);

It logs an array of all the calculated results to the screen!

The function is called multiple times inside the loop. On the first iteration (i = 0), the result is 0. On the last iteration (i = 9), the result is 27. The output looks like this: [ 0, 3, 6, 9, 12, 15, 18, 21, 24, 27 ]

Returning with Arrow Functions

JavaScript ES6 introduced Arrow Functions, which provide a very clean and concise way to return values.

1. Implicit Return (One-Line Arrow Functions)

If we have a one-line arrow function, we can return the value without using the return keyword and without curly braces {}. This is called an implicit return.

let addTwoNumbers = (x, y) => x + y;

let result = addTwoNumbers(12, 15);
console.log(result); // Outputs: 27

2. Explicit Return (Multiline Arrow Functions)

If your arrow function requires multiple lines of code (meaning you have to use curly braces {}), you must use the explicit return keyword to send data back.

let addTwoNumbers = (x, y) => {
    console.log("Adding...");
    return x + y; // The return keyword is required here!
}

let result = addTwoNumbers(10, 10);
console.log(result); // Outputs: 20