gignu
gignu

Reputation: 2507

What do I need a return statement for in JavaScript?

I'm trying to wrap my head around the return statement but I can't see a reason why I should use one. My code works just fine without using one... In both examples my console prints out 10 not matter if I use return or not.

Without return:

var sum = 5;

function myFunction() {
    sum += 5;
}

myFunction();

console.log(sum);

With return:

var sum = 5;

function myFunction() {
    return sum += 5;
}

myFunction();

console.log(sum);

Upvotes: 0

Views: 233

Answers (4)

Roman
Roman

Reputation: 441

The trick in your case a is scope of a function. In both cases variable sum is defined in global scope. When you calling the function, it goes through the following steps:

  1. Look whether var sum is defined in current step Since it not defined inside the function, go one step over and take a look into outer scope. Yes, it is defined here, start using it.
  2. Perform calculation. You are using incremental operator sum += 5 so actually it can be written as sum = sum + 5. If you will look into second case, you'll notice that variable have increased value now. And since that variable is taken from global scope, your function just mutates it. NOTE: At this point no matter whether you are returning something from function or not. Your function just mutated outer variable.
  3. The last step - exit from function. As I said earlier, return value matters only if you want to use result of function call directly, for instance: var result = myFunction()

Upvotes: 0

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92743

This is because you use (global) variable declared outside the function (function modify it directly so there is no need to return value). However it is not good way of write functions because they are less reusable because they need proper global context to be used. Better is to use something like this:

function myFunction(num) {
  return num += 5;
}

var sum = 5;
var result = myFunction(5) ;
console.log(result); // -> 10

this function can be easily used ind different context because it have parameter num and works only on it (function uses only values declared inside its declaration and body)

Upvotes: 0

mattintech
mattintech

Reputation: 11

Here is what is happening with your example:

var sum = 5; //Sets the sum to =5

function myFunction() {
    return sum += 5; // += reassigns the global (sum) to 10
}

myFunction();

console.log(sum); 

A better example would be this:

 sum = 5;
 function myFunction() {
     var sumOther = sum + 5;
     return sumOther;
} 
console.log(“sum:” + sum); // 5
console.log(“myFunction:” + myFunction()); // 10

This is how you would get the run of the function and not the global variable ‘sum’

Upvotes: 0

RobG
RobG

Reputation: 147563

By default, functions return the value undefined. If you want the function to return some other value, you need to have a return statement.

You may also use a return statement to halt execution of the function based on some logic, again returning a value that has some meaning or just undefined.

In the first example in the OP, the function is called and the return value is not used for anything, so it doesn't matter what the return value is and a return statement isn't necessary.

In another scenario, the return value might be important, e.g. a function that generates an integer random number between 0 and 10:

function getRandomInteger(){
  return Math.floor(Math.random() * 11);
}

function showRandomNumber() {
  document.getElementById('s0').textContent = getRandomInteger();
}
<button onclick="showRandomNumber()">Show random number</button>
<span id="s0"></span>

In the above, the getRandomInteger function needs to return a specific value, so it uses a return statement. The showRandomNumber function just displays the random number, so it doesn't need a return statement as the caller (the listener on the button) doesn't care what the return value is.

Upvotes: 1

Related Questions