A beginner question to Return


#1

I just seem to not really understand return. I understand that it gives me the value and ends the function so it won't run anymore. Except when math is involved (lets say 3*3 and we want the function to return to us 9 and we want to work with the result 9), I don't understand it quite well.

  1. Why don't we want the function to run? One reasons to use functions is that we can reuse the code inside the function by simply calling it as often we want without having to write the code again by just calling the function. If return ends the function, does that mean we cannot reuse the code again by calling the function and if we do call the function at a later point, we would only be able to use the result of that function (not the code insight the function)?
    2.Return is used when we have to reuse the data later on. Is not that the point of variables? We save data to reuse it?!

I m just really confused about the return.
Thank you!


#2

hi.
From my point of view, yes, I agree with "return" command is used to give the value or result of a "function" , also , we can use that "value" ( of previous "function") in another code ...

I like because you avoid writing the same thing over and over again...
you can also give it different parameters...
i hope I could make myself clear... im learning js in spanish so...
good luck!


#3

Hi,

I'm not entirely sure I follow your questions, so if something is not clear please rephrase what you're after maybe I can provide a better answer.

I think maybe part of your confusion is how you're thinking about functions. Return statement does indeed stop the function, but it stops it for that invocation only. If you call the function again, it will run again.
Return is used to give us a value at the end of the function and allow the rest of our code to run to completion and if needed we can call the same function again.

So let's say we have the following:

var areaOfSquare = function (sideOfSquare) {
    return sideOfSquare* sideOfSquare;    
}

As the name suggests we will be using this function to work out the area of a square.

Now we might want to actually work out the area of three different squares, so we would need to call the areaOfSquare function three times. In the example above the function takes an argument of sideOfSquare which is the length of a side of the square.

So if we wanted to work out the are of 3 squares, with sides of 5, 10 and 15cm we would need to call the function three times e.g.

var areaOfSquare = function (sideOfSquare) {
    return sideOfSquare * sideOfSquare;    
};

console.log(areaOfSquare(5)); // this will return 25
console.log(areaOfSquare(10)); // this will return 100
console.log(areaOfSquare(15)); // this will return 225

So now you see that the function can be reused multiple times in our code through the use of arguments, every time we want to rerun the function with a new argument we can do so and the return statement simply gives the relevant output.

That's not to say we can't reuse a previously used argument, remember the function will run as many times as you call it.

Your second point about variables is also correct. We store values in variables, the return doesn't actually store the value, it's the variable that stores it.

So, sticking with our example, let's expand it. Say you now wanted to also add the size of the two smaller squares together to see if they would have a greater area than that of the bigger square you could expand the code to something like this:

 var areaOfSquare = function (sideOfSquare) {
        return sideOfSquare * sideOfSquare;    
    };
    
    // now instead of using console.log to print the value of the function.
    // we're storing the function values within variables

    var smallSquare = areaOfSquare(5);
    var mediumSquare = areaOfSquare(10);
    var largeSquare = areaOfSquare(15);
    
    if (smallSquare + mediumSquare > largeSquare){
        console.log("The area of the smaller squares is greater than the larger square");
    }
    else{
        console.log("The area of the smaller squares is less than the larger square");
    }

So you see, the function is reused, the return statement breaks the function allowing the rest of your code to run, and variables are being used to store the value of the function when called with different arguments.

Hope that helps!


#4

Thank you for taking the time and explaining so clear!!
Could you explain when return would not make sense and what would be used instead (could I use a local variable to calculate sideOfSquare * sideOfSquare for example? The only thing I can think of would be if return would end a loop too early (in cases of if/else statements, because it would cut off else).
Thank you!


#5

@avdi
Already gave a great answer so there is few to add. The idea behind functions is that they are some kind of sub program. So when you call a function you interrupt your current command series and enter a sub program. Now your trapped in this sub program and do its command series. And getting back to the main program is the job of return. So originally return is nothing special but just the return from the function to the main program.
Then why are there functions without return if every function needs to return to the main program?
Well javaScript handles this automatically whenever you reach the end of a function javaScript assumes there is a return;
So you only need to use return when you either want to start this returning earlier then the last statement or if you want to return with a value.

So as @avdi already described and brought examples how return is used to get a value from inside the function to replace the function call with this value and how the function call can therefor be used as if it is just a regular value.

I'll give you a short idea of what ending a function earlier means.
Let's assume you still have the function

var areaOfSquare = function (sideOfSquare) {
    return sideOfSquare * sideOfSquare;    
};

but you think What if someone enters something different the a number? This would make this function produce an error as the * operator is only defined for number. Well why only use one return statement?

var areaOfSquare = function (sideOfSquare) {
    if(isNaN(sideOfSquare)){
        return "Unable to compute the area. Please enter a number";
    }
    return sideOfSquare * sideOfSquare;    
};

So if the input is not a number you enter the if see a return and therefor exit with this value and otherwise you don't enter the if see the

return sideOfSquare * sideOfSquare;

and exit with this value. Hope this makes it a little clearer.


#6

So I still wonder, could I use a local variable to calculate sideOfSquare * sideOfSquare instead of using return?


#7

When you say local variable, what do you mean exactly?

I ask because I have a feeling we might be talking about something slightly different if I was to take the phrase local variable at face value. To illustrate:

If you had our same function but instead of returning a value, we used a variable (local to the function - i.e. a function's local variable) to save the value we might end up with something similar to:

var areaOfSquare = function (sideOfSquare) {
    var area = sideOfSquare * sideOfSquare;    
};

That's fine in an of itself, however you wouldn't actually be able to access the variable area, as it is scoped to the function. Anything trying to access area outside of the function would simply fail.

To illustrate if I was to try and print the value of the variable called area in my browser's console this is what I will get:

As you can see, area is not defined.

You can get around this by using a global variable e.g. window.area:

But I feel that this might be getting a bit ahead of ourselves, and it is generally not good practice to window scope variables without good enough reason to do so.

As a result of the scoping issue I've shown above, if I wanted to assign the value of the function to a variable I would use something similar to what I had shown in my first reply e.g. var smallSquare = areaOfSquare(5);

This assigns the value of the function to a variable outside the scope of the function, but still within the body of our code meaning next time we want to do something with the area of a square with a side length of 5, we simply have to call the variable name smallSquare:

Hope that helps!


#8

Thank you! I was asking because in "Introduction to functions in JS (5/13)" section there was that example:

var calculate = function (number) {
var val = number * 10;
console.log(val);
};

and I got confused as here return is not being used to calculate number times 10 but just a local variable.


#9

Yes, Simply put because the function is not sending a value to anything else.

You could change this like the example below, but for the example that you shared it wouldn't be necessary.

var calculate = function (number) {
 var val = number * 10;
 return val; // This is returning the val variable to outside of the function
};
var Example = calculate(30); //Example would receive the "return" value for '300'

#10

Okay thank you all!!!