User-defined Functions

Contact Us or call 1-877-932-8228
User-defined Functions

User-defined Functions

Writing functions makes it possible to reuse code for common tasks. Functions can also be used to hide complex code. For example, an experienced developer can write a function for performing a complicated task. Other developers do not need to know how that function works; they only need to know how to call it.

Function Syntax

JavaScript functions generally appear in the head of the page or in external JavaScript files. A function is written using the function keyword followed by the name of the function.

Syntax

function doSomething(){
	//function statements go here
}

As you can see, the body of the function is contained within curly brackets ({}). The following example demonstrates the use of simple functions:

Code Sample:

JavaScriptFunctions/Demos/SimpleFunctions.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Simple Functions</title>
<link href="style.css" rel="stylesheet">
<script>
	function changeBgRed(){
		document.body.style.backgroundColor = "red";
	}
	
	function changeBgWhite(){
		document.body.style.backgroundColor = "white";
	}
</script>
</head>
<body>
<p>
	<span onclick="changeBgRed();">Red</span> |
	<span onclick="changeBgWhite();">White</span>
</p>
</body>
</html>

Passing Values to Functions

The functions above aren't very useful because they always do the same thing. Every time we wanted to add another color, we would have to write another function. Also, if we want to modify the behavior, we will have to do it in each function. The example below shows how to create a single function to handle changing the background color.

Code Sample:

JavaScriptFunctions/Demos/PassingValues.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Passing Values</title>
<link href="style.css" rel="stylesheet">
<script>
	function changeBg(color){
		document.body.style.backgroundColor = color;
	}
</script>
</head>
<body>
<p>
	<span onclick="changeBg('red');">Red</span> |
	<span onclick="changeBg('white');">White</span>
</p>
</body>
</html>

Code Explanation

As you can see, when calling the changeBg() function, we pass a value (e.g., 'red'), which is assigned to the color variable. We can then refer to the color variable throughout the function. Variables created in this way are called function arguments or parameters. A function can have any number of arguments, separated by commas.

Adding parameters to functions makes them reusable and, thus, more useful; as you saw above, we can call the changeBg() function many times, passing to it a different color as needed. We can make our functions even more useful by providing default values for parameters so that, if the function is called without a parameter, we assign some default to the parameter. (Note that, since the ability to add a default value is recent addition to JavaScript, this won't work in all browsers.) Here's how we might modify our earlier example:

Code Sample:

JavaScriptFunctions/Demos/PassingValuesDefaultParam.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Passing Values - Default Param</title>
<link href="style.css" rel="stylesheet">
<script>
	function changeBg(color='blue'){
		document.body.style.backgroundColor = color;
	}
</script>
</head>
<body>
<p>
	<span onclick="changeBg('red');">Red</span> |
	<span onclick="changeBg('white');">White</span> |
	<span onclick="changeBg();">Blue (no param)</span>
</p>
</body>
</html>

Code Explanation

We've added a default value for function changeBg's color parameter, giving it the value blue if no value is supplied when the function is called. We've also added a third span on which the user can click; here we call changeBg() (without a parameter for color) and thus get the default color "blue".

A Note on Variable Scope

Variables created through function arguments or declared within a function with var are local to the function, meaning that they cannot be accessed outside of the function.

Variables declared with var outside of a function and variables that are used without being declared are global, meaning that they can be used anywhere on the page.

Next