The JavaScript Diaries: Part 4 - Page 5

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

Continue on to "The JavaScript Diaries: Part 5"

[previous]

Created: May 27, 2005

URL:

The JavaScript Diaries: Part 4 - Page 5