JavaScript Functions

JavaScript has many built-in (or "native") functions. Three of these are:

alert()
confirm()
prompt()

Functions can be placed inside other functions. Here is an example of a custom function (one you could write yourself) that incorporates two of the native functions just mentioned.

function getPet() {
	var petName = prompt("Type the name of your pet: ");
	alert("Your pet's name is " + petName + "!");
}

The function will not run (or "execute") until you call it. To call it, you must use its name:

getPet();

A function might be short or long. We can add more instructions to our function. Let's add just one more:

function getPet() {
	confirm("Do you want to discuss your pet?");
	var petName = prompt("Type the name of your pet: ");
	alert("Your pet's name is " + petName + "!");
}

To execute the function, do exactly the same as before:

getPet();

Now let's get fancy and add an if-statement:

function getPet() {
	var discussPet = confirm("Do you want to discuss your pet?");
	if (discussPet > 0) {
		var petName = prompt("Type the name of your pet: ");
		alert("Your pet's name is " + petName + "!");
	} else {
		alert("Okay, goodbye!");
	}
}

getPet();

Arguments

If a function takes arguments, these must appear in the parentheses after the function's name. When we define the function (using the function keyword), we also define how the arguments will be used.

function getVolume(length, width, height) {
	var volume = length * width * height;
	alert("The volume is: " + volume)
}

When we call the function, all the arguments (three arguments, in this case) must be provided:

getVolume(5, 3, 10);

Return

The return keyword is used inside a function to get a value, or values, out of the function so the values (the results of your function) can be used elsewhere in your script.

function getVolume(length, width, height) {
	var volume = length * width * height;
	return volume;
}

alert( getVolume(5, 3, 10) );

Now one more change, and our function looks more like what a real programmer would write, using return:

function getVolume(length, width, height) {
	return length * width * height;
}

alert( getVolume(5, 3, 10) );

Note that the return keyword can be used only ONCE in a function, and if there are any instructions following the return instruction, they will not be executed. The exception to this is when the return instruction is inside an if-statement.

function getPet() {
	var discussPet = confirm("Do you want to discuss your pet?");
	if (discussPet > 0) {
		var petName = prompt("Type the name of your pet: ");
		return "Your pet's name is " + petName + "!";
	} else {
		return "Okay, goodbye!";
	}
}

alert ( getPet() );

In the case above, we see two return instructions, but only ONE will be executed. Which one depends on your answer to the first question, "Do you want to discuss your pet?" If you select OK, the value of your answer is true, which is the same as 1. If you select Cancel, the value of your answer is false, which is the same as 0.

Scope

Here is an example to illustrate global and local scope for variables.

Step 1. Type or copy/paste into the JavaScript console:

var petName = "Truman Cat";

Step 2. Copy all four lines, then paste into the JavaScript console:

function getPet() {
	var petName = prompt("Type the name of your pet: ");
	alert("Your pet's name is " + petName + "!");
}

Step 3. Type or copy/paste into the JavaScript console:

getPet();

When you type your pet's name into the Prompt dialog box, be sure to type something other than "Truman Cat."

Step 4. Type or copy/paste into the JavaScript console:

alert("The variable petName is " + petName + ".");

What this proves is that when you used var petName inside the function, you made a local variable that was isolated inside the function. It had no effect on the global variable petName (declared outside the function), and so the value of the global variable remained unchanged: "Truman Cat."

What if you wanted to change the value of the global variable via instructions inside your function? (This can be risky.) To do so, change just one thing inside the function: omit the var keyword. If you do, the global variable petName will be changed when your function runs.

Next: JavaScript Syntax Practice