why do i need the return keyword in this specific function

Question

i am learning javascript with a udemy tutorial and also youtube.. and it went pretty well with template literals, also ternary operator, and other operator such as logical and arithmetic, but when i encountered functions, it's a whole new level of frustrations.

before the question just to make sure i understand, the return keyword is used in order to be able to reuse the code inside the function later in my program, but in this specific example, it works even without the return keyword.. so why do i need it??

code:

function fruitProcessor(apples, oranges) {
    console.log(apples, oranges);
    const juice = `juice with ${apples} apples and ${oranges} oranges`;
    // return juice; working even without it.
}
fruitProcessor(5, 2)

can someone correct me if i am wrong about the basic idea of return keyword? and also explain to me regarding my question? thanks!

Answer 1

If you want to just run the code inside the function, you don't have to return anything. However, if you want to use a result of a calculation, then you can return whatever you want from any function you define.

For example, let's use the following function:

function sum(a, b) {
  const ans = a + b;
  console.log(ans);
  return ans;
}

You can see that it does 3 steps:

1. Calculate the sum of its arguments.
2. Log the sum (using `console.log).
3. Return the sum.

Then, if you just call the function you'll do all these steps - but will ignore the returned value:

sum(1, 2); // Will log '3'

However, you're also able to use the returned value:

const foo = sum(1, 2); // Will log '3'
console.log('The sum is ' + foo);  // Will log 'The sum is 3'

Answer 2

From the MDN documentation:

The return statement ends function execution and specifies a value to be returned to the function caller.

In that regard, a function not always is used just to print an statement in a console.

Taking your example, you can remove the console.log statement and work with the returned value later in your code.

function fruitProcessor(apples, oranges) {
    const juice = `juice with ${apples} apples and ${oranges} oranges`;
    return juice;
}
console.log(fruitProcessor(5, 2))

or also you can store the function's response in a variable to be used later without calling again the function (and consume more machine time again):

    function fruitProcessor(apples, oranges) {
        const juice = `juice with ${apples} apples and ${oranges} oranges`;
        return juice;
    }

    let processedFruits = fruitProcessor(5, 2);
    let upperCaseFruits = processedFruits.toUpperCase(); //using the variable
    console.log(processedFruits);
    console.log(upperCaseFruits);
    

Answer 3

There are two things to examine. The first is this statement in your question:

the return keyword is used in order to be able to reuse the code inside the function later in my program

Once defined a function (and, therefore, its code) can be called from anywhere inside your script (although be aware of how hoisting affects function expressions and declarations differently).

The other thing to examine is the statement "it works even without the keyword". Yes, it does work - at least, the code is correct and it doesn't have any errors. It accepts two arguments apples and oranges. You have one console.log statement which logs the values of those arguments. And you're assigning a string using a template to a variable called juice.

But then...what are you going to do with that variable?

You could log the value of juice, and that would work (as shown below)...

// Accepts two arguments - apples, oranges
function fruitProcessor(apples, oranges) {
  
  // All the console log does is log the values
  // of those two arguments
  console.log(apples, oranges);
  
  // Assign a string to `juice`.
  const juice = `juice with ${apples} apples and ${oranges} oranges`;
  
  console.log(juice);
  
}

// Call the function
fruitProcessor(5, 2);

...but generally you want to use the result of all that function processing outside of the function; so you return the variable from the function.

Here juice is being returned from the function and is being logged.

// Accepts two arguments - apples, oranges
function fruitProcessor(apples, oranges) {
  
  // All the console log does is log the values
  // of those two arguments
  console.log(apples, oranges);
  
  // Assign a string to `juice`.
  const juice = `juice with ${apples} apples and ${oranges} oranges`;
  
  // Return the variable
  return juice;
  
}

// Assign the returned result to a variable
// and log it
const fruit = fruitProcessor(5, 2);
console.log(fruit);

// or, more simply

console.log(fruitProcessor(5, 2));

But it could be anything; a function that adds two numbers, for example:

// Accept two numbers, add them together
// and return them
function addTwoNumbers(a, b) {
  return a + b;
}

console.log(2 + addTwoNumbers(2, 3));

Or a function that returns a new function (generally known as "a closure"). Here we're calling a function with a value, and returning a function. That function (which also accepts an argument) maintains a copy of that original value when it's returned. We can then assign that function to a variable, and then call it with its own number argument, and the result of calling that function adds the two numbers together.

Functions in JavaScript can work like this because they are first-class objects.

// Accept a number and return a function
// that also accepts a number and that, when called,
// adds the numbers together
function adder(a) {
  return function (b) {
    return a + b;
  }
}

// Call the function and assign the function
// it returns to a variable
const addTwo = adder(2);

// Log the result of calling the new function
// with an argument of its own
console.log(addTwo(3));