SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    return statements?

    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. #2
    John 8:24 JREAM's Avatar
    Join Date
    Sep 2007
    Location
    Florida
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    8,906
    Mentioned
    139 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:

    Quote Originally Posted by JREAM View Post
    Code JavaScript:
    function addit(x, y) {
      return x * y;
    }
    Why would you call a function that multiplies addit?
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  4. #4
    SitePoint Zealot
    Join Date
    Sep 2010
    Location
    Brighton, UK
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's the code from said tutorial:
    Code:
    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. #5
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not use "alert" or document.write to write the text "this is fun" instead of using "return addedText;" ?

  6. #6
    SitePoint Zealot
    Join Date
    Sep 2010
    Location
    Brighton, UK
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mikehende View Post
    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:

    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);
      }
    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:

    Code:
    var day = baby.day_of_pregnancy(new Date(), date);
    And here I'm calling it from within my test suite:

    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
    });
    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.

  7. #7
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, think I get it, thanks for the explanation!

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,608
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by mikehende View Post
    Why not use "alert" or document.write to write the text "this is fun" instead of using "return addedText;" ?
    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.
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •