Question 49284 in Javascript Question posted in
A very good W3school tutorial can be found here.

The importance of the return keyword in Javascript

I want to understand how to use the return keyword with function properly and when to use it.

For instance, I tried the following code

function getWaterBottle(money) {
  console.log(`You Can Buy "${parseInt(money / 1.5)}" Bottles Of Water`)
  
  return money % 1.5;
}

getWaterBottle(4)

Then I thought to omit the return and add the same output to the console without the return keyword.

function getWaterBottle(money) {
  console.log(`You Can Buy "${parseInt(money / 1.5)}" Bottles Of Water`)

  console.log(`The change is ${money % 1.5}`) // this is the replacement of the return keybord

}

getWaterBottle(4)

So, my question is, what is the difference when using the return keyword and without it, and how and when to use it properly?

I appreciate your help.

Tags:

3

Answers


  1. 0

    here is the different between your two example

    with return:

    function getWaterBottle(money) {
  console.log("console.log inside function:", `You Can Buy "${parseInt(money / 1.5)}" Bottles Of Water`)
  
  return money % 1.5;
}

const dataFromFunction = getWaterBottle(4);

console.log("console.log outside function:", "data from function: " + dataFromFunction)

    without return:

    function getWaterBottle(money) {
  console.log("console.log inside function:", `You Can Buy "${parseInt(money / 1.5)}" Bottles Of Water`);

  console.log("console.log inside function:", `The change is ${money % 1.5}`);

}

const dataFromFunction = getWaterBottle(4);

console.log("console.log outside function:","data from function: " + dataFromFunction)

    without return in second example, the dataFromFunction is undefined. the return keyword will return whatever you write right after the keyword to the caller. find out more here

    Login or Signup to reply.
  2. 0

    The return keyword is not just a keyword but one of the most basic and fundamental concepts of computer programming.

    I want to store a value of the results of a calculation. I do that calculation with a function and store the result returned.

    For a pure function the important part is that the function does nothing on its own. It should take some values as arguments, perform a calculation, then return the results with no side effects.

    In other words, calling a pure function without doing anything with the return value should be the same as not calling the function at all.

    The log statements don’t change the state of your program so those are still pure functions. They just don’t do anything except read data and display it in the console.

    Which in the end is the same as not being called when it comes to the actual state of your program.

    Login or Signup to reply.
  3. 0

    The return in Javascript is called a statement. Its role is to return a value to the calling function. Some functions may not return a value, so the return statement is not mandatory, it depends on what you are looking to do. No code after a return statement is executed. It is possible to use multiple return in a function when we use multiple if statement for example.

    You may use the return statement in a particular situation, since variables declared inside your getWaterBottle() have a restricted scope to the body of the function, they are not visible from outside this function. To share the value of a variable declared inside your function to the calling function you use the return statement.

    The value returned by the return statement can be assigned to a variable.

    For example, let use your code, in the following code you are calculating the change, but you are not using it. You are just displaying in the console the number of bottles you can buy with the money you have. The change is actually returned, but not used. We can use it in a variable for example:

        function getWaterBottle(money) {
        console.log(`You Can Buy "${parseInt(money / 1.5)}" Bottles Of Water`)
    
        return money % 1.5;
    
    }
    
    //We assign the returned value by the return statement to the variable that we name "change"
    let change = getWaterBottle(4)
    //We display the value of the variable in the console
    console.log(`The change is ${change}`);

    This example is to make you understand how we can share the result of a function with the return statement

    In another hand, you can use its value without assigning it to a variable, for example, we want to apply a discount to customers buying more than three bottles:

    function getWaterBottle(money) {
    //We return the number of bottles the customer can buy
    return parseInt(money / 1.5)
}

//We use an "if" statement, as you can see, the getWaterBottle() function is returning a value that can be read directly by the "if" statement.
let money = 5
if (getWaterBottle(money) > 3) {
    console.log("Eligible to a discount");
}
else {
    console.log("Not eligible to a discount");
}

    Now, to show you the use of multiple return statement, lets take the previous discount example:

    function getWaterBottle(money) {
    //We assign the number of bottles the customer can buy to a variable
    numberOfBottles = parseInt(money / 1.5)

    //we check for the discount
    if (numberOfBottles > 3) {

        return true
    }
    else {

        return false
    }
}


//In this "if" statement, we check if the getWaterBottle() is returning true or famse
if (getWaterBottle(8)) {
    console.log("eligible to a discount");
}
else {
    console.log("not eligible to a discount");
}

    Again, these are examples, according to your project, the code can be made shorter with some good practice.

    About your second code, not using the return statement means that the code inside your function is executed, but no value is returned, in fact it returns undefined and even if you declare variables inside it, you can not use them outside your function.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search