javascript for journalists

A function is a block of code that is stored into memory to await execution at a time when the function is run. When we place code in a function, it is read by the program, but the code is not run immediately, but rather until we tell it to.

Functions in the examples below are given names that follow the same rules as variable names; no spaces or special characters (except underscores) and they are case-sensitive.

function myGreatFunction(){
	document.write("This will only be seen when the function is run");
}

In the above example, myGreatFunction stores some code that is setup to be run at a later time. A function is written starting with the keyword function in lowercase, followed by the function's name. It is then proceeded by an opening and closing parenthesis. The body of the function, were the code is kept is surrounded by curly brackets.

You can run—or "call"— a function by referencing its name followed by parenthesis.

function myGreatFunction(){
	document.write("This will only be seen when the function is run");
}

myGreatFunction();

output:
This will only be seen when the function is run

One of the more common uses of functions is attaching them to events, like a mouse click. This way, we can run a block of code whenever a specific event occurs. Below is the <button> tag with a special attribute called onclick which will execute some JavaScript:

Test this button

<button id="myButton" onclick="displayMessage()">Test this button</button>

<script>
function displayMessage(){
	document.write("You clicked the button!");
}
</script>

In the example above, you can see we've created a function called displayMessage. When the button is clicked, we execute the displayMessage function, displaying some text on the screen.

Passing Data into a Function

The parenthesis in a function play an optional, but important role in the power functions have in JavaScript. We can optionally put a variable in the parenthesis, which allows us to pass data into the function when it's called. This allows us to reuse functions for many different purposes, and have them operate differently depending on what data is pass in.

function displayMessage(message){
	document.write(message);
}

displayMessage("Hello World" + "<br />");
displayMessage("Show me the money!");

output:
Hello World
Show me the money!

In the example above, we've called the displayMessage function twice, but each time we sent the function a different string of data. That data was passed in the message variable, and made available to us within the function. The variable used to pass in data is called the argument. Arguments do not need to be declared with the VAR keyword. It is also worth noting that arguments are not available outside the function, and only exist within the function call. (More on this later.)

We also have the ability to send multiple arguments of data to a function. We do this by separating them with acomma.

function greeting(name, location){
	document.write("Hello " + name + " from " + location);
}

greeting("Jeremy", "Berkeley");

output:
Hello Jeremy from Berkeley

Functions can also return data back to the place they were called. This is ideal in situations where we want to modify data quickly, and have it sent back. Observe the following example:

function addNumbers(num1, num2){
	var total = num1 + num2;
	return total;
}

document.write("7 plus 4 is " + addNumbers(7, 4));

output:
11

In the above example, we called the function addNumbers and sent it two piece of data: 7 and 4. The function added the numbers, then sent back the total using the return keyword. It's important to note that we created a new variable, total, inside this function using the VAR keyword. This variable only exists within the scope of this function. If we tried to reference it elsewhere, we would get an error message or an undefined.

Below is another working example of passing data into a function, and returning the message:

function makeBold(str){
	return "<strong>" + str + "</string>";
}

document.write("Some " + makeBold("text") + " where parts are " + makeBold("bold"));

output:
Some text where parts are bold

In the above example, we've designed a function that takes a string, and adds some <strong> tags around them, then returns the new text. We can reuse the function over and over by sending new data, each time it would convert it to bold.