spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / programming / javascript / diaries / 4

[previous]

Oracle Report Developer (IL)
Next Step Systems
US-IL-Elk Grove Village

Justtechjobs.com Post A Job | Post A Resume
Developer News
ActiveState Debuts Open Source Business Suite
Salesforce Offers Visual App Builder
Codesion Steps Out From CVS's Shadow


The JavaScript Diaries: Part 4

Return Statements

If you create a function and call it once, that works well, but what if you want the function to carry out a task that can by reused within the main script multiple times? JavaScript uses a "return" statement for this very situation. The return statement must be on the last line of the function, before the closing bracket. This is important as the execution of the function stops once a return statement is encountered; anything after that is not processed.

Here is what a function would look like with the return statement:

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

Let's take a look at what is happening here. Remember, while the function is not executed until it is called, the code should be in memory prior to the function call to avoid any possible errors.

  • This script actually begins on the seventh line with the declaration of the variable alertText. It is initialized with the value of the function getAddedText.
  • At the same time, a function call is initiated and the function getAddedText is executed.
    • Two local variables are declared, textPart1 and textPart2, and initialized with the values of "This is " and "fun," respectively.
    • A third variable, addedText, is declared and initialized with the values of the first two variables. The results are joined together ("concatenated").
    • A return statement is then issued, sending the value of the variable addedText back to the place in the script where the call was first made.
  • An alert window is then displayed with the result of the variable alertText. Remember, we had previously assigned the results of the function getAddedText to the variable alertText.

It's gets a little complicated but if you break it down into segments — which is what the JavaScript interpreter does — it's fairly easy to follow. Without a return statement, the function is only used when a function call is issued and then it ends. With a return statement, the results can be incorporated within the overall script and can be used several times.

Using the return statement in the function also allows the results to be further manipulated outside the function, within the overall script. Let's use the above example and make a few additions:

function getAddedText() {
  var textPart1="This is ";
  var textPart2="fun";
  var addedText=textPart1+textPart2;
  return addedText;
}
var moreText=" isn't it?";
var alertText=getAddedText()+moreText;
alert(alertText);

As I stated earlier, it's important to remember that the return statement is placed in the last line of the function, before the closing curly bracket as it stops all further processing of the function code. For example, in the following code, the function stops calculating after the return statement. The alert box will return a result of "undefined" as the function did not complete its 'program,' Run it and see how it works.

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

Return statements are very valuable in validating user input, as in forms. They also have many other uses.

Conclusion

That will wrap it up for our study of JavaScript functions. If you're like me, your head is probably still spinning a bit. Next time we'll look at conditional statements and loops. Remember, if you have any questions, feel free to

To Part 2 Continue on to "The JavaScript Diaries: Part 5"

home / programming / javascript / diaries / 4

[previous]


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

webref The latest from WebReference.com Browse >
Use Web Caching to Make Your Web Site Faster · Creating an Online Shopping Cart Mechanism in PHP · Log JavaScript Errors Using an AJAX-driven Web Service
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Configuring Granular Settings for a Database Level Audit · The Perils of a Web 2.0 Transition on Your Business Processes · Facebook Redesigns Site —Again — Nears 400M Mark

Created: May 27, 2005

URL: