JavaScript Functions Part 1


Fundamentally the art of computer programming is factoring a set of requirements into functions and data structures. Functions are the modular units of JavaScript. Functions in JavaScript are objects.

Here is an example of a simple function that takes in a string and a number and then writes them both to to browser’s console. To open the console in Firefox, go to Tools, Web Developer, Web Console to view the web console.

Enter a name:
Enter a number:

The HTML for this form is shown below. In WordPress we can use the Text editor (not the Visual one) and just put that code into the window. We also need a JavaScript file that contains the function. In this case the function name is writeConsole(). We also need to be sure that the JavaScript file is loaded into the header. One way is to edit the header.php WordPress template file and add a call to load the script. You will need to FTP into your server and add the file under the appropriate folder for your theme.

<form>
Enter a name: <input type="text" id="jsFunctionsName" name="Name" />
Enter a number: <input type="text" id="jsFunctionsNumber" name="Number" />
<input type="button" value="Send to the browser's console" onclick=writeConsole() />
</form>

Below is the JavaScript code.

function writeConsole (name, number)
{
	var name = "";
	var number = "";
	var message = "";
	name = document.getElementById("jsFunctionsName").value;
	number = document.getElementById("jsFunctionsNumber").value;
	message = name + number;
	console.log (message);
}

Functions take in parameters. Each parameter is separated by a comma. Everything inside the function is the body. “Invoking a function” is just another way of saying “calling a function”. You can also pass variables as arguments, and that’s often the more common case as we did here. You can even use expressions as arguments. Expressions are first evaluated and then passed to the function. A expression could be numeric such as 12/100. A expression could be a boolean expression that evaluates to true or false, such as status == “newuser”. The order of the parameters must match the order of the arguments.

JavaScript is pass-by-value. JavaScript passes arguments to a function using pass-by-value. What that means is that each argument is copied into the parameter variable. When an argument is passed to a function its value is first copied and then assigned to the corresponding parameter. Whatever happens to a parameter in the function, stays in the function.

What happens is you pass too many arguments to a function, or not enough arguments to a function? If you pass too few, each parameter that doesn’t have a matching argument is set to undefined. So if we try to show that variable to the user, they will the word undefined. If we try to pass too many arguments, JavaScript just ignores the extras. Also a function may have no parameters at all.

Functions can return values. Use the return keyword. Functions do not have to return anything. After the return keyword, use a value, variable or expression. A function without a return statement returns undefined.

The rules for naming a function are the same as the rules for naming a variable.

The difference between a variable declared outside a function and a variable declared inside a function is where that variable can be used. If the variable is declared outside a function, then you can use it anywhere in your code – it is global. If a variable is declared inside a function, then you can use it only within that function – this is local. This is known as a variable’s scope. There are two kinds of scope: global and local. If we use a variable inside a function that was previously declared outside the function, we are using a global variable. Where you declare your variables determines how visible they are to other parts of your code.

Global variables live as long as the page. A global variable begins life when its JavaScript is loaded into the page. But, your global variable’s life ends when the page goes away. Even if you reload the same page, all your global variables are destroyed and then recreated in the newly loaded page.

Local variables typically disappear when your function ends. Local variables are created when your function is first called and live until the function returns (with a value or not). That said, you can take the values of your local variables and return them from the function before the variables meet their digital maker.

If you use a variable without declaring it first, that variable will be global. That means that even if you use a variable for the first time inside a function (because you meant for it to be local), the variable will actually be global, and be available outside the function too (which might cause confusion later). So, don’t forget to declare your locals!

What happens when I name a local variable the same thing as an existing global variable? Any references to a variable within the function refer to the local variable and not the global. So we say the global variable is in the shadow of the local variable.

JavaScript makes two passes over your page: in the first pass it reads all the function definitions, and in the second it begins executing your code. So, that allows you to place functions anywhere in your file.

Series Navigation<< JavaScript Anonymous FunctionsJavaScript Functions Part 2 >>

Leave a comment

Your email address will not be published. Required fields are marked *