Return statements?

JavaScript
1

I am having trouble understanding the purpose of “return statements” as shown in this tutorial

The JavaScript Diaries: Part 4

can anyone simplify it [if possible] for me please?

2

Return doesnt output anything visibly, it just sends back something, so in this example check it it out:

function addit(x, y) {
  return x * y;
}

var z = addit(10, 5);

alert(z);

You could even do this:

function something(x) {
  return 'x' + ' Hello';
}

alert(something('John'));

If you play with those examples a few minutes it should make sense better than explaining it :stuck_out_tongue:

3
Off Topic:

Why would you call a function that multiplies addit?

4

Here’s the code from said tutorial:


function getAddedText() {
  var textPart1="This is ";
  var textPart2="fun";
  var addedText=textPart1+textPart2;
  return addedText;
}
var alertText=getAddedText();
alert(alertText);

A function is a little ball of code that has an input and an output. The input goes between the rounded brackets (), and the output is provided by the return statement.

In the example above:

  1. The function is called getAddedText.
  2. It accepts no input. we can tell because the rounded brackets are empty.
  3. The output, provided by the return statement is a string “This is fun”

So the return keyword defines the function’s output. It’s what you get back when you call the function.

5

Why not use “alert” or document.write to write the text “this is fun” instead of using “return addedText;” ?

6

Two words: modu-larity :slight_smile:

In this slightly contrived example you might just want to alert the string “This is fun”, but in a real world example, having your functions accept an input and give an output is a big win.

I wrote a pregnancy tracker recently which allowed you to enter a date and time, and then showed you stats about the progress of your baby. I needed to write various functions. Here’s one:


  day_of_pregnancy = function(date, due_date) {
    milliseconds_remaining = due_date.getTime() - date.getTime();
    millisecond_in_day = 1000*60*60*24;
    return parseInt(milliseconds_remaining / millisecond_in_day);
  }

This function accepts a date, accepts a due date, and outputs a number corresponding to the number of days between the two dates.

So why write it like this? Why not just write a single function that does everything, works out today’s date for itself, handles the output to the webpage, etc?

Well writing it like this makes it more modular. each function should have a single, easily identifiable function. It should take everything it needs, do a single, clearly definable thing with it, then return whatever it needs to when it’s done.

This makes your code:

  1. More readable
  2. More maintainable
  3. And crucially, more testable

Having defined my day_of_pregnancy function with a clear input, and a clear output, I can call this function from wherever I am.

Here I’m calling it from my init function:


var day = baby.day_of_pregnancy(new Date(), date);

And here I’m calling it from within my test suite:


tests.add_test("It should calculate which day of your pregnancy you are on", function() {
  var october_8_2010 = new Date(Date.parse('Oct 8, 2010'));
  var november_10_2010 = new Date(Date.parse('Nov 10, 2010'));
  condition_1 = day_of_pregnancy(october_8_2010, november_10_2010) == 33;
  return condition_1
});

It’s clear what I want it to do, I can chuck data into it to test it works, I can call it again from my UI dialog if the due date changes. It’s easy to read, easy to maintain, and once I have a test for it, I can guarantee that it will continue to work forever more. :slight_smile:

7

ok, think I get it, thanks for the explanation!

8

Another reason for not using those is because they are for debugging scripts - you should never use them in a script that has been uploaded to the web.