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?
| SitePoint Sponsor |

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?
Return doesnt output anything visibly, it just sends back something, so in this example check it it out:
Code JavaScript:function addit(x, y) { return x * y; } var z = addit(10, 5); alert(z);
You could even do this:
Code JavaScript: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 :P

Rémon - Hosting Advisor
Minimal Bookmarks Tree
My Google Chrome extension: browsing bookmarks made easy

Here's the code from said tutorial:
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.Code:function getAddedText() { var textPart1="This is "; var textPart2="fun"; var addedText=textPart1+textPart2; return addedText; } var alertText=getAddedText(); alert(alertText);
In the example above:
- The function is called getAddedText.
- It accepts no input. we can tell because the rounded brackets are empty.
- 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.

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

Two words: modu-larity
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:
This function accepts a date, accepts a due date, and outputs a number corresponding to the number of days between the two dates.Code: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); }
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:
- More readable
- More maintainable
- 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:
And here I'm calling it from within my test suite:Code:var day = baby.day_of_pregnancy(new Date(), date);
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.Code: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 });![]()

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

Stephen J Chapman
javascriptexample.net, Book Reviews, follow me on Twitter
HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
<input name="html5" type="text" required pattern="^$">
Bookmarks