Calling functions with parameters

You can use parameters instead of creating a function for each alert. You can create a function to do the same thing multiple times but with new information taken from parameters each time.

You can use a variable as a parameter but you can also use a value as a parameter. That means we can have variable parameters and value parameters. Variables are also of two types, global and local variables.

Using global variables

Global variables are variables defined outside of a function so they can be changed anywhere in the script.

var MyMotorbike="Honda PCX";
var PriceOfMyMotorbike="3000";

A global variable can be affected by a function. Let’s consider the following example:

var MyMotorbike = "Honda PCX";
var PriceOfMyMotorbike = "3000";

function MyNewMotorbike() {
     MyMotorbike = "Yamaha Nouvo";
     PriceOfMyMotorbike = "2500";
     window.alert("You need just $" + PriceOfMyMotorbike + " to get a " + MyMotorbike);
}

MyNewMotorbike();
window.alert("You make $" + PriceOfMyMotorbike + " and have a " + MyMotorbike);

The browser outputs two alert boxes with the following text:

You need just $2500 to get a Yamaha Nouvo
You make $2500 and have a Yamaha Nouvo

It looks like you created two new variables inside the function, although they have the same name. Obviously this is wrong! Without var keyword you are not creating new variables inside the function (which will make them local) but you are changing the values of your global variables.

Using local variables

A local variable can be used only within the function in which it is declared.
To declare a local variable you have to place it inside a function and use the var keyword.

Notes:

  • A local variable does not exist outside the function in which it is declared.
  • A local variable can be passed along to another function by using parameters.

To correct the script used previously, all we need to do is to add the var keyword to declare the local variables inside the function. Therefor the script will look like this:

var MyMotorbike = "Honda PCX";
var PriceOfMyMotorbike = "3000";

function MyNewMotorbike() {
     var MyMotorbike = "Yamaha Nouvo";
     var PriceOfMyMotorbike = "2500";
     window.alert("You need just $" + PriceOfMyMotorbike + " to get a "+MyMotorbike);
}

MyNewMotorbike();
window.alert("You make $" + PriceOfMyMotorbike + " and have a "+MyMotorbike);

The browser output will be:

You need just $2500 to get a Yamaha Nouvo
You make $3000 and have a Honda PCX

Using variables as function parameters

You can use variable parameters in the same circumstances. You can send a global variable along to a function then assign its value to a local variable.

function MyMotorbike(PriceOfMyMotorbike) {
     var NewPrice = PriceOfMyMotorbike;
     window.alert("You make $ " + NewPrice);
}

var PriceOfMyMotorbike = 3500;
MyMotorbike(PriceOfMyMotorbike);

The script begins with MyMotorbike function which takes in the parameter PriceOfMyMotorbike. A local variable, named NewPrice, is created. The line of code in the function assigns the value of PriceOfMyMotorbike to the newly created local variable NewPrice. In this way the global variable can be used without being changed. The function then displays a window alert.

Outside the function, in the script, the variable PriceOfMyMotorbike is assigned a value of 3500. At the end, the script calls the function MyMotorbike(PriceOfMyMotorbike) and send it the value of PriceOfMyMotorbike variable.

This is a quite lengthily example of a way to keep from changing a global variable. It can be done differently.

function MyMotorbike(NewPrice) {
     window.alert("You make $ " + NewPrice);
}

var PriceOfMyMotorbike = 3500;
MyMotorbike(PriceOfMyMotorbike);

When the function is called the script sends to the function the value of PriceOfMyMotorbike variable. Instead of naming the value “PriceOfMyMotorbike” and assigning it to another variable you simply just use another name within parentheses. In this way the variable NewPrice becomes a local variable inside the function MyMotorbike(). Since the code sends PriceOfMyMotorbike a value of 3500, NewPrice will be 3500.

Using value parameters

You can also send a value as a parameter directly which will be converted into a local variable inside the function without the need to declare a global variable.

function MyMotorbike(NewPrice, NewMotorbike) {
     window.alert("You make $" + NewPrice + " and you have a " + NewMotorbike);
}

MyMotorbike(3500,"Honda PCX");

The function call sends two parameters to the function. These two parameters, 3500 and Honda PCX, are read by the function as local variables and used to display the alert with the text “You make $3500 and you have a Honda PCX”.

Another important thing to mention is that parameters are optional. If the parameters are missing the output will be “You make $undefined and you have a undefined”.

function MyMotorbike(NewPrice, NewMotorbike) {
     window.alert("You make $" + NewPrice + " and you have a " + NewMotorbike);
}

MyMotorbike();

You can also tell JavaScript to check if the parameters exist before writing the statement to the page. If the parameters exist then the statement will be written on the page, if they don’t exist then the alert will say “Missing the parameters”.

function MyMotorbike(NewPrice,NewMotorbike) {
  if (NewPrice && NewMotorbike) {
     window.alert("You make $" + NewPrice + " and you have a " + NewMotorbike);
     }
  else {
     window.alert("Missing the parameters");
     }
}

MyMotorbike();

Leave a Reply