|
Return is used in a function for two reasons.
- You want the script to stop executing if something happens.
- You want the function to return a value to the calling function.
In earlier tutorials we have only been using one single function in our scripts, but that is very rare in real life.
One of the most important things to master in JavaScript is how to split up your code in useful building blocks. Let's say that you have a script containing 7 different functions that calculates different product groups in an order form. In every one of these 7 functions you need to add VAT to the order total.
Instead of writing the VAT equation 7 times you make it a separate function. Like this:
function addVAT(value){
var newValue
newValue=value*1.07
return newValue
}
Let's take a look at what happens here…
Line 1. We declare a function and prepare it to receive a value (called "value").
Line 2. We declare a variable that will contain the result of our equation.
Line 3. We multiply the received value with 1.07 (adding 7% VAT).
Line 4. We return the result of the equation to the function that called this function.
Now when you need to add VAT in another function you write something like this:
vatAdded=addVAT(orderTotal)
We call the function "addVAT(value)" by sending the value stored in the variable "orderTotal"
The "addVAT(value)" function returns a new value (including VAT) and that new value is stored in the variable "vatAdded".
This example is very simple, the functions you call are usually more complicated. This technique can save you hours and days of work if you learn how to master it. At the very beginning of the writing process you should ask yourself "are there any parts that I can make into separate functions (building blocks)?".
There are many similarities between these JavaScript building blocks and Cascading Style Sheets. In both cases you can make a change in one place and affect many. If the VAT would change to 8% we would only have to make 1 adjustment instead of 7.
Now over to the other reason for using "return". You might remember this script from the DOM tutorial:
<script type="text/javascript">
<!--
function makeHidden(){
if (document.getElementById){
document.getElementById("layer1").style.visibility="hidden"
}
if(document.all){
document.all["layer1"].style.visibility="hidden"
}
if(document.layers){
document.layers["layer1"].visibility="hidden"
}
}
// -->
</script>
The problem with this script is in line 4 and 7. Internet Explorer has both "document.getElementById" object AND a "document.all".object In this script it doesn't matter but in most cases you would get unpredictable results if two options are executed.
To solve the problem we could make one small change, like this:
<script type="text/javascript">
<!--
function makeHidden(){
if (document.getElementById){
document.getElementById("layer1").style.visibility="hidden"
return
}
if(document.all){
document.all["layer1"].style.visibility="hidden"
}
if(document.layers){
document.layers["layer1"].visibility="hidden"
}
}
// -->
</script>
"return" will stop JavaScript from executing the rest of the script if the first option is triggered – problem fixed!
You will see "return" in action many times if you continue reading these tutorials. We will use "return" in a very elegant way in the "Forms part 1" tutorial! Stay tuned!
Back to tutorial index <<
|
